请帮我解决这个问题。
预期:
用户可以通过点击文本(在新位置)来选择文本对象(“hello world”)。
实数:
第一次,用户不能点击文本对象。和目标边界仍然在旧的位置(左: 10,顶部: 10 )。(见附图)
请签入我的演示代码。
我正在使用FabricjsVersion2.4.0这个演示
如何通过这个问题?
谢谢!
var canvasObject = document.getElementById("editorCanvas");
// set canvas equal size with div
$(canvasObject).width($("#canvasContainer").width());
$(canvasObject).height($("#canvasContainer").height());
canvas = new fabric.Canvas('editorCanvas', {
backgroundColor: 'white',
selectionLineWidth: 2,
width: $("#canvasContainer").width(),
height: $("#canvasContainer").height()
});
canvas.controlsAboveOverlay = true;
// Add a text to canvas
var text = new fabric.Text('hello world', { left: 10, top: 10 });
canvas.add(text);
// Transform View
canvas.viewportTransform[4] = 100;
canvas.viewportTransform[5] = 100;
canvas.requestRenderAll();
#canvasContainer {
width: 100%;
height: 100vh;
background-color: gray;
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.0/fabric.js"></script>
<div id="canvasContainer">
<canvas id="editorCanvas"></canvas>
</div>
发布于 2018-10-06 00:49:10
调用object.setCoords(),它将在更改后设置包围角。并检查什么时候打电话
演示
var canvasObject = document.getElementById("editorCanvas");
// set canvas equal size with div
$(canvasObject).width($("#canvasContainer").width());
$(canvasObject).height($("#canvasContainer").height());
canvas = new fabric.Canvas('editorCanvas', {
backgroundColor: 'white',
selectionLineWidth: 2,
width: $("#canvasContainer").width(),
height: $("#canvasContainer").height()
});
canvas.controlsAboveOverlay = true;
// Add a text to canvas
var text = new fabric.Text('hello world', {
left: 10,
top: 10
});
canvas.add(text);
// Transform View
canvas.viewportTransform[4] = 100;
canvas.viewportTransform[5] = 100;
setObjectCoords();
canvas.requestRenderAll();
function setObjectCoords(){
canvas.forEachObject(function(object){
object.setCoords();
})
}
#canvasContainer {
width: 100%;
height: 100vh;
background-color: gray;
}
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.0/fabric.js"></script>
<div id="canvasContainer">
<canvas id="editorCanvas"></canvas>
</div>
发布于 2021-09-02 00:08:09
不确定这是否仍然是一个问题,但您可以执行以下操作:
let vpt = [...canvas.viewportTransform];
vpt[4] = 100;
vpt[5] = 100;
canvas.setViewportTransform(vpt);
也解决了同样的问题。
https://stackoverflow.com/questions/52677002
复制