There are some transparent points in lines drawed by quadraticCurveTo

[pixijs]

There are some transparent points in lines drawed by quadraticCurveTo

[dev7355608]

Fixed by dba5d58 (v0.0.21).

@ivanpopelyshev I assume the abs(D) < 0.01 branch was added for performance reasons. The 0.01 threshold was too high; in consequence line segments didn't properly connect if the angle is tiny. I simply changed it to D == 0.0, instead of lowering the threshold, which would need to depend on shift + dy. So now those artifacts should be impossible under any circumstances. Because D is very rarely 0, we could remove this branch entirely, or, if it's important for performance, try to find a better threshold.

Example image that shows the transparent pixels:

[ivanpopelyshev]

Yep, something like that. need better eps maybe

[daigocy]

Problem become more serious

[daigocy]

Fixed by dba5d58 (v0.0.21).

@ivanpopelyshev I assume the abs(D) < 0.01 branch was added for performance reasons. The 0.01 threshold was too high; in consequence line segments didn't properly connect if the angle is tiny. I simply changed it to D == 0.0, instead of lowering the threshold, which would need to depend on shift + dy. So now those artifacts should be impossible under any circumstances. Because D is very rarely 0, we could remove this branch entirely, or, if it's important for performance, try to find a better threshold.

Example image that shows the transparent pixels:

[dev7355608]

@daigocy Could you share the code that produces these artifacts? I haven't see those in my tests.

[daigocy]

@daigocy Could you share the code that produces these artifacts? I haven't see those in my tests.

I get points from mousemove event and calculate path from points.

_update_points(points: number[]) {
        const path: number[] = [];
        const lastPoint = {
            x: 0,
            y: 0,
        };
        for (let i = 0; i < points.length; i += 2) {
            path.push(lastPoint.x, lastPoint.y, (lastPoint.x + points[i]) / 2, (lastPoint.y + points[i + 1]) / 2);
            lastPoint.x = points[i];
            lastPoint.y = points[i + 1];
        }
        this.points = points;
        this.path = path;
        this.updateBorderRect(points);
    }

then use path to draw lines drawed by quadraticCurveTo.

function drawLine(ins: Graphics, props: LineProps) {
    const { lineWidth: width, color, path, notEnded } = props;
    ins.clear();
    if (path.length) {
        for (let i = 0; i < path.length; i += 4) {
            ins.lineStyle({
                width,
                color,
                cap: PIXI.LINE_CAP.ROUND,
                join: PIXI.LINE_JOIN.ROUND,
            });
            ins.moveTo(path[i - 2] || 0, path[i - 1] || 0);
            ins.quadraticCurveTo(path[i], path[i + 1], path[i + 2], path[i + 3]);
        }
    } else if (!notEnded) {
        ins.moveTo(0, 0);
        ins.beginFill(color);
        ins.drawCircle(0, 0, width / 2);
        ins.endFill();
    }
}

[daigocy]

@daigocy Could you share the code that produces these artifacts? I haven't see those in my tests.

I see your code in dba5d58 and resume the changes in line 252 and line 309 then it works better. But I don't known the reason.

[dev7355608]

@daigocy Could you provide any path array that has these artifacts as well please.

[daigocy]

@daigocy Could you provide any path array that has these artifacts as well please.

const lineWidth = 10;
const points = [8, 0, 28, 2, 63, 11, 94, 18, 126, 28, 146, 38, 161, 47, 170, 56, 174, 68, 174, 80, 174, 92, 170, 100, 152, 113, 134, 117, 105, 123, 77, 124, 56, 127, 36, 130, 24, 132, 19, 132, 17, 133, 16, 133, 16, 133]
const path = [0, 0, 4, 0, 8, 0, 18, 1, 28, 2, 45.5, 6.5, 63, 11, 78.5, 14.5, 94, 18, 110, 23, 126, 28, 136, 33, 146, 38, 153.5, 42.5, 161, 47, 165.5, 51.5, 170, 56, 172, 62, 174, 68, 174, 74, 174, 80, 174, 86, 174, 92, 172, 96, 170, 100, 161, 106.5, 152, 113, 143, 115, 134, 117, 119.5, 120, 105, 123, 91, 123.5, 77, 124, 66.5, 125.5, 56, 127, 46, 128.5, 36, 130, 30, 131, 24, 132, 21.5, 132, 19, 132, 18, 132.5, 17, 133, 16.5, 133, 16, 133, 16, 133]

[dev7355608]

Looks good to me. How does it look on your machine?

function drawLine(ins, props) {
    const { lineWidth: width, color, path, notEnded } = props;
    ins.clear();
    if (path.length) {
        for (let i = 0; i < path.length; i += 4) {
            ins.lineStyle({
                width,
                color,
                cap: PIXI.LINE_CAP.ROUND,
                join: PIXI.LINE_JOIN.ROUND,
            });
            ins.moveTo(path[i - 2] || 0, path[i - 1] || 0);
            ins.quadraticCurveTo(path[i], path[i + 1], path[i + 2], path[i + 3]);
        }
    } else if (!notEnded) {
        ins.moveTo(0, 0);
        ins.beginFill(color);
        ins.drawCircle(0, 0, width / 2);
        ins.endFill();
    }
}

const g = new PIXI.smooth.SmoothGraphics()
const lineWidth = 10;
const points = [8, 0, 28, 2, 63, 11, 94, 18, 126, 28, 146, 38, 161, 47, 170, 56, 174, 68, 174, 80, 174, 92, 170, 100, 152, 113, 134, 117, 105, 123, 77, 124, 56, 127, 36, 130, 24, 132, 19, 132, 17, 133, 16, 133, 16, 133]
const path = [0, 0, 4, 0, 8, 0, 18, 1, 28, 2, 45.5, 6.5, 63, 11, 78.5, 14.5, 94, 18, 110, 23, 126, 28, 136, 33, 146, 38, 153.5, 42.5, 161, 47, 165.5, 51.5, 170, 56, 172, 62, 174, 68, 174, 74, 174, 80, 174, 86, 174, 92, 172, 96, 170, 100, 161, 106.5, 152, 113, 143, 115, 134, 117, 119.5, 120, 105, 123, 91, 123.5, 77, 124, 66.5, 125.5, 56, 127, 46, 128.5, 36, 130, 30, 131, 24, 132, 21.5, 132, 19, 132, 18, 132.5, 17, 133, 16.5, 133, 16, 133, 16, 133]

drawLine(g, {lineWidth, color: 0xff0000, path, notEnded: true});

[daigocy]

, 

[mudcube]

@daigocy Demo looks lovely to me, no issues on my machine :)

[daigocy]

I write a simple demo using pixi.js@^6.2.0.

import * as PIXI from "pixi.js";
import { SmoothGraphics } from '@pixi/graphics-smooth';
window.PIXI = PIXI;

const app = new PIXI.Application({antialias: true});

// The application will create a canvas element for you that you
// can then insert into the DOM
document.body.appendChild(app.view);

function drawLine(ins, props) {
    const { lineWidth: width, color, path, notEnded } = props;
    ins.clear();
    if (path.length) {
        for (let i = 0; i < path.length; i += 4) {
            ins.lineStyle({
                width,
                color,
                cap: PIXI.LINE_CAP.ROUND,
                join: PIXI.LINE_JOIN.ROUND,
            });
            ins.moveTo(path[i - 2] || 0, path[i - 1] || 0);
            ins.quadraticCurveTo(path[i], path[i + 1], path[i + 2], path[i + 3]);
        }
    } else if (!notEnded) {
        ins.moveTo(0, 0);
        ins.beginFill(color);
        ins.drawCircle(0, 0, width / 2);
        ins.endFill();
    }
}

