如何在Paint Worklet中导入/使用库？
如何在Paint Worklet中导入/使用库？
提问于 2019-10-22 06:30:38
我正在尝试检查是否可以在Paint Worklet中使用canvas库。我试着测试一下我是否可以使用paper.js。问题是我不能在worklet中加载库，不允许访问库的全局脚本和web woker中的importScripts都不起作用。
是否可以在paint Worklet中使用库？
似乎我在PaintAPI中使用paper.js唯一需要做的就是模拟CanvasProvider对象，该对象返回的是paint worklet上下文，而不是canvas.getContext('2D');。问题是我可以在worker中使用self like，但我不能访问纸张对象。
我的代码是这样的：
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上尝试一下。
回答 2
Stack Overflow用户
发布于 2019-10-22 06:47:52
在浏览器中似乎有一个paintWorklet，所以你可以运行：
CSS.paintWorklet.addModule('library');
CSS.paintWorklet.addModule('my code');我的代码将共享库代码，另一个问题是paper.js无法工作，因为依赖于浏览器。
Stack Overflow用户
发布于 2020-04-03 17:33:31
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' } ) )
};
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/58494907
复制相关文章
相似问题
腾讯云开发者
