InteractiveSVG.js icon indicating copy to clipboard operation
InteractiveSVG.js copied to clipboard

How to make a line draggable with InteractiveSVG?

Open q2apro opened this issue 3 years ago • 1 comments

I am trying the examples provided and changed the code to make a line itself draggable:

svg.addLine({p1: A, p2: B, draggable: true});

But clicking the line does not work.

Full code:

	var sgv_width = 300;
	var sgv_height = 300;

        (function() {
            var svg = InteractiveSVG.create('svg-3', sgv_width, sgv_height);
            var A = svg.addPoint({ x: 40, y: 75 });
            var B = svg.addPoint({ x: 160, y: 75 });
            svg.addLine({p1: A, p2: B, draggable: true});  // seems not to work
        })();

2022-10-25

How to make the line itself draggable?

q2apro avatar Oct 25 '22 11:10 q2apro

Update: I tried to add a center point for the dragging:

var point_M = svg.addPoint({ x: (point_A.x + point_B.x)*0.5, y: (point_A.y + point_B.y)*0.5 });

image

And then I tried to use:

svg.linkAttributes(point_B, 'x', point_M, 'x');
svg.linkAttributes(point_B, 'y', point_M, 'y');

But it seems that I cannot do calculations with linkAttributes() to determine the position of points A and B when dragging point M.

Is there any function "onmove" for a dragged point that we could use to update while dragging?


I also tried svg.addMidPoint(point_A, point_B); but then I get the error "Uncaught TypeError: this.addPoint(...).addDependency is not a function".

q2apro avatar Oct 25 '22 11:10 q2apro