在fabric.js中,我们可以绘制自由手路径(例如:http://fabricjs.com/freedrawing)。然而,在HTML canvas 2d-context ctx中,我也可以绘制一条路径,然后调用ctx.fill()来填充路径并将其转换为填充形状。示例代码:每当鼠标抬起时,路径就被填充。
function draw() {
ctx.lineCap = "round";
ctx.globalAlpha = 1;
var x = null;
var y = null;
canvas.onmousedown = function (e) {
// begin a new path
ctx.beginPath();
// move to mouse cursor coordinates
var rect = canvas.getBoundingClientRect();
x = e.clientX - rect.left;
y = e.clientY - rect.top;
ctx.moveTo(x, y);
// draw a dot
ctx.lineTo(x+0.4, y+0.4);
ctx.stroke();
};
canvas.onmouseup = function (e) {
x = null;
y = null;
ctx.fill();
};
canvas.onmousemove = function (e) {
if (x === null || y === null) {
return;
}
var rect = canvas.getBoundingClientRect();
x = e.clientX - rect.left;
y = e.clientY - rect.top;
ctx.lineTo(x, y);
ctx.stroke();
ctx.moveTo(x, y);
}
是否有类似的行为也可以在fabricjs中实现?
fabricjs似乎只保存路径,而不是填充区域。
谢谢, Peter