Integration with PIXIjs
igorcouto opened this issue · 4 comments
Hi guys,
Did you see possibility on integration with PIXIJS Custom Sprites?
Thanks!
I have not used pixijs, so cannot say.
But I have a proof of concept version of roughjs that renders using webgl.
What exactly are you thinking of?
I'm thinking in integrating it in PIXI Custom components, using graphics(that in underlying implementation uses a canvas context).
Somethink like that, but using rough. Then we will have acess to PIXI Library. It will awesome.
const Rectangle = PixiComponent('Rectangle', {
create: () => new PIXI.Graphics(),
applyProps: (g, _, props) => {
const { fill, x, y, width, height } = props
g.clear()
g.beginFill(fill)
g.drawRect(x, y, width, height)
g.endFill()
}
})
I'm thinking in integrating it in PIXI Custom components, using graphics(that in underlying implementation uses a canvas context).
Somethink like that, but using rough. Then we will have acess to PIXI Library. It will awesome.
const Rectangle = PixiComponent('Rectangle', {
create: () => new PIXI.Graphics(),
applyProps: (g, _, props) => {
const { fill, x, y, width, height } = propsg.clear() g.beginFill(fill) g.drawRect(x, y, width, height) g.endFill() }
})
you can try this
roughGenerator
import rough from 'roughjs/bundled/rough.esm';
import RoughType from 'roughjs';
declare type RoughGenerator = ReturnType<typeof RoughType.generator>;
const generator = rough.generator(undefined);
const roughGeneratorInstance = generator as RoughGenerator;
export const roughGenerator = roughGeneratorInstance;
const rectangle = roughGenerator.rectangle(0, 0, 100, 100);
rectangle.sets.forEach(step => {
if (step.type === 'path') {
step.ops.forEach(({op, data}) => {
const [cp1x, cp1y, cp2x, cp2y, x, y] = data;
switch (op) {
case "bcurveTo":
buttonDraw.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
break;
case "lineTo":
buttonDraw.lineTo(cp1x, cp1y)
break;
case "move":
buttonDraw.moveTo(cp1x, cp1y)
break;
default:
break;
}
})
}
});
I have not used pixijs, so cannot say. But I have a proof of concept version of roughjs that renders using webgl. What exactly are you thinking of?
Def interested in webgl version