1

我正在尝试检查是否可以在 Paint Worklet 中使用画布库。我尝试测试是否可以使用 paper.js。问题是我无法在 worklet 中加载库，无法访问库的全局脚本和来自 web woker 的 importScripts 不起作用。

是否可以在paint Worklet 中使用库？

似乎我唯一需要将 paper.js 与 PaintAPI 一起使用就是模拟返回paint worklet 上下文而不是canvas.getContext('2D');. 问题是我可以像在工人中一样使用自我，而我无法访问纸质对象。

我有这样的代码：

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上玩这个。

4

2 回答 2

0

Worklet 都是模块脚本，因此您可以简单地import从脚本中创建库。

const lib_url = blobifyScript(`
const foo_obj = { foo: "bar" };
export default foo_obj;
`)

const worklet_url = blobifyScript(`
import foo_obj from "${lib_url}";
console.log( foo_obj.foo );
`);

CSS.paintWorklet.addModule( worklet_url )
  .then( () => console.log( "check your browser's console" ) )
  .catch( console.error );

function blobifyScript( content ) {
  return URL.createObjectURL( new Blob ( [ content ], { type: 'application/javascript' } ) )
};

于 2020-04-03T09:33:31.403 回答
0

浏览器中似乎有一个paintWorklet，因此您可以运行：

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

我的代码将共享库代码，另一个问题是 paper.js 由于浏览器依赖性而无法工作。

于 2019-10-21T22:47:51.727 回答