解决线条断断续续的关键代码如下:
我们可以使用quadraticCurveTo来实现贝塞尔曲线使其变成光滑的曲线
注意: ctx.value.lineCap = "round";
ctx.value.lineJoin = "round"; 这两个属性是必须设置的
lastX,lastY:贝塞尔曲线的起始点;
controlPoint:贝塞尔曲线的控制点;
endPoint:贝塞尔曲线的结束点;
// 绘制贝塞尔曲线让线段看起来更加平滑
const drawLine = (controlPoint: { x: number; y: number }, endPoint: { x: number; y: number }) => {
if (!isDrawing || !ctx.value || !canvas.value) return;
ctx.value.beginPath();
if (mode == "draw") {
// 如果是绘制
ctx.value.globalCompositeOperation = "source-over";
ctx.value.lineWidth = 10;
} else {
// 如果是橡皮擦
ctx.value.globalCompositeOperation = "destination-out";
ctx.value.lineWidth = clearRadius * 2;
}
ctx.value.moveTo(lastX, lastY);
ctx.value.strokeStyle = props.color ?? "#ffffff";
ctx.value.lineCap = "round";
ctx.value.lineJoin = "round";
ctx.value.quadraticCurveTo(controlPoint.x, controlPoint.y, endPoint.x, endPoint.y);
ctx.value.stroke();
ctx.value.closePath();
};
在这段代码中我们设置了ctx.value.globalCompositeOperation = "destination-out";来使我们实现橡皮擦的效果,这个属性的意思是在源图像(您打算放置到画布上的绘图)外显示目标图像(您已经放置在画布上的绘图),只有源图像(您打算放置到画布上的绘图)外的目标图像(您已经放置在画布上的绘图)部分会被显示,源图像(您打算放置到画布上的绘图)是透明的。
globalCompositeOperation的定义和用法
globalCompositeOperation 属性设置或返回如何将一个源(新的)图像绘制到目标(已有)的图像上。其中:
- 源图像 = 您打算放置到画布上的绘图。
- 目标图像 = 您已经放置在画布上的绘图
下图显示了globalCompositeOperation的不同的值的解释: