我正在编写一个程序，可以使用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); }
添加回答
举报
0/150
提交
取消