在fabric.js中，我们可以徒手绘制路径（例如http://fabricjs.com/freedrawing 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似乎只保存路径，不保存填充区域。
谢谢，
彼得
在织物中绘图会生成一堆路径对象，您可以像大多数其他织物对象一样向它们添加填充。下面是一个示例脚本，它将在鼠标松开时自动将每个创建的对象设置为蓝色背景：
var canvas = new fabric.Canvas('c', {
isDrawingMode: true
});
canvas.on('mouse:up', function() {
canvas.getObjects().forEach(o => {
o.fill = 'blue'
});
canvas.renderAll();
})
canvas {
border: 1px solid #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.3/fabric.js"></script>
<canvas id="c" width="600" height="600"></canvas>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
