我正在编写一个程序，可以使用fabric.js实时修改矩形（取决于用户键盘输入的内容）。
我做这件事的时间很糟。
我正在尝试获取输入id=width和输入id=height，以便能够编辑rect.width，并且rect.height和PREFERABLY可以在执行此操作时更改矩形的形状。
我在下面包含了我的代码，document.getElementById('height').value;因为所有这些尝试都是绝对无用的，所以我删除了所有尝试 ，当我包含它们时，它破坏了整个脚本（我认为这对于jsfiddle来说不是很有用）。
我想我有点头疼。
任何帮助将非常感激。
https://jsfiddle.net/x7kmw6h8/4/
的HTML
<body>
<input id="width" type="number" value="100"> <br>
<input id="height" type="number" value="100"> <br>
</body>
<canvas id="canvas" width="800" height="800"></canvas>
Java脚本
var canvas = new fabric.Canvas('canvas');
var grid = 20;
for (var i = 0; i < (800 / grid); i++) {
canvas.add(new fabric.Line([ i * grid, 0, i * grid, 800],
{strokeDashArray: [3, 17], strokeWidth : 3, stroke: 'black', selectable: false }));
canvas.add(new fabric.Line([ 0, i * grid, 800, i * grid],
{strokeDashArray: [3, 17], strokeWidth :3, stroke: 'black', selectable: false }))
}
var rect = new fabric.Rect({
top : 50,
left : 50,
width : 100,
height : 100,
fill : 'red',
hasControls : false
});
canvas.add(rect);
canvas.on('object:moving', function(options) {
options.target.set({
left: Math.round(options.target.left / grid) *
grid,
top: Math.round(options.target.top / grid) * grid
});
});
canvas.on('object:moving', function (e) {
var obj = e.target;
// if object is too big ignore
if(obj.currentHeight > obj.canvas.height || obj.currentWidth
> obj.canvas.width){
return;
}
obj.setCoords();
// top-left corner
if(obj.getBoundingRect().top < 0 ||
obj.getBoundingRect().left < 0){
obj.top = Math.max(obj.top, obj.top-
obj.getBoundingRect().top);
obj.left = Math.max(obj.left, obj.left-
obj.getBoundingRect().left);
}
相关分类