0

我正在 Chrome 70 上试用 Houdini 的 CSS Paint API，但这个示例无法正常工作： https ://github.com/w3c/css-houdini-drafts/blob/master/css-paint-api/EXPLAINER.md #绘图图像

我通过这样的自定义属性传递图像：

--my-image: url("bridge.jpg");

我使用 CSS 属性和值 API 级别（通过实验性 Web 平台功能标志启用）来注册我的图像属性：

CSS.registerProperty({
  name: '--my-image',
  syntax: '<image> | none',
  initialValue: 'none',
  inherits: false,
});

然后我试图在我的工作集中绘制它：

class MyWorklet {
  static get inputProperties() { 
    return ['--my-image']; 
  }

  paint(ctx, geom, properties) {
    const img = properties.get('--my-image');
    console.log(img);
    ctx.drawImage(img,10,10,150,180);    
  }
}
registerPaint('myworklet', MyWorklet);

为了显示 worklet，我制作了一个简单的 500 * 500 div 并添加了样式：

background-image: paint(myworklet);

控制台告诉我 img 是一个CSSImageValue，所以它似乎以某种方式工作，但图像没有被绘制到 div 的背景上。

有没有人设法让它工作，或者这种东西所需的一些功能尚未实现？

4

1 回答 1

1

图像尚未在 Chrome 中实现。应该在最新的 Safari 技术预览版 (v72) 中可用。但它需要内联代码，请参阅https://vitaliy-bobrov.github.io/blog/trying-paint-wroklet-in-safari-tp/

于 2018-12-31T10:24:31.227 回答