问题标签 [css-paint-api]

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

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

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

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

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

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

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

Canvas 的上下文支持createImageData，putImageData但是，paint workletpaint方法中的上下文似乎不支持这些方法。我知道它不允许从上下文中读取像素数据，因为它在本文档中明确说明：

绘制工作集的上下文与上下文并非 100% 相同。到目前为止，缺少文本呈现方法，出于安全原因 ，您无法从画布中读取像素。

我很惊讶，似乎也无法将像素写入画布。我错过了什么还是什么？

这是我为演示该问题而制作的代码笔- 当我运行它时，ChromeUncaught TypeError: ctx.createImageData is not a function会在控制台中打印。

使用 CSS Paint API 的惯用方式似乎是：

1. 创建xyz.js文件
   • 填充包含paint(ctx, geom, properties)函数的类
   • 调用registerPaint，将类作为参数传递
2. CSS.paintWorklet.addModule('xyz.js')从您的电话index.html
3. 在 CSS 中应用paint worklet，例如background-image: paint(myPaintWorklet);

更多细节在这里：https ://developers.google.com/web/updates/2018/01/paintapi

但是必须加载单独的 .js 文件会影响性能。

有没有办法内联 PaintWorklet 以便不需要单独的 .js 文件？

JavaScript Worklet接口只接受带有 ES6 类的文件作为方法的参数Worklet.addModule。我有一个 webpack 之外的解决方法来缩小我的 CSS Paint 工作文件并将其放在我的 dist 文件夹中，但它会使开发中的迭代变慢。我想通过 webpack 处理这个文件，只进行缩小，没有编译，没有 webpack cruft 将类包装在一个函数中，这些都不起作用。

我已经搜索了一整天并尝试noParse从 Babel 中排除，但我仍然将缩小的类包装在一个函数中。有没有办法只通过 webpack 缩小？

不需要像通常使用 webpack 模块那样导入工作集，只需调用addModule它即可。我需要将其缩小并输入dist/，然后我需要一种方法在编译时获取散列名称以使其成为addModule. 动态导入似乎可以工作，因此工作集是一个单独的块，并且在承诺解决后您可以addModule使用它进行调用，但是由于工作集文件被包装在一个函数中，浏览器会抛出一个错误，说明registerPaint()您使用类，未定义。

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

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

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

我有这样的代码：

不工作的代码被注释掉了，你可以尝试在CodePen上玩这个。

我在 css 中遇到了这个名为 css Houdini 的新功能。我只是想知道是否有任何方法可以使用 css houdini paint API 设置选择标签的样式。我试过这个代码片段。任何帮助将不胜感激。提前致谢。

html -

css

脚本

密码笔

我正面临 css paint worklet 的问题，我想知道它是浏览器错误还是我做错了什么。在 worklet 中，我正在绘制几个矩形。如果其中一个覆盖了整个区域，那么当我更改缩放级别时，其他的就会开始消失。但是当我删除所有东西时，context.fillRect(0, 0, width, height)一切都像魅力一样。

这是我为更好地说明问题而准备的沙箱代码：https ://codesandbox.io/s/magical-villani-py8x2

我正在尝试复制此示例；我有一个 scss 文件，我在 React/Electron 项目中与模块化 CSS 一起使用。paint我想在同一个文件中定义要使用的函数，如示例中所示：

但是，这无法使用 CssSyntax error: Expected a pseudo-class or pseudo-element. (2:23). 演示是什么，我没有做什么？

我有一个 React/Electron 应用程序，我正在尝试使用新的 CSS Houdinipaint()功能（如本页所示）。在我的项目index.html文件中，我添加了一个带有 paintWorkletaddModule()函数的脚本标记，如下所示：

然后在该testPaint.js文件中，我基本上拥有该博客文章中显示的内容的副本：

最后是我的css文件：

我应该指出我正在使用 CSS 模块，所以这个文件是defaultResultStyles.module.scss; 不确定这是否会影响任何事情。当我在我的应用程序中调出本应具有这些样式的组件时，它没有样式，尽管检查它，它确实显示background-image: paint(testPaint). The console.log that I added to the testPaint.js` 文件从未显示。

我已经尝试了文件路径的多种变体addModule；我试过 just testPaint.js，从./srcand开始src，但似乎没有任何效果；这在 Electron/React 应用程序中可行吗？

我有一个 React/Electron 应用程序（带有 .scss 文件和 CSS 模块），我正在尝试使用 CSS Houdinipaint()功能。我已经成功地调用它，但似乎添加第二个参数paint()会导致它失败。

样式.module.scss：

testPaint.js：

selected如果我从paint(testPaint, selected)通话中排除，它可以正常工作，但它args是一个空数组。如果我用 调用它selected，则根本不会调用它（没有控制台日志，没有断点触发器）。我一直在关注本指南，但没有看到它提到任何其他要求以使其正常工作......