Why are there small black dots on the lines I draw?

25 Views Asked by At

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;
    }, [])

enter image description here

I don't want these points to exist.

0

There are 0 best solutions below