css - 无法导入css houdini paint js文件

Question

我有一个 React/Electron 应用程序，我正在尝试使用新的 CSS Houdini paint()函数(如 in this page 所示)。在我元素的 index.html我添加了一个带有paintWorklet addModule() 的脚本标签功能如图:

<script>
  CSS.paintWorklet.addModule('../src/ResultDisplay/DefaultResultDisplay/testPaint.js');
</script>

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

registerPaint(
  "testPaint",
  class {
    paint(ctx, geom) {
      console.log("painting!!!");
      const circleSize = 10;
      const bodyWidth = geom.width;
      const bodyHeight = geom.height;

      const maxX = Math.floor(bodyWidth / circleSize);
      const maxY = Math.floor(bodyHeight / circleSize);

      for (let y = 0; y < maxY; y++) {
        for (let x = 0; x < maxX; x++) {
          ctx.fillStyle = "blue";
          ctx.beginPath();
          ctx.arc(
            x * circleSize * 2 + circleSize,
            y * circleSize * 2 + circleSize,
            circleSize,
            0,
            2 * Math.PI,
            true
          );
          ctx.closePath();
          ctx.fill();
        }
      }
    }
  }
);

最后是我的css文件:

.container {
  background-image: paint(testPaint);
  display: flex;
  margin: 4px;
  border-radius: 12px;
  height: 75px;
}

我应该指出我正在使用 CSS 模块，所以这个文件是 defaultResultStyles.module.scss ;不确定这是否会影响任何事情。当我在我的应用程序中调出本应具有这些样式的组件时，它没有样式，尽管检查它，它确实显示 background-image: paint(testPaint). The console.log that I added to the testPaint.js` 文件永远不会显示。
我尝试了 addModule 的文件路径的多种变体;我试过了 testPaint.js , 以 ./src 开头和 src两者都有，但似乎没有任何效果；这在 Electron/React 应用程序中可行吗？

Answer 1

addModule 函数不能通过 webpack 或其他捆绑器工作，而是通过浏览器的 native 模块系统工作。你必须把 testPaint.js公共(public)目录中的文件，否则它将与其他所有内容捆绑在一起。
这是我添加到 index.html 的内容，以使其从本地 Create React App 元素的公共(public)目录中运行:

    <script>
      CSS.paintWorklet.addModule('%PUBLIC_URL%/testPaint.js');
    </script>

我实际上并没有设置任何标记，只是添加了容器类来测试它:


如果您想在不通过公用文件夹的情况下使用它(因为通常您必须在更改公用目录的 index.html 中添加绘图模块)，那么我建议使用 React Helmet设置脚本标签。需要注意的是，CRA 的热重载功能似乎会阻止脚本更新，因此每次更改脚本标签时，都需要手动刷新页面。

import React from 'react';
import { render } from 'react-dom';
import { Helmet } from 'react-helmet';
import styled from 'styled-components';

// Render these styled components like normal react components.
// They will pass on all props and work
// like normal react components – except they're styled!
const Demo = styled.div`
  background: #1108a0;
  padding: 50px 0;
`;
const Test = styled.div`
  --color: cyan;
  --multiplier: 0.24;
  --pad: 30;
  --slant: 20;
  background: paint(background-canvas);
  transition: --multiplier 0.4s;
  font: bold 6em sans-serif;
  color: yellow;
  text-shadow: 0 3px 1px cyan;
  line-height: 1.5em;
  width: max-content;
  padding-left: 30px;
  padding-right: 50px;
  isolation: isolate;
  &:hover {
    --multiplier: 1;
  }
  & span {
    mix-blend-mode: exclusion;
  }
`;
export const App = () => (
  <Demo>
    <Test className="el" right={'right'}>
      <span>JS-in-CSS</span>
    </Test>
  </Demo>
);
export const Helm = () => (
  <Helmet>
    <script language="javascript+paint">{`
  registerPaint('background-canvas', class {
  static get inputProperties() {
      return ['--multiplier', '--color', '--pad', '--slant'];
  }
  paint(ctx, geom, properties) {
    let multiplier = +properties.get('--multiplier').toString();
    let c = properties.get('--color').toString();
    let pad = +properties.get('--pad').toString();
    let slant = +properties.get('--slant').toString();
    ctx.moveTo(0, 0);
    ctx.lineTo(pad + (geom.width - slant - pad) * multiplier, 0);
    ctx.lineTo(pad + (geom.width - slant - pad) * multiplier + slant, geom.height);
    ctx.lineTo(0, geom.height);
    ctx.fillStyle = c;
    ctx.fill();
  }
})
`}</script>

    <script>{`
  if ("paintWorklet" in CSS) {
  const src = document.querySelector('script[language$="paint"]').innerHTML;
  const blob = new Blob([src], {
    type: 'text/javascript'
  });
  CSS.paintWorklet.addModule(URL.createObjectURL(blob));
}
`}</script>
  </Helmet>
);
render(
  <div>
    <Helm />
    <App />
  </div>,
  document.getElementById('root')
);