2

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

样式.module.scss：

.container {
  --bubble-color: #ccc;
  background-image: paint(testPaint, selected);
  display: flex;
  margin: 4px;
  border-radius: 12px;
  height: 75px;
}

testPaint.js：

registerPaint(
  "testPaint",
  class {
    static get inputProperties() {
      return ["--bubble-color"];
    }
    static get inputArguments() {
      return ["*"];
    }
    paint(ctx, geom, properties, args) {
      console.log('args', args); // NOTHING LOGGED HERE
      const isSelected = args[0].toString() === "selected";
    }
  }
);

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

4

1 回答 1

1

似乎paint并非所有浏览器都支持传递参数（在 FF 和 Mac 上的 Chrome 上测试）。

有论据

来自 chrome 债务工具样式面板的屏幕截图

没有论据

在此处输入图像描述

注意：参数化颜色也很好，不是吗？该规范允许 paint() 函数采用参数列表。这个功能还没有在 Chrome 中实现，因为它严重依赖于 Houdini 的 Properties and Values API，它仍然需要一些工作才能发布。

资源

于 2020-11-10T08:58:37.087 回答