pixijs / graphics-smooth Goto Github PK
View Code? Open in Web Editor NEWDrop-in replacement for Graphics but with anti-aliasing
Home Page: https://pixijs.io/graphics-smooth/docs/index.html
License: MIT License
Drop-in replacement for Graphics but with anti-aliasing
Home Page: https://pixijs.io/graphics-smooth/docs/index.html
License: MIT License
It's a random behavior. That don't happen every times.
The lines are drawed with this parameter :
static losLineStyle = { width: 10, color: 0xff0000, alignment: 0.5 };
The shape init :
this.losGraphics.lineStyle(this.lineStyle).beginFill(0xFFFFFF, 1.0).drawPolygon(this.los).endFill();
I am wondering if it is possible to better achieve biezing by adding tension so I can decrease the amount in general. Right now with this way I don't have a way to control it. That is something I need to work out. Any suggestions would be great nevertheless.
A question I have about the "animation" is that it kind of goes from point to appearing point. Not really a crawl animation that is from 1 point to 1 point. I think that would look better. Is there a way to do that? I realize that if I probably do that it would decrease performance significantly.
The other question I have is about the fps control. If I have data points coming in at, let's say 100 data points a second, so like every 20 - 40 ms what happens with the data that is "lagging" behind the FPS control? Just wondering that.
I've included the pen to illustrate the point(s) :)O get it?
CodePen
Is there a plan to support Pixi 7?
I am trying to draw a circle with a border using the following piece of code.
const graphics = new PIXI.smooth.SmoothGraphics();
graphics.clear();
graphics.lineStyle({
width: 4,
color: 0xeeeeee,
alignment: 0,
join: PIXI.LINE_JOIN.MITER,
cap: PIXI.LINE_CAP.SQUARE,
});
graphics.beginFill(0x00DFAC);
graphics.drawCircle(280, 150, 100);
graphics.endFill();
app.stage.addChild(graphics);
and it draws it fine for the most part, but there is a small amount of bleed from underneath the linestyle.
The process as far as I can tell is that is created like shown above, set to a render texture and then added to the scene
I have a code pen, allowing for both normal and render texture use, but it doesn't replicate the issue for either, have you got an idea as to what this could be and/or have you seen this issue before?
Unfortunately I can't share the rest of the code because it is company property
The graph is scaled and the actual graph width remains the same
According to the middle mouse button scroll to zoom, use the PIXI. Graphics PIXI. Smooth. SmoothGraphics effect is not the same,
See links for examples
https://codepen.io/pcbren1987/pen/vYjZmgV
Dear authors, I was trying to make a canvas tool like Figma, but I have a problem. I tried Google but it didn't work out. Just like the image presentation, I used the graphics-smooth dotted line capability because this fits my needs very well.
My pseudocode juet like is:
g.lineStyle( { shader: new DashLineShader({ dash: config.dash_distance_width, gap: config.dash_distance_gap }) });
However, as I moved around the canvas I found some performance issues and I would like to get some advice and help, thanks
Thank the authors found that a library is very useful for me, my side is engaged in PCB industry, need to use this library drawing can improve the efficiency of drawing (especially line cap smoother) memory space occupied less than PIXIJS, don't know how to solve a problem, existing graphics zoom, don't change color, if there is a feasible solution
When the image scale is reduced by 20 times, the green RGB(0,255,0)
changes to the dark green RGB(0,76,0).
How to achieve image zoom after the color does not change
I've updated from pixi 7.2.4 to pixi 7.3.1, I'm using the graphics smooth library to create dynamic sprites and I've encountered the type error:
Type error: Argument of type 'SmoothGraphics' is not assignable to parameter of type 'IRenderableObject'
Code:
const g = new SmoothGraphics()
const texture = this.app.renderer.generateTexture(g, { ... }) //error here in the g
Is this a mistake on my end or a type mismatch between the two libraries?
Downgrading pixi back to 7.2.4 fixes the issue. Just to note, this is not a runtime error, everything works fine, only typescript complains
When I use it, devtool throws an error on the console, at which point any action on pixi is invalid, and when I close devtool, everything works fine, which makes debugging difficult.
The devtool version: 0.9.6
DashLineShader
If alignment is set to 0; Then the width will be calculated across the entire container width, which is not expected. Is there a way to avoid this problem? Although the border is inside, the entire square still has an invisible border like width=4 on the outside, although it is not visible.
graphics.lineStyle({ width: 4, color, cap: PIXI.LINE_CAP.ROUND, join: PIXI.LINE_JOIN.ROUND, alignment: 0, })
const pointCollect = [ [0, 0], [200, 0], [200, 200], [0, 200], ].flat();
graphics.drawPolygon(...pointCollect);
Hey, thanks for this project. Just wanted to share a potential issue:
I upgraded to [email protected] (to prep for 7 and offer canvas fallback support) and was getting errors out of the graphics-smooth lib when trying to build (this is a TS project):
node_modules/@pixi/graphics-smooth/index.d.ts:225:22 - error TS2415: Class 'SmoothGraphics' incorrectly extends base class 'Container<DisplayObject>'.
Property '_renderCanvas' is protected in type 'SmoothGraphics' but public in type 'Container<DisplayObject>'.
225 export declare class SmoothGraphics extends Container {
This is from @pixi/graphics-smooth/index.d.ts
I experimented with many different versions to come to the conclusion I think it's an actual issue. Changing _renderCanvas
to public, or simply removing any access modifiers fixed this issue.
Since PIXI v7.2 a warning will show:
PixiJS Deprecation Warning: utils.premultiplyTint has moved to Color.toPremultiplied
Deprecated since v7.2.0
Which is caused by this part:
graphics-smooth/src/SmoothGraphicsGeometry.ts
Line 784 in 50064bc
I am working with @pixi/graphics-smooth, and I found it doesn't support batch rendering, It will cause my application very slow when the stage has a lot of smooth graphics elements. I have read the README.md and learn about that you are working on it, so I want to when will support this feature?
So first, off this plugin is game changing. To me this is something that could compete with D3 in a way, I think.
Here are some pics of a quick script I did to test it out for my use case. I don't have to tell you what this would of looked like without this. It's just what I need. Except for 1 thing. I don't need to remind you what that looks like without this plugin.
However, you'll notices that the lines that break in-between the amplitudes that "arc" are at an angle and it would be great if those could curve. will BiezerTo and QuadracticTo also work here?
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
Here is an example:
The red rectangle can be changed to the green rectangle by directly changing pluginName, but this function is disabled after SmoothGraphics is used
https://codepen.io/pcbren1987/pen/MWGvNJP
use **SmoothGraphics.bezierCurveTo ** get error.
[.WebGL-00007230029B8E00] GL_INVALID_OPERATION: Internal error: 0x00000502: Vertex buffer is not big enough for the draw call.
use method<SmoothGraphics.bezierCurveTo> get error ,
[.WebGL-00007230029B8E00] GL_INVALID_OPERATION: Internal error: 0x00000502: Vertex buffer is not big enough for the draw call.
index.html:1 WebGL: too many errors, no more errors will be reported to the console for this context.
If the radius of the rounded rectangle is very close to, equal or larger than the maximum possible radius (min(width, height) / 2
), there appear gaps in the outline:
new PIXI.smooth.SmoothGraphics()
.beginFill(0xff0000, 1.0)
.lineStyle(3, 0x000000)
.drawRoundedRect(100, 120, 100, 200, 50)
.endFill()
.beginFill(0x00ff00, 1.0)
.lineStyle(3, 0x000000)
.drawRoundedRect(250, 100, 100, 100, 50)
.endFill()
.beginFill(0xffff00, 1.0)
.lineStyle(3, 0x000000)
.drawRoundedRect(250, 250, 150, 100, 50)
.endFill();
Whether the circle can be rendered with shaders, which can ensure that the circle is more smooth
Examples are as follows
https://www.pixiplayground.com/#/edit/-9ozT4cSsTjuyGauUlTIf
code is
ins.clear();
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]);
}
There are some transparent points in lines drawed by quadraticCurveTo.
At this moment it's impossible to use SmoothGraphics
object as mask (actually you can, but smoothing doesn't work). Are there any plans to make it possible?
Ofc, it can be achived by using sprite cache, but is's workaround. I'm interested in "native" support.
P.S.: Thanks for great lib tho.
I want to test this in my one html file (testing for solution) and I am not seeing how I could get this via a CDN or refer to it directly. Can we set it another way than requiring it in?
run:
yarn i
yarn build
node_modules/@pixi/core/index.d.ts:25:24 - error TS2307: Cannot find module '@pixi/runner' or its corresponding type declarations.
25 import { Runner } from '@pixi/runner';
~~~~~~~~~~~~~~
node_modules/@pixi/utils/index.d.ts:4:26 - error TS2307: Cannot find module '@pixi/settings' or its corresponding type declarations.
4 import { isMobile } from '@pixi/settings';
~~~~~~~~~~~~~~~~
Found 2 errors.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
ERROR: "types" exited with 1.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
and running pnpm ,and same result.
Hi will this work for version 8?
Issue Details
pixi/graphics-smooth
: 0.0.17Hello Ivan, thanks for creating this awesome extension. I am experiencing a memory leak using 0.0.17 which I believe traces back to SmoothGraphicsGeometry
. I am currently testing with SmoothGraphics
as a drop-in replacement using:
PIXI.LegacyGraphics = PIXI.Graphics;
PIXI.Graphics = PIXI.smooth.SmoothGraphics;
When using SmoothGraphics
I observe a steady increase in heap size as graphics objects are created. If I revert back to using the standard PIXI.Graphics
the observed memory leak goes away.
I captured a short allocation timeline (including stack traces) using the Chrome dev tools profiler and have uploaded here: https://drive.google.com/file/d/1fRjh5yYY2sNlP89No7nvEXlgfM6-IyL2/view?usp=sharing
An example allocation from the timeline is depicted below:
I don't know if there is additional information that I can provide to you that would help you reproduce or diagnose the issue - please let me know. Thanks!
Here access to the demo
https://codesandbox.io/s/smoothgraphics-rounded-rect-o3qfi?file=/src/index.js
Hi, first of all, a big thanks for this library.
I am currently trying to make a clone of AutoCAD WebApp.
To do that, I have to use the Smooth Graphics plugins to get no scaling lines.
I'm pixi-viewport to move and zoom my view.
But I'm getting performance issue when I want to see my whole plan. (only this case because I used "cullable=true" in my graphics)
I got something like 20k Graphics on this plan, but I can get more.
Is there a way to increase Smooth Graphics performance, or maybe It's just my structure who's the problem ?
Performance problem screen using chrome tools :
I'm using Containers to handle blocks (ex: a car or a chair) and doing a transform on it to place it :
const shapesBlock: Graphics[] = drawData(layer, shapesOfReferences, 0, true)
let transform: PIXI.Transform = new PIXI.Transform()
const mInsert = transform.localTransform.translate(0, 0)
const yScale = d.Scale.Y || 1
const xScale = d.Scale.X || 1
let x = d.Position.X
const y = maxY - d.Position.Y
mInsert.scale(xScale, yScale)
transform.localTransform.a = d.Matrix[0]
transform.localTransform.b = -d.Matrix[4]
transform.localTransform.c = -d.Matrix[1]
transform.localTransform.d = d.Matrix[5]
mInsert.translate(x, y)
if (d.Normal && d.Normal.Z < 0) {
mInsert.scale(-1, 1)
}
const blockContainer = new PIXI.Container()
shapesBlock.forEach((shape) => {
blockContainer.addChild(shape)
})
blockContainer.transform = transform
shapesArray.push(blockContainer)
In my app, every shapes or blocks are handle in a specific container as a layer.
So It's like layer 1 : Container => shapes + containers(who contains shape)
Please let me know if you need additionnal info. I feel really stuck. I'm a student in internship and no one used Pixi before in my company...
Would love your help
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.