Closed Aya-S closed 3 years ago
Hey @Aya-S and welcome!
I've been digging the Fabric.js docs, and it seems that by definition:
This would be because the line center is considered the origin of the line so (x1;y1)
is where you first created the line and (x2;y2)
where you released it, and those coordinates are relative to the line center.
Using 2 * x2
and 2 * y2
values yourself give the correct gradients. Careful as JS Canvas consider x grows by going from left to write, and y grows by going from top to bottom.
Beware as if you transform your lines after drawing (like rescaling or rotating), the x2
and y2
won't change, you'd have to apply the transformations yourself by applying the scaleX
, scaleY
and angle
properties.
Hope this helps, don't hesitate if you have more questions, otherwise feel free to close :) Fanilo
hello I'm getting this as the jason description of a line drawn on the canvas: I want to calculate the gradient of the line so was checking x1,y1 x2, y2 and they always come back as negatives of each other.
[{'type': 'line', 'version': '3.6.3', 'originX': 'center', 'originY': 'center', 'left': 130.5, 'top': 213.5, 'width': 89, 'height': 15, 'fill': '#65EA47', 'stroke': '#65EA47', 'strokeWidth': 3, 'strokeDashArray': None, 'strokeLineCap': 'butt', 'strokeDashOffset': 0, 'strokeLineJoin': 'miter', 'strokeMiterLimit': 4, 'scaleX': 1, 'scaleY': 1, 'angle': 0, 'flipX': False, 'flipY': False, 'opacity': 1, 'shadow': None, 'visible': True, 'clipTo': None, 'backgroundColor': '', 'fillRule': 'nonzero', 'paintFirst': 'fill', 'globalCompositeOperation': 'source-over', 'transformMatrix': None, 'skewX': 0, 'skewY': 0, 'x1': -44.5, 'x2': 44.5, 'y1': -7.5, 'y2': 7.5}], 'background': '#eee'