Because I need to draw pressure-sensitive line segments。 I'm using react - konva
const canvas = canvaEl;
const ctx = canvas.getContext('2d')!;
const tempCanvas = document.createElement('canvas'); // 创建临时canvas元素
tempCanvas.width = canvas.width;
tempCanvas.height = canvas.height;
const tempCtx = tempCanvas.getContext('2d')!;
for (const [_doneIdx, line] of linePost.entries()) {
tempCtx.strokeStyle = `rgba(${line.brushColor.r},${line.brushColor.g},${line.brushColor.b},${line.opacity / 100})`;
tempCtx.lineCap = 'round';
tempCtx.lineJoin = 'round';
tempCtx.globalCompositeOperation = line.drawMode;
let sizeIdx = 0;
for (let idx = 0; idx < line.points.length - 2; idx = idx + 2) {
tempCtx.beginPath();
tempCtx.moveTo(line.points[idx], line.points[idx + 1]);
tempCtx.lineWidth = line.pressure?.at(sizeIdx)! * line.brushSize;
tempCtx.lineTo(line.points[idx + 2], line.points[idx + 3]);
tempCtx.closePath();
sizeIdx++;
tempCtx.stroke();
}
}
ctx.drawImage(tempCanvas, 0, 0);
imgRef.current?.image(canvas);
The line's drawing path is recorded when the stage is moved by the mouse.
the canvas
const canvaEl = useMemo(() => {
const canvas = document.createElement('canvas')
canvas.width = layerWidth;
canvas.height = layerHeight;
return canvas;
}, [])
I don't want these points to exist.
