Question

Fabric.js为我工作但是当我增加画布运行时间的高度/宽度时。新添加动态对象我可以拖放旧画布区域。但不是增加的面积。

我在div中使用canvas溢出。

如果我在隐藏区域上拖动新对象并向下滚动画布，则对象将被锁定。

以下是我的HTML代码：

<input id="Button1" type="button" value="Circle" onclick="addcricle();" /><input
        id="Button2" type="button" value="square" onclick="addsquare();" />   
<button id="Button12" onclick="changeMyHight();">Change Work Area</button>
   <div style="width: 900px; height: 800px; overflow: scroll">
    <canvas id="canvas" width="800" height="700px" style="border: 1px solid #000000"></canvas>
</div>

我的脚本

 var copiedObject;
    var copiedObjects = new Array();
    var canvasScale = 1;
    var SCALE_FACTOR = 1.2;
    var canvas = new fabric.Canvas('canvas');



    canvas.selectionColor = 'rgba(0,255,0,0.3)';
    canvas.selectionBorderColor = 'red';
    canvas.selectionLineWidth = 5;
    function addcricle() {
        canvas.add(new fabric.Circle({ radius: 30, fill: '#f55', top: 100, left: 100 }));
        canvas.calcOffset();
    }
    function addsquare() {
        canvas.add(new fabric.Rect({ width: 50, height: 50, fill: '#77f', top: 75, left: 75 }));
        canvas.calcOffset();
    }

function changeMyHight() {
    canvas.setHeight(1500);
    canvas.setWidth(1800);
    canvas.renderAll();
    canvas.calcOffset();
}

Answer 1

我解决了这个问题是在div溢出我改变了HTML如下：

<div style="width: 900px; height: 800px; overflow: scroll" onscroll="setMyOffset();">
  <canvas id="canvas" width="800" height="700px" style="border: 1px solid #000000"></canvas>
</div> 

function setMyOffset() {
  canvas.calcOffset();
}

在Fabric.js中运行时增加画布高度影响对象可选择并在IE9中拖放

1 个答案: