我尝试使用以下代码绘制自由多边形:http://jsfiddle.net/e5Xth/3/
canvas.on('mouse:move', function (options) {
if (lines[0] !== null && drawingObject.type == "roof") {
setStartingPoint(options);
lines[lineCounter - 1].set({
x2: x,
y2: y
});
canvas.renderAll();
}
});
在这个jsfiddle工作得很好,但在我的页面上使用相同的代码,这些线条并没有绘制多边形,我真的画了#34;。他们是出生的"所有左上角,但当我点击形成多边形时,它会正确绘制。
任何人都可以帮助我吗?
答案 0 :(得分:0)
问题在于鼠标按下事件,您正在设置右上角的orginx和originy。我在下面给出了更新的代码。
function mousedown(event) {
setStartingPoint(event);
var points = [x, y, x, y];
var line = new fabric.Line(points, {
left: x,
top: y,
strokeWidth: 1,
selectable: false,
stroke: '#40648E'
});
lines.push(line);
canvas.add(lines[lineCounter]);
var rect = new fabric.Rect({
left: x-2.5,
top: y-2.5,
width: 5,
height: 5,
fill: '#fff',
stroke: '#000',
strokeWidth: 2,
selectable: false
});
canvas.add(rect);
lineCounter++;
}
}
function mousemove(event) {
canvas.defaultCursor = "crosshair";
if (lines[0] !== null) {
setStartingPoint(event);
if (lines[lineCounter - 1] != null) {
lines[lineCounter - 1].set({
"x2": x,
"y2": y
});
}
canvas.renderAll();
}
}