End Zoom-In Clever Geek Handbook Help Zoom? I wrote some code. Combines the click point across the screen. Html <button id="end">End</button> <button id="zoomIn">Zoom-In</button> <button id="zoomOut">Zoom-Out</button> <canvas id="c" width="500" height="500" ></canvas> JavaScript var canvas = new fabric.Canvas('c'); var point1; var line=null; var canvasScale = 1; var SCALE_FACTOR = 1.2; var bool = true; canvas.on('mouse:down', function (options) { var x = options.e.clientX - canvas._offset.left; var y = options.e.clientY - canvas._offset.top; var circle = new fabric.Circle({ left: x, top: y, fill: 'red', originX: 'center', originY: 'center', hasControls: false, hasBorders: false, lockMovementX: false, lockMovementY: false, radius: 5, hoverCursor: 'default' }); if(bool) canvas.add(circle); point1 = new fabric.Point(x, y); if(line){ line = new fabric.Line([line.get('x2'), line.get('y2'), x, y], { stroke: 'black', hasControls: false, hasBorders: false, lockMovementX: false, lockMovementY: false, hoverCursor: 'default' }); }else{ line = new fabric.Line([x, y, x, y], { stroke: 'black', hasControls: false, hasBorders: false, lockMovementX: false, lockMovementY: false, hoverCursor: 'default' }); } if(bool) canvas.add(line); $("#end").click(function(){ var lines = canvas.getObjects('line'); var firstLine = lines[1]; var lastLine = lines[lines.length - 1]; line = new fabric.Line([firstLine.get('x2'), firstLine.get('y2'), lastLine.get('x2'), lastLine.get('y2')], { stroke: 'red', hasControls: false, hasBorders: false, lockMovementX: false, lockMovementY: false, hoverCursor: 'default' }); canvas.add(line); bool = false; }); }); $("#zoomIn").click(function() { canvasScale = canvasScale * SCALE_FACTOR; canvas.setHeight(canvas.getHeight() * SCALE_FACTOR); canvas.setWidth(canvas.getWidth() * SCALE_FACTOR); var objects = canvas.getObjects(); for (var i in objects) { var scaleX = objects[i].scaleX; var scaleY = objects[i].scaleY; var left = objects[i].left; var top = objects[i].top; var tempScaleX = scaleX * SCALE_FACTOR; var tempScaleY = scaleY * SCALE_FACTOR; var tempLeft = left * SCALE_FACTOR; var tempTop = top * SCALE_FACTOR; objects[i].scaleX = tempScaleX; objects[i].scaleY = tempScaleY; objects[i].left = tempLeft; objects[i].top = tempTop; objects[i].setCoords(); } canvas.renderAll(); }); $("#zoomOut").click(function() { canvasScale = canvasScale / SCALE_FACTOR; canvas.setHeight(canvas.getHeight() * (1 / SCALE_FACTOR)); canvas.setWidth(canvas.getWidth() * (1 / SCALE_FACTOR)); var objects = canvas.getObjects(); for (var i in objects) { var scaleX = objects[i].scaleX; var scaleY = objects[i].scaleY; var left = objects[i].left; var top = objects[i].top; var tempScaleX = scaleX * (1 / SCALE_FACTOR); var tempScaleY = scaleY * (1 / SCALE_FACTOR); var tempLeft = left * (1 / SCALE_FACTOR); var tempTop = top * (1 / SCALE_FACTOR); objects[i].scaleX = tempScaleX; objects[i].scaleY = tempScaleY; objects[i].left = tempLeft; objects[i].top = tempTop; objects[i].setCoords(); } canvas.renderAll(); }); But there are constant points here. I want to be like this: Html <canvas id="c" width="500" height="500" ></canvas> JavaScript (function() { var canvas = this.__canvas = new fabric.Canvas('c', { selection: false }); fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center'; function makeCircle(left, top, line1, line2, line3, line4) { var c = new fabric.Circle({ left: left, top: top, strokeWidth: 5, radius: 12, fill: '#fff', stroke: '#666' }); c.hasControls = c.hasBorders = false; c.line1 = line1; c.line2 = line2; c.line3 = line3; c.line4 = line4; return c; } function makeLine(coords) { return new fabric.Line(coords, { fill: 'red', stroke: 'red', strokeWidth: 5, selectable: false }); } var line = makeLine([ 250, 125, 250, 175 ]), line2 = makeLine([ 250, 175, 250, 250 ]), line3 = makeLine([ 250, 250, 300, 350]), line4 = makeLine([ 250, 250, 200, 350]), line5 = makeLine([ 250, 175, 175, 225 ]), line6 = makeLine([ 250, 175, 325, 225 ]); canvas.add(line, line2, line3, line4, line5, line6); canvas.add( makeCircle(line.get('x1'), line.get('y1'), null, line), makeCircle(line.get('x2'), line.get('y2'), line, line2, line5, line6), makeCircle(line2.get('x2'), line2.get('y2'), line2, line3, line4), makeCircle(line3.get('x2'), line3.get('y2'), line3), makeCircle(line4.get('x2'), line4.get('y2'), line4), makeCircle(line5.get('x2'), line5.get('y2'), line5), makeCircle(line6.get('x2'), line6.get('y2'), line6) ); canvas.on('object:moving', function(e) { var p = e.target; p.line1 && p.line1.set({ 'x2': p.left, 'y2': p.top }); p.line2 && p.line2.set({ 'x1': p.left, 'y1': p.top }); p.line3 && p.line3.set({ 'x1': p.left, 'y1': p.top }); p.line4 && p.line4.set({ 'x1': p.left, 'y1': p.top }); canvas.renderAll(); }); })(); The point for which I have to move can add points. So, I add that dots must act in conjunction with strings. How can I integrate it over the code? JsFiddle zoom issue Example If zoomIn or zoomOut becomes, my line is added damaged +3 javascript jquery combinations jsfiddle fabricjs alperenAsa 06 jul. 15 at 14:15 source to share 2 answers You need to adjust the coordinates of the saved row when you zoom in. When scaling if (line) { line.x2 = line.x2 * SCALE_FACTOR; line.y2 = line.y2 * SCALE_FACTOR; } When scaling if (line) { line.x2 = line.x2 / SCALE_FACTOR; line.y2 = line.y2 / SCALE_FACTOR; } Fiddle - https://jsfiddle.net/65c3dxvv/ +3 potatopeelings 07 jul. 15 at 13:48 source to share Solution of this project ---> <button id="end">End</button> <button id="zoomIn">Zoom-In</button> <button id="zoomOut">Zoom-Out</button> <canvas id="c" width="1800" height="910" ></canvas> var canvas = new fabric.Canvas('c'); var point1; var line=null; var canvasScale = 1; var SCALE_FACTOR = 1.2; var bool = true; canvas.on('mouse:down', function (options) { var x = options.e.clientX - canvas._offset.left; var y = options.e.clientY - canvas._offset.top; var circle = new fabric.Circle({ left: x, top: y, fill: 'red', originX: 'center', originY: 'center', hasControls: false, hasBorders: false, lockMovementX: false, lockMovementY: false, radius: 5, hoverCursor: 'default' }); if(bool) { circle.line1 = null; circle.line2 = null; canvas.add(circle); } point1 = new fabric.Point(x, y); if(line){ line = new fabric.Line([line.get('x2'), line.get('y2'), x, y], { fill: 'grey', stroke: 'grey', hasControls: false, hasBorders: false, lockMovementX: true, lockMovementY: true, selectable: false, hoverCursor: 'default' }); }else{ line = new fabric.Line([x, y, x, y], { fill: 'grey', stroke: 'grey', hasControls: false, hasBorders: false, lockMovementX: true, lockMovementY: true, selectable: false, hoverCursor: 'default' }); } if(bool) canvas.add(line); }); $("#end").click(function(){ var lines = canvas.getObjects('line'); var firstLine = lines[1]; var lastLine = lines[lines.length - 1]; line = new fabric.Line([lastLine.get('x2'), lastLine.get('y2'),firstLine.get('x1'), firstLine.get('y1')], { fill: 'grey', stroke: 'grey', hasControls: false, hasBorders: false, lockMovementX: false, lockMovementY: false, selectable: false, hoverCursor: 'default' }); canvas.add(line); var lines = canvas.getObjects('line'); var circles = canvas.getObjects('circle'); for(i = 1; i < circles.length - 1; i++) { for(j = 0; j < lines.length; j++) { if(circles[i].getLeft() == lines[j].get('x1') && circles[i].getTop() == lines[j].get('y1')) { circles[i].line2 = lines[j]; circles[i].line1 = lines[j - 1]; } } } circles[0].line1 = lines[lines.length - 1]; circles[0].line2 = lines[1]; circles[circles.length - 1].line2 = lines[lines.length - 1]; circles[circles.length - 1].line1 = lines[0]; bool = false; }); $("#zoomIn").click(function() { canvasScale = canvasScale * SCALE_FACTOR; canvas.setHeight(canvas.getHeight() * SCALE_FACTOR); canvas.setWidth(canvas.getWidth() * SCALE_FACTOR); var circles = canvas.getObjects('circle'); for (var i in circles) { var scaleX = circles[i].scaleX; var scaleY = circles[i].scaleY; var left = circles[i].left; var top = circles[i].top; circles[i].scaleX = scaleX * SCALE_FACTOR; circles[i].scaleY = scaleY * SCALE_FACTOR; circles[i].left = left * SCALE_FACTOR; circles[i].top = top * SCALE_FACTOR; circles[i].setCoords(); var coord = circles[i].getCenterPoint(); circles[i].line1.set({ 'x2': coord.x, 'y2': coord.y }); circles[i].line2.set({ 'x1': coord.x, 'y1': coord.y }); } canvas.renderAll(); canvas.calcOffset(); }); $("#zoomOut").click(function() { canvasScale = canvasScale / SCALE_FACTOR; canvas.setHeight(canvas.getHeight() * (1 / SCALE_FACTOR)); canvas.setWidth(canvas.getWidth() * (1 / SCALE_FACTOR)); var circles = canvas.getObjects('circle'); for (var i in circles) { var scaleX = circles[i].scaleX; var scaleY = circles[i].scaleY; var left = circles[i].left; var top = circles[i].top; circles[i].scaleX = scaleX * (1 / SCALE_FACTOR); circles[i].scaleY = scaleY * (1 / SCALE_FACTOR); circles[i].left = left * (1 / SCALE_FACTOR); circles[i].top = top * (1 / SCALE_FACTOR); circles[i].setCoords(); var coord = circles[i].getCenterPoint(); circles[i].line1.set({ 'x2': coord.x, 'y2': coord.y }); circles[i].line2.set({ 'x1': coord.x, 'y1': coord.y }); } canvas.renderAll(); canvas.calcOffset(); }); canvas.on('object:moving', function(e) { var p = e.target; var coord = p.getCenterPoint(); p.line1.set({ 'x2': coord.x, 'y2': coord.y }); p.line2.set({ 'x1': coord.x, 'y1': coord.y }); canvas.renderAll(); }); +1 alperenAsa 08 jul. 15 at 7:20 am source to share More articles: Removed postRemoved postRemoved postRemoved postRemoved postRemoved postRemoved postRemoved postRemoved postRemoved post All Articles
I wrote some code. Combines the click point across the screen.
<button id="end">End</button> <button id="zoomIn">Zoom-In</button> <button id="zoomOut">Zoom-Out</button> <canvas id="c" width="500" height="500" ></canvas>
var canvas = new fabric.Canvas('c'); var point1; var line=null; var canvasScale = 1; var SCALE_FACTOR = 1.2; var bool = true; canvas.on('mouse:down', function (options) { var x = options.e.clientX - canvas._offset.left; var y = options.e.clientY - canvas._offset.top; var circle = new fabric.Circle({ left: x, top: y, fill: 'red', originX: 'center', originY: 'center', hasControls: false, hasBorders: false, lockMovementX: false, lockMovementY: false, radius: 5, hoverCursor: 'default' }); if(bool) canvas.add(circle); point1 = new fabric.Point(x, y); if(line){ line = new fabric.Line([line.get('x2'), line.get('y2'), x, y], { stroke: 'black', hasControls: false, hasBorders: false, lockMovementX: false, lockMovementY: false, hoverCursor: 'default' }); }else{ line = new fabric.Line([x, y, x, y], { stroke: 'black', hasControls: false, hasBorders: false, lockMovementX: false, lockMovementY: false, hoverCursor: 'default' }); } if(bool) canvas.add(line); $("#end").click(function(){ var lines = canvas.getObjects('line'); var firstLine = lines[1]; var lastLine = lines[lines.length - 1]; line = new fabric.Line([firstLine.get('x2'), firstLine.get('y2'), lastLine.get('x2'), lastLine.get('y2')], { stroke: 'red', hasControls: false, hasBorders: false, lockMovementX: false, lockMovementY: false, hoverCursor: 'default' }); canvas.add(line); bool = false; }); }); $("#zoomIn").click(function() { canvasScale = canvasScale * SCALE_FACTOR; canvas.setHeight(canvas.getHeight() * SCALE_FACTOR); canvas.setWidth(canvas.getWidth() * SCALE_FACTOR); var objects = canvas.getObjects(); for (var i in objects) { var scaleX = objects[i].scaleX; var scaleY = objects[i].scaleY; var left = objects[i].left; var top = objects[i].top; var tempScaleX = scaleX * SCALE_FACTOR; var tempScaleY = scaleY * SCALE_FACTOR; var tempLeft = left * SCALE_FACTOR; var tempTop = top * SCALE_FACTOR; objects[i].scaleX = tempScaleX; objects[i].scaleY = tempScaleY; objects[i].left = tempLeft; objects[i].top = tempTop; objects[i].setCoords(); } canvas.renderAll(); }); $("#zoomOut").click(function() { canvasScale = canvasScale / SCALE_FACTOR; canvas.setHeight(canvas.getHeight() * (1 / SCALE_FACTOR)); canvas.setWidth(canvas.getWidth() * (1 / SCALE_FACTOR)); var objects = canvas.getObjects(); for (var i in objects) { var scaleX = objects[i].scaleX; var scaleY = objects[i].scaleY; var left = objects[i].left; var top = objects[i].top; var tempScaleX = scaleX * (1 / SCALE_FACTOR); var tempScaleY = scaleY * (1 / SCALE_FACTOR); var tempLeft = left * (1 / SCALE_FACTOR); var tempTop = top * (1 / SCALE_FACTOR); objects[i].scaleX = tempScaleX; objects[i].scaleY = tempScaleY; objects[i].left = tempLeft; objects[i].top = tempTop; objects[i].setCoords(); } canvas.renderAll(); });
But there are constant points here.
I want to be like this:
<canvas id="c" width="500" height="500" ></canvas>
(function() { var canvas = this.__canvas = new fabric.Canvas('c', { selection: false }); fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center'; function makeCircle(left, top, line1, line2, line3, line4) { var c = new fabric.Circle({ left: left, top: top, strokeWidth: 5, radius: 12, fill: '#fff', stroke: '#666' }); c.hasControls = c.hasBorders = false; c.line1 = line1; c.line2 = line2; c.line3 = line3; c.line4 = line4; return c; } function makeLine(coords) { return new fabric.Line(coords, { fill: 'red', stroke: 'red', strokeWidth: 5, selectable: false }); } var line = makeLine([ 250, 125, 250, 175 ]), line2 = makeLine([ 250, 175, 250, 250 ]), line3 = makeLine([ 250, 250, 300, 350]), line4 = makeLine([ 250, 250, 200, 350]), line5 = makeLine([ 250, 175, 175, 225 ]), line6 = makeLine([ 250, 175, 325, 225 ]); canvas.add(line, line2, line3, line4, line5, line6); canvas.add( makeCircle(line.get('x1'), line.get('y1'), null, line), makeCircle(line.get('x2'), line.get('y2'), line, line2, line5, line6), makeCircle(line2.get('x2'), line2.get('y2'), line2, line3, line4), makeCircle(line3.get('x2'), line3.get('y2'), line3), makeCircle(line4.get('x2'), line4.get('y2'), line4), makeCircle(line5.get('x2'), line5.get('y2'), line5), makeCircle(line6.get('x2'), line6.get('y2'), line6) ); canvas.on('object:moving', function(e) { var p = e.target; p.line1 && p.line1.set({ 'x2': p.left, 'y2': p.top }); p.line2 && p.line2.set({ 'x1': p.left, 'y1': p.top }); p.line3 && p.line3.set({ 'x1': p.left, 'y1': p.top }); p.line4 && p.line4.set({ 'x1': p.left, 'y1': p.top }); canvas.renderAll(); }); })();
The point for which I have to move can add points. So, I add that dots must act in conjunction with strings.
How can I integrate it over the code?
JsFiddle zoom issue Example If zoomIn or zoomOut becomes, my line is added damaged
You need to adjust the coordinates of the saved row when you zoom in.
When scaling
if (line) { line.x2 = line.x2 * SCALE_FACTOR; line.y2 = line.y2 * SCALE_FACTOR; }
if (line) { line.x2 = line.x2 / SCALE_FACTOR; line.y2 = line.y2 / SCALE_FACTOR; }
Fiddle - https://jsfiddle.net/65c3dxvv/
Solution of this project --->
<button id="end">End</button> <button id="zoomIn">Zoom-In</button> <button id="zoomOut">Zoom-Out</button> <canvas id="c" width="1800" height="910" ></canvas> var canvas = new fabric.Canvas('c'); var point1; var line=null; var canvasScale = 1; var SCALE_FACTOR = 1.2; var bool = true; canvas.on('mouse:down', function (options) { var x = options.e.clientX - canvas._offset.left; var y = options.e.clientY - canvas._offset.top; var circle = new fabric.Circle({ left: x, top: y, fill: 'red', originX: 'center', originY: 'center', hasControls: false, hasBorders: false, lockMovementX: false, lockMovementY: false, radius: 5, hoverCursor: 'default' }); if(bool) { circle.line1 = null; circle.line2 = null; canvas.add(circle); } point1 = new fabric.Point(x, y); if(line){ line = new fabric.Line([line.get('x2'), line.get('y2'), x, y], { fill: 'grey', stroke: 'grey', hasControls: false, hasBorders: false, lockMovementX: true, lockMovementY: true, selectable: false, hoverCursor: 'default' }); }else{ line = new fabric.Line([x, y, x, y], { fill: 'grey', stroke: 'grey', hasControls: false, hasBorders: false, lockMovementX: true, lockMovementY: true, selectable: false, hoverCursor: 'default' }); } if(bool) canvas.add(line); }); $("#end").click(function(){ var lines = canvas.getObjects('line'); var firstLine = lines[1]; var lastLine = lines[lines.length - 1]; line = new fabric.Line([lastLine.get('x2'), lastLine.get('y2'),firstLine.get('x1'), firstLine.get('y1')], { fill: 'grey', stroke: 'grey', hasControls: false, hasBorders: false, lockMovementX: false, lockMovementY: false, selectable: false, hoverCursor: 'default' }); canvas.add(line); var lines = canvas.getObjects('line'); var circles = canvas.getObjects('circle'); for(i = 1; i < circles.length - 1; i++) { for(j = 0; j < lines.length; j++) { if(circles[i].getLeft() == lines[j].get('x1') && circles[i].getTop() == lines[j].get('y1')) { circles[i].line2 = lines[j]; circles[i].line1 = lines[j - 1]; } } } circles[0].line1 = lines[lines.length - 1]; circles[0].line2 = lines[1]; circles[circles.length - 1].line2 = lines[lines.length - 1]; circles[circles.length - 1].line1 = lines[0]; bool = false; }); $("#zoomIn").click(function() { canvasScale = canvasScale * SCALE_FACTOR; canvas.setHeight(canvas.getHeight() * SCALE_FACTOR); canvas.setWidth(canvas.getWidth() * SCALE_FACTOR); var circles = canvas.getObjects('circle'); for (var i in circles) { var scaleX = circles[i].scaleX; var scaleY = circles[i].scaleY; var left = circles[i].left; var top = circles[i].top; circles[i].scaleX = scaleX * SCALE_FACTOR; circles[i].scaleY = scaleY * SCALE_FACTOR; circles[i].left = left * SCALE_FACTOR; circles[i].top = top * SCALE_FACTOR; circles[i].setCoords(); var coord = circles[i].getCenterPoint(); circles[i].line1.set({ 'x2': coord.x, 'y2': coord.y }); circles[i].line2.set({ 'x1': coord.x, 'y1': coord.y }); } canvas.renderAll(); canvas.calcOffset(); }); $("#zoomOut").click(function() { canvasScale = canvasScale / SCALE_FACTOR; canvas.setHeight(canvas.getHeight() * (1 / SCALE_FACTOR)); canvas.setWidth(canvas.getWidth() * (1 / SCALE_FACTOR)); var circles = canvas.getObjects('circle'); for (var i in circles) { var scaleX = circles[i].scaleX; var scaleY = circles[i].scaleY; var left = circles[i].left; var top = circles[i].top; circles[i].scaleX = scaleX * (1 / SCALE_FACTOR); circles[i].scaleY = scaleY * (1 / SCALE_FACTOR); circles[i].left = left * (1 / SCALE_FACTOR); circles[i].top = top * (1 / SCALE_FACTOR); circles[i].setCoords(); var coord = circles[i].getCenterPoint(); circles[i].line1.set({ 'x2': coord.x, 'y2': coord.y }); circles[i].line2.set({ 'x1': coord.x, 'y1': coord.y }); } canvas.renderAll(); canvas.calcOffset(); }); canvas.on('object:moving', function(e) { var p = e.target; var coord = p.getCenterPoint(); p.line1.set({ 'x2': coord.x, 'y2': coord.y }); p.line2.set({ 'x1': coord.x, 'y1': coord.y }); canvas.renderAll(); });