Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to make a line draggable with InteractiveSVG? #1

Open
q2apro opened this issue Oct 25, 2022 · 1 comment
Open

How to make a line draggable with InteractiveSVG? #1

q2apro opened this issue Oct 25, 2022 · 1 comment

Comments

@q2apro
Copy link

q2apro commented Oct 25, 2022

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
Copy link
Author

q2apro commented Oct 25, 2022

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".

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant