Comments (18)
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:
from graphics-smooth.
Yep, something like that. need better eps maybe
from graphics-smooth.
from graphics-smooth.
Fixed by dba5d58 (v0.0.21).
@ivanpopelyshev I assume the
abs(D) < 0.01
branch was added for performance reasons. The0.01
threshold was too high; in consequence line segments didn't properly connect if the angle is tiny. I simply changed it toD == 0.0
, instead of lowering the threshold, which would need to depend onshift + dy
. So now those artifacts should be impossible under any circumstances. BecauseD
is very rarely 0, we could remove this branch entirely, or, if it's important for performance, try to find a better threshold.
from graphics-smooth.
@daigocy Could you share the code that produces these artifacts? I haven't see those in my tests.
from graphics-smooth.
@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();
}
}
from graphics-smooth.
@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.
from graphics-smooth.
@daigocy Could you provide any path array that has these artifacts as well please.
from graphics-smooth.
@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]
from graphics-smooth.
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});
from graphics-smooth.
,
from graphics-smooth.
@daigocy Demo looks lovely to me, no issues on my machine :)
from graphics-smooth.
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);
from graphics-smooth.
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.
from graphics-smooth.
@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.
from graphics-smooth.
@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.
from graphics-smooth.
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.
from graphics-smooth.
@dev7355608 It's perfect now. Thank you.
from graphics-smooth.
Related Issues (20)
- Is there a plan to support batching of multiple graphics elements? HOT 4
- The graph is scaled and the actual graph width remains the same HOT 2
- BeginHole PIXI. Smooth. SmoothGraphics whether can support HOT 1
- Draw arcs, arcs are not smooth, please confirm whether you can support arcs to be more smooth HOT 2
- Draw a circle, the circle is not smooth, please confirm whether the circle can be more smooth HOT 1
- When the image scale is reduced by 20 times, the green RGB(0,255,0) changes to the dark green RGB(0,76,0). HOT 1
- After using Graphic to draw graphics, you can directly use graphic.pluginname to change the color without redrawing. With SmoothGraphics, you can't change the color directly HOT 1
- SmoothGraphics is used to draw a circle, which is composed of many points. The circle is not smooth after being magnified, and the amount of data is very large. HOT 1
- Setting graphic.interactive = true, gives errors HOT 10
- Support Pixi 7 HOT 2
- Using graphics-smooth with pixi-legacy 6.5 with typescript won't build HOT 2
- This plugin does not appear to support pixi devtool HOT 3
- Is this available in a CDN? HOT 2
- OMG This is AMAZING. Game Changing. Is it possible to Beazer some parts of the line. HOT 3
- A couple questions about the implementation of smooth scrolling and quadraticCurveTo HOT 2
- `utils.premultiplyTint` deprecated HOT 1
- Mask support HOT 1
- Colour bleed from underneath lineStyle border HOT 1
- Type error for SmoothGraphics in renderer.generateTexture
- Will this be for version 8 pixi as of v8.0.0-beta.6 it is not working HOT 8
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from graphics-smooth.