[英]Increasing canvas height at runtime in Fabric.js affecting object selectable and drag drop in IE9
Fabric.js working for me be but when I increase height/ width of canvas run time. Fabric.js为我工作,但是当我增加画布运行时的高度/宽度时。 newly add dynamic object I am able to drag drop in old canvas area. 新添加的动态对象我可以将拖放到旧画布区域中。 but not in increased area. 但没有增加面积。
I am using canvas in div with overflow. 我在div中使用画布溢出。
If I drag new object on hidden area and I scroll down the canvas then objects are locked. 如果在隐藏区域上拖动新对象,然后向下滚动画布,则对象将被锁定。
Below is my HTML code: 以下是我的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>
My Scripts 我的剧本
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();
}
I solved this issue was in div overflow I changed HTML as below: 我解决了这个问题是在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();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.