Jan The Ran Posted December 11, 2019 Share Posted December 11, 2019 Hi. I am new to draggable and gsap. I want to set a draggable path element that is inside a SVG element and snap it once is near a certain position. Draggable.create(".piece", { //type:"x,y", type:"x,y", bounds:"#svg", onDragStart: this.onDragStart, liveSnap:{ points: this.snapIfPossible } } ); On my default view settings on my computer the width of the SVG is around 1k pixels. When I drag the element I get the payload object (point) containing an X and a Y of where I am dragging. However if I drag something from the far right to the far left on the SVG it says something like -200. So what unit is this and how do I compare it to pixels? (ps: trying to do this in vue) snapIfPossible(point){ if(!this.dragSource) return point; console.log(point.x, this.parentElement); for(var i=0; i<this.snapPoints.length; i++) { var snapPoint = this.snapPoints[i].getBBox(); var dx = point.x + this.dragSource.x - snapPoint.x; var dy = point.y + this.dragSource.y - snapPoint.y; var distance = Math.sqrt(dx * dx + dy * dy) if (distance < 100) { return {x:snapPoint.x, y:snapPoint.y}; } if(i === 0) { //console.log("dx", dx, "dragsource", this.dragSource.x, "snappoint", snapPoint, "point.x", point.x) } } return point; //otherwise don't change anything. }, Link to comment Share on other sites More sharing options...
OSUblake Posted December 11, 2019 Share Posted December 11, 2019 If your <svg> element has a viewBox attribute, then your SVG coordinates are probably transformed. Check out this demo. The <svg> element fills the entire screen. The gray box, a <rect> element, fills the svg 100%. Any white boxes around it are to preserve the aspect ratio. If you can resize the screen to be 1000x1000, the SVG and Screen coordinates will match, otherwise the svg coordinates will be transformed. Moving your mouse into the white area to the left or above the gray box will result in a negative value. See the Pen 5d84dcad3edc6da20354948dbcdf6489 by osublake (@osublake) on CodePen Study that demo carefully. The strange coordinates has nothing to do with gsap or Draggable. It's just how svg works. 4 Link to comment Share on other sites More sharing options...
OSUblake Posted December 11, 2019 Share Posted December 11, 2019 20 minutes ago, OSUblake said: The gray box, a <rect> element, fills the svg 100%. People have challenged me on this. I just say, look at the markup. Its width and height are set to 100%. Setting the <rect> element's width and height to 1000 would have the same effect. <svg id="svg" viewBox="0 0 1000 1000" preserveAspectRatio="xMidYMid meet"> <rect id="svg-background" x="0" y="0" width="100%" height="100%" /> </svg> 2 Link to comment Share on other sites More sharing options...
Jan The Ran Posted December 11, 2019 Author Share Posted December 11, 2019 3 hours ago, OSUblake said: If your <svg> element has a viewBox attribute, then your SVG coordinates are probably transformed. Check out this demo. The <svg> element fills the entire screen. The gray box, a <rect> element, fills the svg 100%. Any white boxes around it are to preserve the aspect ratio. If you can resize the screen to be 1000x1000, the SVG and Screen coordinates will match, otherwise the svg coordinates will be transformed. Moving your mouse into the white area to the left or above the gray box will result in a negative value. Study that demo carefully. The strange coordinates has nothing to do with gsap or Draggable. It's just how svg works. Thank you. That makes sense! So basically I assume I have to calculate everything to SVG coordinates since that's what I get as input to the liveSnap function. How do I go about calculating the coordinates to return though? I seem to miss the mark quite a bit. Codepen added! See the Pen ExaKORB by zdzfzsdffdsaasdf (@zdzfzsdffdsaasdf) on CodePen Link to comment Share on other sites More sharing options...
OSUblake Posted December 11, 2019 Share Posted December 11, 2019 Hi @Jan The Ran Now that I see what you're trying to do, I think this might be a little easier. Not sure why you're using d3 when you can just use querySelectorAll. See the Pen d63bc6ee64346454fbbf6015ac196744 by osublake (@osublake) on CodePen Note that I added a blueprint attribute to the pieces. And getBBox() can be really confusing once you start using transforms. https://greensock.com/forums/topic/13681-svg-gotchas/page/2/?tab=comments#comment-72060 2 Link to comment Share on other sites More sharing options...
Jan The Ran Posted December 11, 2019 Author Share Posted December 11, 2019 36 minutes ago, OSUblake said: Hi @Jan The Ran Now that I see what you're trying to do, I think this might be a little easier. Not sure why you're using d3 when you can just use querySelectorAll. Note that I added a blueprint attribute to the pieces. And getBBox() can be really confusing once you start using transforms. https://greensock.com/forums/topic/13681-svg-gotchas/page/2/?tab=comments#comment-72060 Wow! Thank you so much! Let me know where to send the paycheck 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now