问题标签 [css-houdini]

用例

我使用新的“ registerProperty ”函数将自定义属性“ --animation-duration ”定义为时间值：

在我的 CSS 中，我现在可以将此属性添加到我的类中并调整它的值：

现在我想通过javascript 在我的元素上获取这个属性的值，总是在 ms 中。这可以通过以下代码行来实现：

问题

在我的通用 javascript 中获取此值是否有更短/更好的方法？

额外的

我知道你可以在worklet中缩短它（在paint-worklet 中测试）：

下面的代码在我的通用 javascript 中不起作用：

我正在 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 中，我们有transform和filter，我们也有backdrop-filter. 但据我所知，我们没有backdrop-transform，或类似的东西。

解释我的意思：backdrop-filter允许您过滤某些特定元素后面的东西，例如，您可以通过将 a 定位div在该区域上，然后应用backdrop-filter: hue-rotate(90deg)到它来调整背景图像的特定区域的色调，就像这样：

backdrop-transform财产的类似物也是如此transform。您可以transform作为背景图像的一部分，如下所示：

您也可以使用单个嵌入式 youtube 视频（或任何其他 iframe）执行类似的操作，例如：

请注意，如果您尝试使用两个单独的 iframe 来模拟这一点，您需要以某种方式保持彼此同步（关于滚动、视频播放等），如果 iframe 是，这可能很难/不可能跨域。更不用说为您要转换的每个片段嵌入新的 iframe/视频的成本。

也许我对 Houdini 的惊人承诺太醉了，但我认为这样的东西会非常强大并且非常有用（至少对我来说！）。例如，您可以嵌入一个视频元素，但将其分成四份，甚至使用 CSS 将这些四份混杂在一起！用 4 个不同的蒙版视频来做这件事会很乏味，并且试图让它们逐帧完美同步可能会很麻烦（尤其是考虑到 HTML5 视频 API 的时间分辨率低），并且在服务器上剪切视频 -只是看起来不必要的艰巨。

对于我的特定用例，我什至无法控制视频（它位于跨域 iframe 中），因此 CSS 是实现我想做的唯一方法。backdrop-filter让我走到了一半，但我还需要能够独立地转换这些片段。

可能的解决方案#1：element()

CSSelement(...)可以在url(..)函数可以使用的任何地方使用。它允许您将页面上任何元素的完整快照（包括跨域内容）用作图像（令人惊叹）。对于那些感兴趣的人，这里有一些演示。唯一的问题是它目前只被 Firefox 支持，但它是在标准轨道上，所以它很有可能在未来被其他浏览器支持。如果我们获得了该函数的跨浏览器版本，我们可以通过假设属性element()实现一切可能。backdrop-transform我们只需在该区域上放置一个 div，然后获取它的实时快照，并根据需要对其进行转换。性能可能是一个问题，具体取决于element()幕后的实现方式。这是铬的element()问题。

There is a draft of such feature as CSS.registerProperty. In fact it allows to define types for css variables so that browser will be able to extend its abilities about them including animating values.

For me it seems strange that the feature that can be used for css-only perpouses (example) has only javascript representation and can't be used from pure css.

Is there any reason to include it in javascript but not propose same thing for css?

The things that I can't do from css now:

• Specify the type (syntax) - without it css animation wouldn't work (the same example)
• Specify inherits: false

使用 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 文件？

我正在尝试检查是否可以在 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 类型对象模型，我试图获得这个 div 的背景颜色。它给了我一个CSSStyleValue似乎只有一种方法的toString()方法。我希望它将颜色解析为 RGB 三元组或其他有用的东西，就像它对宽度所做的那样。

是否有用于解析颜色的 API，或者尚未指定？

（我知道我可以手动解析字符串，这不是问题）

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

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