drawImage Houdini CSS Paint API

Posted 2023-02-22

【中文标题】drawImage Houdini CSS Paint API

【英文标题】：

【发布时间】：2018-11-29 19:40:08

【问题描述】：

我正在 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,
);

然后我尝试在我的 worklet 中绘制它：

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 的背景上。

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

【问题讨论】：

从来没有玩过Houdini，但是如果你使用速记背景属性而不是背景图像呢？

感谢您的提示，不幸的是，这也不起作用。顺便说一下，基本的东西，比如画一个圆圈，都可以，它只是 drawImage 真的。

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

【参考方案1】：

到目前为止，图像还没有在 Chrome 中实现。应该在最新的 Safari 技术预览版 (v72) 中可用。但它需要内联代码，见https://vitaliy-bobrov.github.io/blog/trying-paint-wroklet-in-safari-tp/

【讨论】：

感谢 Vitalii 的回答！这是属性和值 API 的一项功能吗？

类型 - 是的，它是 Properties & Values API 的一部分，但它也应该在 Paint API 中实现（能够将图像类型作为参数传递）