Как импортировать / использовать библиотеку в Paint Worklet? - PullRequest
Новая
       2

Как импортировать / использовать библиотеку в Paint Worklet?

0 голосов
/ 22 октября 2019

Я пытаюсь проверить, возможно ли использовать библиотеку холста внутри Paint Worklet. Я пытался проверить, могу ли я использовать paper.js. Проблема в том, что я не могу загрузить библиотеку в рабочем листе, глобальный скрипт, который не дает доступа к библиотеке, и importScripts из web woker не работают.

Возможно ли использовать библиотеки внутри рабочего стола рисования?

Кажется, единственное, что мне нужно, чтобы использовать paper.js с PaintAPI, - это смоделировать объект CanvasProvider, который возвращает контекст рабочего окна рисования вместо canvas.getContext('2D');. Проблема в том, что я могу использовать self как на рабочем месте, и у меня нет доступа к бумажному объекту.

У меня есть такой код: 

CSS.paintWorklet.addModule(blobify(function() {
    //importScripts('https://cdn.statically.io/gh/paperjs/paper.js/prebuilt/module/dist/paper-full.js');

    class Circle {

        static get inputProperties() {
            return ['--pointer-x', '--pointer-y', '--pointer-options'];
        }

        paint(context, geom, properties) {
            /*
            self.CanvasProvider = {
                getContext: function() {
                    return context;
                }
            };
            console.log(paper);
            */
            var x = properties.get('--pointer-x').value || 0;
            var y = properties.get('--pointer-y').value || 0;
            const prop = properties.get('--pointer-options');
            const {
                background,
                color,
                width
            } = Object.assign({
                color: 'white',
                background: 'black',
                width: 10
            }, JSON.parse(prop.toString()));
            context.fillStyle = color;
            //console.log({x,y, color, background, width})
            context.beginPath();
            context.arc(x, y, Math.floor(width / 2), 0, 2 * Math.PI, false);
            context.closePath();
            context.fill();
        }
    }
    registerPaint('circle', Circle);
}));

не рабочий код закомментирован,Вы можете попробовать поиграть с этим на CodePen .

1 Ответ

0 голосов
/ 22 октября 2019

Кажется, что в браузере есть один paintWorklet, поэтому вы можете запустить: 

CSS.paintWorklet.addModule('library');
CSS.paintWorklet.addModule('my code');

, и мой код разделит код библиотеки, другая проблема в том, что paper.js не работает из-за зависимости браузера.

...