Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
admin web

Drag svg file along with path

Recommended Posts

I am try to drag svg file along with a path are show on jacket shoulder white line. 

See the Pen NzmYMo by kdpan (@kdpan) on CodePen

Link to comment
Share on other sites

Hi, I had to deal with something like this about a month ago.

 

First you forgot to include jQuery in the pen's resources.

 

Then in order to enforce the right bounds, you need to find the dimensions of the path you want to use as track using getBBox() and use those in the Draggable instance, but for that you have to line up the patch and the track correctly, otherwise it looks a bit funny:

 

var bounds = document.getElementById("line2").getBBox();

var R = Draggable.create( "#patch_218_454", {
  type: "x,y",
  bounds:{
    minX: 0, maxX:bounds.width,
    minY:-5, maxY:bounds.height - 5
  },
  onDrag: function (e) {
    console.log(e.offsetX);
    console.log(R);
  }
});

 

Then in order to limit the patch movement to the path you want to use, don't use the Draggable instance on the patch but in a dummy object, then simply trigger the instance using the patch and update an independent GSAP instance using the onDrag callback. This sample from one of our heroes @Diaco shows how to do that:

 

See the Pen aOzeNR by MAW (@MAW) on CodePen

Here in the docs, more specifically in the config object properties you'll find the trigger property.

 

https://greensock.com/docs/Utilities/Draggable

 

Hope this helps.

Happy Tweening!!!

  • Like 6
Link to comment
Share on other sites

Another approach that requires a little more work, but is more flexible. It finds the closest point on a path, and does not require a proxy element.

 

See the Pen RBwWWm by osublake (@osublake) on CodePen

 

 

A couple threads on the technique.

 

 

 

 

  • Like 6
Link to comment
Share on other sites

@OSUblake How geometrically elegant, a true heir of Pythagoras 8-)

  • Like 5
Link to comment
Share on other sites

22 hours ago, Rodrigo said:

Hi, I had to deal with something like this about a month ago.

 

First you forgot to include jQuery in the pen's resources.

 

Then in order to enforce the right bounds, you need to find the dimensions of the path you want to use as track using getBBox() and use those in the Draggable instance, but for that you have to line up the patch and the track correctly, otherwise it looks a bit funny:

 


var bounds = document.getElementById("line2").getBBox();

var R = Draggable.create( "#patch_218_454", {
  type: "x,y",
  bounds:{
    minX: 0, maxX:bounds.width,
    minY:-5, maxY:bounds.height - 5
  },
  onDrag: function (e) {
    console.log(e.offsetX);
    console.log(R);
  }
});

 

Then in order to limit the patch movement to the path you want to use, don't use the Draggable instance on the patch but in a dummy object, then simply trigger the instance using the patch and update an independent GSAP instance using the onDrag callback. This sample from one of our heroes @Diaco shows how to do that:

 

See the Pen aOzeNR by MAW (@MAW) on CodePen

Here in the docs, more specifically in the config object properties you'll find the trigger property.

 

https://greensock.com/docs/Utilities/Draggable

 

Hope this helps.

Happy Tweening!!!

Thanks for the reply

Link to comment
Share on other sites

22 hours ago, OSUblake said:

Another approach that requires a little more work, but is more flexible. It finds the closest point on a path, and does not require a proxy element.

 

See the Pen RBwWWm by osublake (@osublake) on CodePen

 

 

A couple threads on the technique.

 

Thanks for the reply.

 am trying as per your code but still svg not drag along the path.

 

 

 

Link to comment
Share on other sites

30 minutes ago, admin web said:

Thanks for the reply.

 am trying as per your code but still svg not drag along the path.

 

It's much easier to work with SVG when elements start at 0,0 coordinates, which is what my demo assumed. The patch should be in the very top-left corner, but it's not. Fix that and it should work just fine.

 

See the Pen zLxGRK by osublake (@osublake) on CodePen

 

 

 

Also, the line element doesn't have to be a real element. You can plug in your own values from your data for x1,y1,x2,y2 if you want.

  • Like 3
Link to comment
Share on other sites

You're setting as the target of the Draggable instance the element with the id="box". It should be the patch element.

var line = document.querySelector("#line");
var patch = document.getElementById("patch_218_454");

var x1 = line.x1.baseVal.value || 0;
var y1 = line.y1.baseVal.value || 0;
var x2 = line.x2.baseVal.value || 0;
var y2 = line.y2.baseVal.value || 0;

var C = x2 - x1;
var D = y2 - y1;

var distSq  = C * C + D * D;


/* TweenLite.set(patch, {
  xPercent: -50,
  yPercent: -50
}); */

var draggable = new Draggable(patch, {
  allowContextMenu: true,
  liveSnap: {
    points: getClosestPoint
  }  
});

/* TweenLite.set(patch, getClosestPoint({ 
  x: draggable.x, 
  y: draggable.y 
})); */

draggable.update(true)

 

That allows the patch to be dragged, but it throws the live snapping far from the line. I'm not sure why is that, perhaps the fact that you have an <svg> tag inside another <svg> tag. The code is making the calculations in the context of the outer SVG tag and then those are being applied in the inner SVG tag, which causes that issue. I haven't seen something like that before; any particular reason for that?

 

Also you don't need throwProps for this, so you can remove it from the Draggable instance.

 

Happy Tweening!!

 

PS: Well... basically what Blake said :D, He beat me to it

  • Like 5
Link to comment
Share on other sites

Hehe @Rodrigo your code is the same as mine!

 

 I was also positioning everything from the center. Using the center with SVG and canvas elements makes everything so much easier.

 

See the Pen JMvVyo by osublake (@osublake) on CodePen

 

 

 

See the Pen ZxVmyx by osublake (@osublake) on CodePen

 

 

 

  • Like 6
Link to comment
Share on other sites

drag path remain same position like shown in demo. and my drag handler will be svg selector not a "<g> selector" so we need to update svg x,y position's not a group "<g>"

Link to comment
Share on other sites

A <g> element has no real position or size. It's defined by its children. That's why positioning everything at 0,0 and using the center works so well. If any children of a <g> cause the position or size to change i.e. its bounding box, everything will remain anchored around the center point.

 

And you can't drag a nested <svg> element because transforms won't work on it, so you'll still need to use a <g> element somehow.

  • Like 5
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×