fabric.js: adjusting the size of the controls of a modified polygon, v1.7.22 vs v2.7.02019 Community Moderator ElectionjQuery - setting the selected value of a select control via its text descriptionHow to get image size (height & width) using JavaScript?How to modify the URL without reloading the page?What is the max size of localStorage values?Get the size of the screen, current web page and browser windowCan one AngularJS controller call another?How does Access-Control-Allow-Origin header work?offsetting an html anchor to adjust for fixed headerWhy is my variable unaltered after I modify it inside of a function? - Asynchronous code referenceAnimating Polygon with Fabric.js
How do spaceships determine each other's mass in space?
Virginia employer terminated employee and wants signing bonus returned
What would be the most expensive material to an intergalactic society?
What are some noteworthy "mic-drop" moments in math?
Plausibility of Mushroom Buildings
Why does cron require MTA for logging?
Doesn't allowing a user mode program to access kernel space memory and execute the IN and OUT instructions defeat the purpose of having CPU modes?
How many characters using PHB rules does it take to be able to have access to any PHB spell at the start of an adventuring day?
Street obstacles in New Zealand
In the late 1940’s to early 1950’s what technology was available that could melt ice?
PTIJ: Why does only a Shor Tam ask at the Seder, and not a Shor Mu'ad?
Dynamic Linkage of LocatorPane and InputField
Specifying a starting column with colortbl package and xcolor
Can one live in the U.S. and not use a credit card?
Is it safe to abruptly remove Arduino power?
Does Christianity allow for believing on someone else's behalf?
What's the 'present simple' form of the word "нашла́" in 3rd person singular female?
How do electrons receive energy when a body is heated?
What is the generally accepted pronunciation of “topoi”?
I can't die. Who am I?
Confusion about Complex Continued Fraction
I reported the illegal activity of my boss to his boss. My boss found out. Now I am being punished. What should I do?
Does "Until when" sound natural for native speakers?
Is a piano played in the same way as a harmonium?
fabric.js: adjusting the size of the controls of a modified polygon, v1.7.22 vs v2.7.0
2019 Community Moderator ElectionjQuery - setting the selected value of a select control via its text descriptionHow to get image size (height & width) using JavaScript?How to modify the URL without reloading the page?What is the max size of localStorage values?Get the size of the screen, current web page and browser windowCan one AngularJS controller call another?How does Access-Control-Allow-Origin header work?offsetting an html anchor to adjust for fixed headerWhy is my variable unaltered after I modify it inside of a function? - Asynchronous code referenceAnimating Polygon with Fabric.js
I am upgrading from fabric.js v1.7.22 to v2.7.0. My app supports programmatic and/or graphical modification of polygons (e.g., changing position of one or more vertices). Under v1.7.22, the control size could be recalculated by calling obj.SetCoords(), but this does not seem to work under v2.7.0.
To see this, run the snippet web page with either version of fabric.js. The web page initially will show a polygon with the controls, as expected:
Using v1.7.22, clicking the "change" button will change a polygon point and (ignoring the fact that the polygon is not in the correct location, a v1 problem requiring some fiddling) the controls will become larger to match the new size of the polygon:
Using v2.7.0, the polygon will be in the right place (no need to fiddle any more, thanks!) but the controls have not changed:
What code mod is needed to update the size of the controls for the modified polygon in v2.7.0?
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.7.0/fabric.min.js"></script> -->
</head>
<body onload="init()">
<canvas id="c" width="200" height="200" style="border:1px solid red"></canvas>
<button onclick="change()">change</button>
<script>
var canvas, poly;
var points1 = [x:-30, y:30, x:30, y:30, x:0, y:-30];
var points2 = [x:-60, y:60, x:30, y:30, x:0, y:-30];
function init()
canvas = new fabric.Canvas('c');
poly = new fabric.Polygon(points1,
left: 50, top: 50, strokeWidth: 2, stroke: 'cyan', objectCaching: false);
canvas.add(poly);
function change(x, y)
poly.set(left: 50, top: 50, points: points2);
poly._calcDimensions();
poly.setCoords();
canvas.renderAll();
</script>
</body>
</html>javascript
asked Mar 6 at 14:30
ericmandelericmandel
515
add a comment |
I am upgrading from fabric.js v1.7.22 to v2.7.0. My app supports programmatic and/or graphical modification of polygons (e.g., changing position of one or more vertices). Under v1.7.22, the control size could be recalculated by calling obj.SetCoords(), but this does not seem to work under v2.7.0.
To see this, run the snippet web page with either version of fabric.js. The web page initially will show a polygon with the controls, as expected:
Using v1.7.22, clicking the "change" button will change a polygon point and (ignoring the fact that the polygon is not in the correct location, a v1 problem requiring some fiddling) the controls will become larger to match the new size of the polygon:
Using v2.7.0, the polygon will be in the right place (no need to fiddle any more, thanks!) but the controls have not changed:
What code mod is needed to update the size of the controls for the modified polygon in v2.7.0?
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.7.0/fabric.min.js"></script> -->
</head>
<body onload="init()">
<canvas id="c" width="200" height="200" style="border:1px solid red"></canvas>
<button onclick="change()">change</button>
<script>
var canvas, poly;
var points1 = [x:-30, y:30, x:30, y:30, x:0, y:-30];
var points2 = [x:-60, y:60, x:30, y:30, x:0, y:-30];
function init()
canvas = new fabric.Canvas('c');
poly = new fabric.Polygon(points1,
left: 50, top: 50, strokeWidth: 2, stroke: 'cyan', objectCaching: false);
canvas.add(poly);
function change(x, y)
poly.set(left: 50, top: 50, points: points2);
poly._calcDimensions();
poly.setCoords();
canvas.renderAll();
</script>
</body>
</html>javascript
asked Mar 6 at 14:30
ericmandelericmandel
515
add a comment |
I am upgrading from fabric.js v1.7.22 to v2.7.0. My app supports programmatic and/or graphical modification of polygons (e.g., changing position of one or more vertices). Under v1.7.22, the control size could be recalculated by calling obj.SetCoords(), but this does not seem to work under v2.7.0.
To see this, run the snippet web page with either version of fabric.js. The web page initially will show a polygon with the controls, as expected:
Using v1.7.22, clicking the "change" button will change a polygon point and (ignoring the fact that the polygon is not in the correct location, a v1 problem requiring some fiddling) the controls will become larger to match the new size of the polygon:
Using v2.7.0, the polygon will be in the right place (no need to fiddle any more, thanks!) but the controls have not changed:
What code mod is needed to update the size of the controls for the modified polygon in v2.7.0?
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.7.0/fabric.min.js"></script> -->
</head>
<body onload="init()">
<canvas id="c" width="200" height="200" style="border:1px solid red"></canvas>
<button onclick="change()">change</button>
<script>
var canvas, poly;
var points1 = [x:-30, y:30, x:30, y:30, x:0, y:-30];
var points2 = [x:-60, y:60, x:30, y:30, x:0, y:-30];
function init()
canvas = new fabric.Canvas('c');
poly = new fabric.Polygon(points1,
left: 50, top: 50, strokeWidth: 2, stroke: 'cyan', objectCaching: false);
canvas.add(poly);
function change(x, y)
poly.set(left: 50, top: 50, points: points2);
poly._calcDimensions();
poly.setCoords();
canvas.renderAll();
</script>
</body>
</html>javascript
asked Mar 6 at 14:30
ericmandelericmandel
515
I am upgrading from fabric.js v1.7.22 to v2.7.0. My app supports programmatic and/or graphical modification of polygons (e.g., changing position of one or more vertices). Under v1.7.22, the control size could be recalculated by calling obj.SetCoords(), but this does not seem to work under v2.7.0.
To see this, run the snippet web page with either version of fabric.js. The web page initially will show a polygon with the controls, as expected:
Using v1.7.22, clicking the "change" button will change a polygon point and (ignoring the fact that the polygon is not in the correct location, a v1 problem requiring some fiddling) the controls will become larger to match the new size of the polygon:
Using v2.7.0, the polygon will be in the right place (no need to fiddle any more, thanks!) but the controls have not changed:
What code mod is needed to update the size of the controls for the modified polygon in v2.7.0?
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.7.0/fabric.min.js"></script> -->
</head>
<body onload="init()">
<canvas id="c" width="200" height="200" style="border:1px solid red"></canvas>
<button onclick="change()">change</button>
<script>
var canvas, poly;
var points1 = [x:-30, y:30, x:30, y:30, x:0, y:-30];
var points2 = [x:-60, y:60, x:30, y:30, x:0, y:-30];
function init()
canvas = new fabric.Canvas('c');
poly = new fabric.Polygon(points1,
left: 50, top: 50, strokeWidth: 2, stroke: 'cyan', objectCaching: false);
canvas.add(poly);
function change(x, y)
poly.set(left: 50, top: 50, points: points2);
poly._calcDimensions();
poly.setCoords();
canvas.renderAll();
</script>
</body>
</html><html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.7.0/fabric.min.js"></script> -->
</head>
<body onload="init()">
<canvas id="c" width="200" height="200" style="border:1px solid red"></canvas>
<button onclick="change()">change</button>
<script>
var canvas, poly;
var points1 = [x:-30, y:30, x:30, y:30, x:0, y:-30];
var points2 = [x:-60, y:60, x:30, y:30, x:0, y:-30];
function init()
canvas = new fabric.Canvas('c');
poly = new fabric.Polygon(points1,
left: 50, top: 50, strokeWidth: 2, stroke: 'cyan', objectCaching: false);
canvas.add(poly);
function change(x, y)
poly.set(left: 50, top: 50, points: points2);
poly._calcDimensions();
poly.setCoords();
canvas.renderAll();
</script>
</body>
</html><html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.7.0/fabric.min.js"></script> -->
</head>
<body onload="init()">
<canvas id="c" width="200" height="200" style="border:1px solid red"></canvas>
<button onclick="change()">change</button>
<script>
var canvas, poly;
var points1 = [x:-30, y:30, x:30, y:30, x:0, y:-30];
var points2 = [x:-60, y:60, x:30, y:30, x:0, y:-30];
function init()
canvas = new fabric.Canvas('c');
poly = new fabric.Polygon(points1,
left: 50, top: 50, strokeWidth: 2, stroke: 'cyan', objectCaching: false);
canvas.add(poly);
function change(x, y)
poly.set(left: 50, top: 50, points: points2);
poly._calcDimensions();
poly.setCoords();
canvas.renderAll();
</script>
</body>
</html>javascript
javascript
asked Mar 6 at 14:30
ericmandelericmandel
515
asked Mar 6 at 14:30
ericmandelericmandel
515
asked Mar 6 at 14:30
ericmandelericmandel
515
asked Mar 6 at 14:30
ericmandelericmandel
515
asked Mar 6 at 14:30
ericmandelericmandel
515
515
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
So i made an answer that is probably not what you want, but i think is useful to get started with a proper solution.
So as you see in my fiddle, the controls change correctly.
I changed on purpose the point that gets modified in order to get the worst effect possible.
The point is that you would need to figure out how to not make the triangle not move on the canvas.
In order to do so you should calculate the absolute position of a point to the canvas and the set the next position of the triangle mantaining that fixed.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.7.0/fabric.min.js"></script>
</head>
<body onload="init()">
<canvas id="c" width="200" height="200" style="border:1px solid red"></canvas>
<button onclick="change()">change</button>
<button onclick="change2()">change2</button>
<script>
var canvas, poly;
var points1 = [x:-130, y:-70, x:-70, y:-70, x:-120, y:-130];
var points2 = [x:-130, y:-70, x:-70, y:-70, x:-180, y:-170];
function init()
canvas = new fabric.Canvas('c');
poly = new fabric.Polygon(points1,
left: 50, top: 50, strokeWidth: 2, stroke: 'cyan', objectCaching: false);
canvas.add(poly);
function change(x, y)
poly.initialize(points2, left: poly.left, top: poly.top );
poly.setCoords();
canvas.renderAll();
function change2(x, y)
var matrix = poly.calcTransformMatrix();
var point1 = new fabric.Point(points1[0].x, points1[0].y);
point1 = point1.subtract(poly.pathOffset);
// newP is where is now point[0] on the canvas;
var newP = fabric.util.transformPoint(point1, matrix);
poly.initialize(points2);
// now poly is initialized with new dimensions. Where is p[0] now?
var newOffset = poly.pathOffset;
var point1 = new fabric.Point(points1[0].x, points1[0].y);
point1 = point1.subtract(newOffset);
point1.x /= poly.width;
point1.y /= poly.height;
// let's set the polygon's position to where p[0] was
// giving as anchor point the relative position of where p[0] is now with the new configuration
poly.setPositionByOrigin(newP, point1.x + 0.5, point1.y + 0.5);
poly.setCoords();
canvas.renderAll();
</script>
</body>
</html>EDIT:
i spent a bit of time and added the change2 button that handle the change pedantically but explaining what is going on.
I think this is the right way to go provided you can find out a point in the polygon that is not changing and that you can use as anchor point.
answered yesterday
AndreaBogazziAndreaBogazzi
9,89532248
Is there a reason the full initialize() has to be called, instead of this, which just resetting the width, height, and pathOffset:function change(x, y) var calcDims; poly.set(left: 50, top: 50, points: points2); calcDim = poly._calcDimensions(); poly.width = calcDim.width; poly.height = calcDim.height; poly.pathOffset = x: calcDim.left + poly.width / 2, y: calcDim.top + poly.height / 2 ; poly.setCoords(); canvas.renderAll();
– ericmandel
7 hours ago
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55025481%2ffabric-js-adjusting-the-size-of-the-controls-of-a-modified-polygon-v1-7-22-vs%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
So i made an answer that is probably not what you want, but i think is useful to get started with a proper solution.
So as you see in my fiddle, the controls change correctly.
I changed on purpose the point that gets modified in order to get the worst effect possible.
The point is that you would need to figure out how to not make the triangle not move on the canvas.
In order to do so you should calculate the absolute position of a point to the canvas and the set the next position of the triangle mantaining that fixed.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.7.0/fabric.min.js"></script>
</head>
<body onload="init()">
<canvas id="c" width="200" height="200" style="border:1px solid red"></canvas>
<button onclick="change()">change</button>
<button onclick="change2()">change2</button>
<script>
var canvas, poly;
var points1 = [x:-130, y:-70, x:-70, y:-70, x:-120, y:-130];
var points2 = [x:-130, y:-70, x:-70, y:-70, x:-180, y:-170];
function init()
canvas = new fabric.Canvas('c');
poly = new fabric.Polygon(points1,
left: 50, top: 50, strokeWidth: 2, stroke: 'cyan', objectCaching: false);
canvas.add(poly);
function change(x, y)
poly.initialize(points2, left: poly.left, top: poly.top );
poly.setCoords();
canvas.renderAll();
function change2(x, y)
var matrix = poly.calcTransformMatrix();
var point1 = new fabric.Point(points1[0].x, points1[0].y);
point1 = point1.subtract(poly.pathOffset);
// newP is where is now point[0] on the canvas;
var newP = fabric.util.transformPoint(point1, matrix);
poly.initialize(points2);
// now poly is initialized with new dimensions. Where is p[0] now?
var newOffset = poly.pathOffset;
var point1 = new fabric.Point(points1[0].x, points1[0].y);
point1 = point1.subtract(newOffset);
point1.x /= poly.width;
point1.y /= poly.height;
// let's set the polygon's position to where p[0] was
// giving as anchor point the relative position of where p[0] is now with the new configuration
poly.setPositionByOrigin(newP, point1.x + 0.5, point1.y + 0.5);
poly.setCoords();
canvas.renderAll();
</script>
</body>
</html>EDIT:
i spent a bit of time and added the change2 button that handle the change pedantically but explaining what is going on.
I think this is the right way to go provided you can find out a point in the polygon that is not changing and that you can use as anchor point.
answered yesterday
AndreaBogazziAndreaBogazzi
9,89532248
Is there a reason the full initialize() has to be called, instead of this, which just resetting the width, height, and pathOffset:function change(x, y) var calcDims; poly.set(left: 50, top: 50, points: points2); calcDim = poly._calcDimensions(); poly.width = calcDim.width; poly.height = calcDim.height; poly.pathOffset = x: calcDim.left + poly.width / 2, y: calcDim.top + poly.height / 2 ; poly.setCoords(); canvas.renderAll();
– ericmandel
7 hours ago
add a comment |
So i made an answer that is probably not what you want, but i think is useful to get started with a proper solution.
So as you see in my fiddle, the controls change correctly.
I changed on purpose the point that gets modified in order to get the worst effect possible.
The point is that you would need to figure out how to not make the triangle not move on the canvas.
In order to do so you should calculate the absolute position of a point to the canvas and the set the next position of the triangle mantaining that fixed.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.7.0/fabric.min.js"></script>
</head>
<body onload="init()">
<canvas id="c" width="200" height="200" style="border:1px solid red"></canvas>
<button onclick="change()">change</button>
<button onclick="change2()">change2</button>
<script>
var canvas, poly;
var points1 = [x:-130, y:-70, x:-70, y:-70, x:-120, y:-130];
var points2 = [x:-130, y:-70, x:-70, y:-70, x:-180, y:-170];
function init()
canvas = new fabric.Canvas('c');
poly = new fabric.Polygon(points1,
left: 50, top: 50, strokeWidth: 2, stroke: 'cyan', objectCaching: false);
canvas.add(poly);
function change(x, y)
poly.initialize(points2, left: poly.left, top: poly.top );
poly.setCoords();
canvas.renderAll();
function change2(x, y)
var matrix = poly.calcTransformMatrix();
var point1 = new fabric.Point(points1[0].x, points1[0].y);
point1 = point1.subtract(poly.pathOffset);
// newP is where is now point[0] on the canvas;
var newP = fabric.util.transformPoint(point1, matrix);
poly.initialize(points2);
// now poly is initialized with new dimensions. Where is p[0] now?
var newOffset = poly.pathOffset;
var point1 = new fabric.Point(points1[0].x, points1[0].y);
point1 = point1.subtract(newOffset);
point1.x /= poly.width;
point1.y /= poly.height;
// let's set the polygon's position to where p[0] was
// giving as anchor point the relative position of where p[0] is now with the new configuration
poly.setPositionByOrigin(newP, point1.x + 0.5, point1.y + 0.5);
poly.setCoords();
canvas.renderAll();
</script>
</body>
</html>EDIT:
i spent a bit of time and added the change2 button that handle the change pedantically but explaining what is going on.
I think this is the right way to go provided you can find out a point in the polygon that is not changing and that you can use as anchor point.
answered yesterday
AndreaBogazziAndreaBogazzi
9,89532248
Is there a reason the full initialize() has to be called, instead of this, which just resetting the width, height, and pathOffset:function change(x, y) var calcDims; poly.set(left: 50, top: 50, points: points2); calcDim = poly._calcDimensions(); poly.width = calcDim.width; poly.height = calcDim.height; poly.pathOffset = x: calcDim.left + poly.width / 2, y: calcDim.top + poly.height / 2 ; poly.setCoords(); canvas.renderAll();
– ericmandel
7 hours ago
add a comment |
So i made an answer that is probably not what you want, but i think is useful to get started with a proper solution.
So as you see in my fiddle, the controls change correctly.
I changed on purpose the point that gets modified in order to get the worst effect possible.
The point is that you would need to figure out how to not make the triangle not move on the canvas.
In order to do so you should calculate the absolute position of a point to the canvas and the set the next position of the triangle mantaining that fixed.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.7.0/fabric.min.js"></script>
</head>
<body onload="init()">
<canvas id="c" width="200" height="200" style="border:1px solid red"></canvas>
<button onclick="change()">change</button>
<button onclick="change2()">change2</button>
<script>
var canvas, poly;
var points1 = [x:-130, y:-70, x:-70, y:-70, x:-120, y:-130];
var points2 = [x:-130, y:-70, x:-70, y:-70, x:-180, y:-170];
function init()
canvas = new fabric.Canvas('c');
poly = new fabric.Polygon(points1,
left: 50, top: 50, strokeWidth: 2, stroke: 'cyan', objectCaching: false);
canvas.add(poly);
function change(x, y)
poly.initialize(points2, left: poly.left, top: poly.top );
poly.setCoords();
canvas.renderAll();
function change2(x, y)
var matrix = poly.calcTransformMatrix();
var point1 = new fabric.Point(points1[0].x, points1[0].y);
point1 = point1.subtract(poly.pathOffset);
// newP is where is now point[0] on the canvas;
var newP = fabric.util.transformPoint(point1, matrix);
poly.initialize(points2);
// now poly is initialized with new dimensions. Where is p[0] now?
var newOffset = poly.pathOffset;
var point1 = new fabric.Point(points1[0].x, points1[0].y);
point1 = point1.subtract(newOffset);
point1.x /= poly.width;
point1.y /= poly.height;
// let's set the polygon's position to where p[0] was
// giving as anchor point the relative position of where p[0] is now with the new configuration
poly.setPositionByOrigin(newP, point1.x + 0.5, point1.y + 0.5);
poly.setCoords();
canvas.renderAll();
</script>
</body>
</html>EDIT:
i spent a bit of time and added the change2 button that handle the change pedantically but explaining what is going on.
I think this is the right way to go provided you can find out a point in the polygon that is not changing and that you can use as anchor point.
answered yesterday
AndreaBogazziAndreaBogazzi
9,89532248
So i made an answer that is probably not what you want, but i think is useful to get started with a proper solution.
So as you see in my fiddle, the controls change correctly.
I changed on purpose the point that gets modified in order to get the worst effect possible.
The point is that you would need to figure out how to not make the triangle not move on the canvas.
In order to do so you should calculate the absolute position of a point to the canvas and the set the next position of the triangle mantaining that fixed.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.7.0/fabric.min.js"></script>
</head>
<body onload="init()">
<canvas id="c" width="200" height="200" style="border:1px solid red"></canvas>
<button onclick="change()">change</button>
<button onclick="change2()">change2</button>
<script>
var canvas, poly;
var points1 = [x:-130, y:-70, x:-70, y:-70, x:-120, y:-130];
var points2 = [x:-130, y:-70, x:-70, y:-70, x:-180, y:-170];
function init()
canvas = new fabric.Canvas('c');
poly = new fabric.Polygon(points1,
left: 50, top: 50, strokeWidth: 2, stroke: 'cyan', objectCaching: false);
canvas.add(poly);
function change(x, y)
poly.initialize(points2, left: poly.left, top: poly.top );
poly.setCoords();
canvas.renderAll();
function change2(x, y)
var matrix = poly.calcTransformMatrix();
var point1 = new fabric.Point(points1[0].x, points1[0].y);
point1 = point1.subtract(poly.pathOffset);
// newP is where is now point[0] on the canvas;
var newP = fabric.util.transformPoint(point1, matrix);
poly.initialize(points2);
// now poly is initialized with new dimensions. Where is p[0] now?
var newOffset = poly.pathOffset;
var point1 = new fabric.Point(points1[0].x, points1[0].y);
point1 = point1.subtract(newOffset);
point1.x /= poly.width;
point1.y /= poly.height;
// let's set the polygon's position to where p[0] was
// giving as anchor point the relative position of where p[0] is now with the new configuration
poly.setPositionByOrigin(newP, point1.x + 0.5, point1.y + 0.5);
poly.setCoords();
canvas.renderAll();
</script>
</body>
</html>EDIT:
i spent a bit of time and added the change2 button that handle the change pedantically but explaining what is going on.
I think this is the right way to go provided you can find out a point in the polygon that is not changing and that you can use as anchor point.
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.7.0/fabric.min.js"></script>
</head>
<body onload="init()">
<canvas id="c" width="200" height="200" style="border:1px solid red"></canvas>
<button onclick="change()">change</button>
<button onclick="change2()">change2</button>
<script>
var canvas, poly;
var points1 = [x:-130, y:-70, x:-70, y:-70, x:-120, y:-130];
var points2 = [x:-130, y:-70, x:-70, y:-70, x:-180, y:-170];
function init()
canvas = new fabric.Canvas('c');
poly = new fabric.Polygon(points1,
left: 50, top: 50, strokeWidth: 2, stroke: 'cyan', objectCaching: false);
canvas.add(poly);
function change(x, y)
poly.initialize(points2, left: poly.left, top: poly.top );
poly.setCoords();
canvas.renderAll();
function change2(x, y)
var matrix = poly.calcTransformMatrix();
var point1 = new fabric.Point(points1[0].x, points1[0].y);
point1 = point1.subtract(poly.pathOffset);
// newP is where is now point[0] on the canvas;
var newP = fabric.util.transformPoint(point1, matrix);
poly.initialize(points2);
// now poly is initialized with new dimensions. Where is p[0] now?
var newOffset = poly.pathOffset;
var point1 = new fabric.Point(points1[0].x, points1[0].y);
point1 = point1.subtract(newOffset);
point1.x /= poly.width;
point1.y /= poly.height;
// let's set the polygon's position to where p[0] was
// giving as anchor point the relative position of where p[0] is now with the new configuration
poly.setPositionByOrigin(newP, point1.x + 0.5, point1.y + 0.5);
poly.setCoords();
canvas.renderAll();
</script>
</body>
</html><html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.7.0/fabric.min.js"></script>
</head>
<body onload="init()">
<canvas id="c" width="200" height="200" style="border:1px solid red"></canvas>
<button onclick="change()">change</button>
<button onclick="change2()">change2</button>
<script>
var canvas, poly;
var points1 = [x:-130, y:-70, x:-70, y:-70, x:-120, y:-130];
var points2 = [x:-130, y:-70, x:-70, y:-70, x:-180, y:-170];
function init()
canvas = new fabric.Canvas('c');
poly = new fabric.Polygon(points1,
left: 50, top: 50, strokeWidth: 2, stroke: 'cyan', objectCaching: false);
canvas.add(poly);
function change(x, y)
poly.initialize(points2, left: poly.left, top: poly.top );
poly.setCoords();
canvas.renderAll();
function change2(x, y)
var matrix = poly.calcTransformMatrix();
var point1 = new fabric.Point(points1[0].x, points1[0].y);
point1 = point1.subtract(poly.pathOffset);
// newP is where is now point[0] on the canvas;
var newP = fabric.util.transformPoint(point1, matrix);
poly.initialize(points2);
// now poly is initialized with new dimensions. Where is p[0] now?
var newOffset = poly.pathOffset;
var point1 = new fabric.Point(points1[0].x, points1[0].y);
point1 = point1.subtract(newOffset);
point1.x /= poly.width;
point1.y /= poly.height;
// let's set the polygon's position to where p[0] was
// giving as anchor point the relative position of where p[0] is now with the new configuration
poly.setPositionByOrigin(newP, point1.x + 0.5, point1.y + 0.5);
poly.setCoords();
canvas.renderAll();
</script>
</body>
</html>answered yesterday
AndreaBogazziAndreaBogazzi
9,89532248
edited yesterday
answered yesterday
AndreaBogazziAndreaBogazzi
9,89532248
answered yesterday
AndreaBogazziAndreaBogazzi
9,89532248
answered yesterday
AndreaBogazziAndreaBogazzi
9,89532248
9,89532248
Is there a reason the full initialize() has to be called, instead of this, which just resetting the width, height, and pathOffset:function change(x, y) var calcDims; poly.set(left: 50, top: 50, points: points2); calcDim = poly._calcDimensions(); poly.width = calcDim.width; poly.height = calcDim.height; poly.pathOffset = x: calcDim.left + poly.width / 2, y: calcDim.top + poly.height / 2 ; poly.setCoords(); canvas.renderAll();
– ericmandel
7 hours ago
add a comment |
Is there a reason the full initialize() has to be called, instead of this, which just resetting the width, height, and pathOffset:function change(x, y) var calcDims; poly.set(left: 50, top: 50, points: points2); calcDim = poly._calcDimensions(); poly.width = calcDim.width; poly.height = calcDim.height; poly.pathOffset = x: calcDim.left + poly.width / 2, y: calcDim.top + poly.height / 2 ; poly.setCoords(); canvas.renderAll();
– ericmandel
7 hours ago
Is there a reason the full initialize() has to be called, instead of this, which just resetting the width, height, and pathOffset:
function change(x, y) var calcDims; poly.set(left: 50, top: 50, points: points2); calcDim = poly._calcDimensions(); poly.width = calcDim.width; poly.height = calcDim.height; poly.pathOffset = x: calcDim.left + poly.width / 2, y: calcDim.top + poly.height / 2 ; poly.setCoords(); canvas.renderAll(); – ericmandel
7 hours ago
Is there a reason the full initialize() has to be called, instead of this, which just resetting the width, height, and pathOffset:
function change(x, y) var calcDims; poly.set(left: 50, top: 50, points: points2); calcDim = poly._calcDimensions(); poly.width = calcDim.width; poly.height = calcDim.height; poly.pathOffset = x: calcDim.left + poly.width / 2, y: calcDim.top + poly.height / 2 ; poly.setCoords(); canvas.renderAll(); – ericmandel
7 hours ago
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55025481%2ffabric-js-adjusting-the-size-of-the-controls-of-a-modified-polygon-v1-7-22-vs%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown