[Bug]: Line doesn't update x1,y1,x2,y2 inside object:moving event handler

fabricjs / fabric.js

Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser

http://fabricjs.com

Other

28.02k stars 3.45k forks source link

[Bug]: Line doesn't update x1,y1,x2,y2 inside object:moving event handler #9934

Closed maxerbubba closed 1 week ago

maxerbubba commented 1 week ago

CheckList

[X] I agree to follow this project's Code of Conduct
[X] I have read and followed the Contributing Guide
[X] I have read and followed the Issue Tracker Guide
[X] I have searched and referenced existing issues and discussions
[X] I am filing a BUG report.
[X] I have managed to reproduce the bug after upgrading to the latest version
[X] I have created an accurate and minimal reproduction

Version

5.3.0

In What environments are you experiencing the problem?

Chrome

Node Version (if applicable)

None

Link To Reproduction

https://jsfiddle.net/pLco1yr2/2/

Steps To Reproduce

Create a line
log event.target.x1 on object:moving event handler
user drags the line

Expected Behavior

x1, y1, x2, y2 see new values in event handler.

Actual Behavior

x1, y1, x2, y2 do not update.

Note that top and left update correctly.

Error Message & Stack Trace

No response

asturur commented 1 week ago

Hi @maxerbubba this is a misconception with the Line object. the x,y properties are just for initialization. After that is only the left/top that count.

asturur commented 1 week ago

We know this is unoptimal and we plan to remove Line in favor of polyLine with only a single segment.

maxerbubba commented 1 week ago

Thanks. I was able to use Rect as a workaround but computing the angles myself was tricky

Sent from an iPhone

On Sun, Jun 23, 2024 at 1:07 AM Andrea Bogazzi @.***> wrote:

We know this is unoptimal and we plan to remove Line in favor of polyLine with only a single segment.

— Reply to this email directly, view it on GitHub https://github.com/fabricjs/fabric.js/issues/9934#issuecomment-2184832161, or unsubscribe https://github.com/notifications/unsubscribe-auth/AB7KYTXMZT3IFLUH3Z5UNSLZIZ63BAVCNFSM6AAAAABJWK5VCGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCOBUHAZTEMJWGE . You are receiving this because you were mentioned.Message ID: @.***>

asturur commented 1 week ago

Is not hard to get updated points in realtime from the line object.

maxerbubba commented 6 hours ago

How does one get the updated points from a line in realtime?

Consider updating function documentation. Thanks!

asturur commented 6 hours ago

get the poins relative from the center of the line.

const p1 = new Point(x1, y1);
const p2 = new Point(x2, y2);
const center = p1.lerp(p2);

const p1Relative = p1.subtract(center);
const p2Relative = p2.subtract(center);

use the moving or object:moving event and use the myLine.calcTransformMatrix() function in the event to get the updated matrix. and transform the points

line.on('moving', () => {
  const m = myLine.calcTransformMatrix();
  const updatedP1 = p1Relative.transform(m);
  const updatedP2 = p2relative.transform(m);
});