Question

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

我正在通过这样的自定义属性传递图片：

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

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

background-image: paint(myworklet);

控制台告诉我img是 CSSImageValue ，因此它似乎可以以某种方式工作，但是图像不会被绘制到div的背景上。

有人能使它正常工作吗，还是尚未实现此类功能所需的某些功能？

Answer 1

到目前为止，Chrome尚未实现图片。应该在最新的Safari技术预览版（v72）中可用。但这需要内联代码，请参见https://vitaliy-bobrov.github.io/blog/trying-paint-wroklet-in-safari-tp/

drawImage Houdini CSS Paint API

1 个答案: