Integration with PIXIjs

[igorcouto]

Hi guys,

Did you see possibility on integration with PIXIJS Custom Sprites?

Thanks!

[pshihn]

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?

[igorcouto]

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()
}

})

[StringKe]

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()
}

})

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;
                    }
                })
            }
        });

[stylustrader]

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