可以使用top,left,width,height创建矩形,如下所示
var rect = new fabric.Rect({
left: 50,
top: 50,
width: 50,
height: 50,
fill: 'rgba(255,127,39,1)',
});
是否可以通过设置aCoords的左上角和右下角来创建矩形?有没有办法只用这两个点创建Rectangle?
答案 0 :(得分:1)
对于你的矩形,
width = difference between top-left x and right-bottom x,
height = difference between top-left y and right-bottom y.
<强> 样本 强>
var canvas = new fabric.Canvas('c');
function getValue(id) {
return document.getElementById(id).value
}
function r() {
return Math.floor(Math.random() * 255)
}
function getColor() {
return 'rgb(' + r() + "," + r() + "," + r() + ')';
}
function addRect() {
var tlx = getValue('tlx'),
tly = getValue('tly'),
brx = getValue('brx'),
bry = getValue('bry');
if (tlx == '' || tly == '' || brx == '' || bry == '') {
alert('Enter all values');
return false;
}
var width = Math.abs(+tlx - +brx),
height = Math.abs(+tly - +bry);
var rect = new fabric.Rect({
left: +tlx,
top: +tly,
width: width,
height: height,
fill: getColor()
});
canvas.add(rect);
}
canvas{
border: 1px solid #000;
}
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
Top-left x: <input type='number' min="0" max="300" id='tlx'><br>
Top-left y: <input type='number' min="0" max="300" id='tly'><br>
Bottom-Right x: <input type='number' min="0" max="300" id='brx'><br>
Bottom-Right x: <input type='number' min="0" max="300"id='bry'><br>
<button onclick='addRect()'>Add</button>
<canvas id="c" width="400" height="300"></canvas>