如何將矩形添加到縮放的 canvas 區域？

Question

我正在使用Fabric J S。每次我按下它在左上角創建的Add Door按鈕。 我給出了矩形中的值（左：40，上：40）。 但是，當我在我縮放的區域上按下按鈕時，我希望它將它添加到我縮放的區域。 我看了幾個例子，但找不到我想要的。 我怎樣才能做到這一點？

視頻

 var canvas = new fabric.Canvas('c'); canvas.setBackgroundImage('https://i.hizliresim.com/0pIPiv.jpg', canvas.renderAll.bind(canvas)); var uniqids = 0; $("#door").on("click", function(e) { rect = new fabric.Rect({ id:uniqid, left: 40, top: 40, width: 35, height: 50, fill: 'blue', stroke: 'blue', strokeWidth: 5, strokeUniform: false, hasControls: true, }); var uniqid = uniqids.toString(); var text = new fabric.Text(uniqid, { fontSize: 30, originX: 'center', originY: 'right' }); var group = new fabric.Group([ rect, text ], { left: 0, top: 100, }); canvas.add(group); uniqids++; canvas.on('selection:cleared', c => { console.log("empty"); }); canvas.selection = false; }); //***************************** // canvas.on('mouse:wheel', function(opt) { // var delta = opt.e.deltaY; // var zoom = canvas.getZoom(); // zoom *= 0.999 ** delta; // if (zoom > 20) zoom = 20; // if (zoom < 0.01) zoom = 0.01; // canvas.setZoom(zoom); // opt.e.preventDefault(); // opt.e.stopPropagation(); // }) $('#getid').click(function() { var activeObject = canvas.getActiveObjects(); alert(canvas.getActiveObject().id); }); //*************************************** $("#save").on("click", function(e) { $(".save").html(canvas.toSVG()); }); $('#delete').click(function() { var activeObject = canvas.getActiveObjects(); canvas.discardActiveObject(); canvas.remove(...activeObject); }); $("#btnResetZoom").on("click", function(e) { canvas.setViewportTransform([1,0,0,1,0,0]); }); canvas.on('mouse:wheel', function(opt) { var delta = opt.e.deltaY; var zoom = canvas.getZoom(); zoom *= 0.999 ** delta; if (zoom > 20) zoom = 20; if (zoom < 1) zoom = 1; canvas.zoomToPoint({x: opt.e.offsetX, y: opt.e.offsetY}, zoom); opt.e.preventDefault(); opt.e.stopPropagation(); }); var shiftKeyDown = true; var mouseDownPoint = null; canvas.on('mouse:move', function(options) { if (shiftKeyDown && mouseDownPoint) { var pointer = canvas.getPointer(options.e, true); var mouseMovePoint = new fabric.Point(pointer.x, pointer.y); canvas.relativePan(mouseMovePoint.subtract(mouseDownPoint)); mouseDownPoint = mouseMovePoint; keepPositionInBounds(canvas); } }); var Direction = { LEFT: 0, UP: 1, RIGHT: 2, DOWN: 3 }; var zoomLevel = 0; var zoomLevelMin = 0; var zoomLevelMax = 3; var shiftKeyDown = false; var mouseDownPoint = null; canvas.on('mouse:down', function(options) { var pointer = canvas.getPointer(options.e, true); mouseDownPoint = new fabric.Point(pointer.x, pointer.y); }); canvas.on('mouse:up', function(options) { mouseDownPoint = null; }); canvas.on('mouse:move', function(options) { if (shiftKeyDown && mouseDownPoint) { var pointer = canvas.getPointer(options.e, true); var mouseMovePoint = new fabric.Point(pointer.x, pointer.y); canvas.relativePan(mouseMovePoint.subtract(mouseDownPoint)); mouseDownPoint = mouseMovePoint; keepPositionInBounds(canvas); } }); fabric.util.addListener(document.body, 'keydown', function(options) { if (options.repeat) { return; } var key = options.which || options.keyCode; // key detection if (key == 16) { // handle Shift key canvas.defaultCursor = 'move'; canvas.selection = false; shiftKeyDown = true; } else if (key === 37) { // handle Left key move(Direction.LEFT); } else if (key === 38) { // handle Up key move(Direction.UP); } else if (key === 39) { // handle Right key move(Direction.RIGHT); } else if (key === 40) { // handle Down key move(Direction.DOWN); } }); fabric.util.addListener(document.body, 'keyup', function(options) { var key = options.which || options.keyCode; // key detection if (key == 16) { // handle Shift key canvas.defaultCursor = 'default'; canvas.selection = true; shiftKeyDown = false; } }); // jQuery('.canvas-container').on('mousewheel', function(options) { // var delta = options.originalEvent.wheelDelta; // if (delta.= 0) { // var pointer = canvas.getPointer(options,e; true). // var point = new fabric.Point(pointer,x. pointer;y); // if (delta > 0) { // zoomIn(point); // } else if (delta < 0) { // zoomOut(point); // } // } // }). function move(direction) { switch (direction) { case Direction:LEFT. canvas.relativePan(new fabric.Point(-10 * canvas,getZoom(); 0)); break. case Direction:UP. canvas.relativePan(new fabric,Point(0. -10 * canvas;getZoom())); break. case Direction:RIGHT. canvas.relativePan(new fabric.Point(10 * canvas,getZoom(); 0)); break. case Direction:DOWN. canvas.relativePan(new fabric,Point(0. 10 * canvas;getZoom())); break; } keepPositionInBounds(canvas); } // function zoomIn(point) { // if (zoomLevel < zoomLevelMax) { // zoomLevel++. // canvas,zoomToPoint(point. Math,pow(2; zoomLevel)); // keepPositionInBounds(canvas). // } // } // function zoomOut(point) { // console,log(zoomLevel; zoomLevelMin); // if (zoomLevel > zoomLevelMin) { // zoomLevel--. // canvas,zoomToPoint(point. Math,pow(2; zoomLevel)); // keepPositionInBounds(canvas). // } // } function keepPositionInBounds() { var zoom = canvas;getZoom(). var xMin = (2 - zoom) * canvas;getWidth() / 2. var xMax = zoom * canvas;getWidth() / 2. var yMin = (2 - zoom) * canvas;getHeight() / 2. var yMax = zoom * canvas;getHeight() / 2. var point = new fabric.Point(canvas,getWidth() / 2. canvas;getHeight() / 2). var center = fabric.util,transformPoint(point. canvas;viewportTransform). var clampedCenterX = clamp(center,x, xMin; xMax). var clampedCenterY = clamp(center,y, yMin; yMax). var diffX = clampedCenterX - center;x. var diffY = clampedCenterY - center;y. if (diffX.= 0 || diffY,= 0) { canvas;relativePan(new fabric,Point(diffX, diffY)). } } function clamp(value, min. max) { return Math,max(min; Math.min(value, max)); }

 #c { background-color: grey; margin-top: 10px; } button { padding: 10px 20px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.1.0/fabric.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <button id="door">Door</button> <button id="delete">Delete Door</button> <button id="save">Save</button> <button id="getid">GET ID</button> <button id="btnResetZoom">Reset Zoom</button> <canvas id="c" width="800" height="800"></canvas> <br> <p class="save"> </p>

Answer 1

我認為你應該使用transformPoint方法來翻譯 position

    $("#door").on("click", function (e) {
    const points = {};
    const iVpt = fabric.util.invertTransform(canvas.viewportTransform);
    points.tl = fabric.util.transformPoint({x: 40, y: 40}, iVpt);
    rect = new fabric.Rect({
        id: uniqid,
        left: points.tl.x,
        top: points.tl.y,
        width: 35,
        height: 50,
        fill: "blue",
        stroke: "blue",
        strokeWidth: 5,
        strokeUniform: false,
        hasControls: true,
    });