const g = new SmoothGraphics()
const lineWidth = 10;
const points = [8, 0, 28, 2, 63, 11, 94, 18, 126, 28, 146, 38, 161, 47, 170, 56, 174, 68, 174, 80, 174, 92, 170, 100, 152, 113, 134, 117, 105, 123, 77, 124, 56, 127, 36, 130, 24, 132, 19, 132, 17, 133, 16, 133, 16, 133]
const path = [0, 0, 4, 0, 8, 0, 18, 1, 28, 2, 45.5, 6.5, 63, 11, 78.5, 14.5, 94, 18, 110, 23, 126, 28, 136, 33, 146, 38, 153.5, 42.5, 161, 47, 165.5, 51.5, 170, 56, 172, 62, 174, 68, 174, 74, 174, 80, 174, 86, 174, 92, 172, 96, 170, 100, 161, 106.5, 152, 113, 143, 115, 134, 117, 119.5, 120, 105, 123, 91, 123.5, 77, 124, 66.5, 125.5, 56, 127, 46, 128.5, 36, 130, 30, 131, 24, 132, 21.5, 132, 19, 132, 18, 132.5, 17, 133, 16.5, 133, 16, 133, 16, 133]

drawLine(g, {lineWidth, color: 0xff0000, path, notEnded: true});
g.x = 100;
g.y = 100;

app.stage.addChild(g);

This is result

[daigocy]

Looks good to me. How does it look on your machine?

function drawLine(ins, props) {
    const { lineWidth: width, color, path, notEnded } = props;
    ins.clear();
    if (path.length) {
        for (let i = 0; i < path.length; i += 4) {
            ins.lineStyle({
                width,
                color,
                cap: PIXI.LINE_CAP.ROUND,
                join: PIXI.LINE_JOIN.ROUND,
            });
            ins.moveTo(path[i - 2] || 0, path[i - 1] || 0);
            ins.quadraticCurveTo(path[i], path[i + 1], path[i + 2], path[i + 3]);
        }
    } else if (!notEnded) {
        ins.moveTo(0, 0);
        ins.beginFill(color);
        ins.drawCircle(0, 0, width / 2);
        ins.endFill();
    }
}

const g = new PIXI.smooth.SmoothGraphics()
const lineWidth = 10;
const points = [8, 0, 28, 2, 63, 11, 94, 18, 126, 28, 146, 38, 161, 47, 170, 56, 174, 68, 174, 80, 174, 92, 170, 100, 152, 113, 134, 117, 105, 123, 77, 124, 56, 127, 36, 130, 24, 132, 19, 132, 17, 133, 16, 133, 16, 133]
const path = [0, 0, 4, 0, 8, 0, 18, 1, 28, 2, 45.5, 6.5, 63, 11, 78.5, 14.5, 94, 18, 110, 23, 126, 28, 136, 33, 146, 38, 153.5, 42.5, 161, 47, 165.5, 51.5, 170, 56, 172, 62, 174, 68, 174, 74, 174, 80, 174, 86, 174, 92, 172, 96, 170, 100, 161, 106.5, 152, 113, 143, 115, 134, 117, 119.5, 120, 105, 123, 91, 123.5, 77, 124, 66.5, 125.5, 56, 127, 46, 128.5, 36, 130, 30, 131, 24, 132, 21.5, 132, 19, 132, 18, 132.5, 17, 133, 16.5, 133, 16, 133, 16, 133]

drawLine(g, {lineWidth, color: 0xff0000, path, notEnded: true});

My friend use safari and demo looks ok. I am using chrome.

[dev7355608]

@daigocy Could you check whether this is related to just POINT line joints/caps or others as well? Set the line alpha to 0.5: that might help to see what goes wrong.

[daigocy]

@dev7355608 Now I set the line alpha to 0.5 and remove "ins.moveTo(path[i - 2] || 0, path[i - 1] || 0);" from my code.
When I set lineCap to PIXI.LINE_CAP.BUTT or PIXI.LINE_CAP.SQUARE, no gap appears in the line.
But When I set lineCap to PIXI.LINE_CAP.ROUND, sometimes gap will appear at the start or the end of the line.

[dev7355608]

The initial fix introduced potential precision/divide-by-zero problems with collinear edges. I addressed that in a1754e7 (v0.0.22). I'm not sure that's it, so let me know @daigocy.

[daigocy]

@dev7355608 It's perfect now. Thank you.