使用成帧器运动时处理透明背景

Question

我目前正在为我正在开发的网站设计 UI，并且有一个具有透明背景的 png 资源。我可以成功地使图像的背景显示为透明，但是使用此 Cursor 效果时，“hitbox”包含透明背景。

我希望仅当用户的光标悬停在图像主题（而不是透明像素）上时应用该效果。为此，我需要使用其他库吗？预先感谢

我现有的代码：

import React from "react";
import { Cursor } from "./cursorHover";

type ImageProps = React.ImgHTMLAttributes<HTMLImageElement> & {
  alt: string;
  width?: number;
  height?: number;
  hover?: JSX.Element;
};

const Image: React.FC<ImageProps> = (
  { alt, width, height, hover, ...props }: ImageProps,
  ref
) => {
  return (
    <div style={{ position: "relative" }}>
      {hover && (
        <Cursor
          attachToParent
          variants={{
            initial: { height: 0, opacity: 0, scale: 0.3 },
            animate: { height: "auto", opacity: 1, scale: 1 },
            exit: { height: 0, opacity: 0, scale: 0.3 },
          }}
          transition={{
            type: "spring",
            duration: 0.3,
            bounce: 0.1,
          }}
          className="overflow-hidden"
        >
          {typeof hover === "boolean" ? <div>hi</div> : hover}
        </Cursor>
      )}
      <img {...props} alt={alt} width={width} height={height} />
      <canvas ref={ref} style={{ display: "none" }} />
    </div>
  );
};

export default Image;

Answer 1

要将光标效果仅应用于图像的非透明区域，请使用 Cursor 组件的 ClipPath CSS 属性，该属性允许您设计遮盖元素内容的形状。

以下是修改图像组件以使用 ClipPath 的方法：

JavaScript
import React from "react";
import { Cursor } from "./cursorHover";

type ImageProps = React.ImgHTMLAttributes<HTMLImageElement> & {
  alt: string;
  width?: number;
  height?: number;
  hover?: JSX.Element;
};

const Image: React.FC<ImageProps> = (
  { alt, width, height, hover, ...props }: ImageProps,
  ref
) => {
  return (
    <div style={{ position: "relative" }}>
      {hover && (
        <Cursor
          attachToParent
          variants={{
            initial: { height: 0, opacity: 0, scale: 0.3 },
            animate: { height: "auto", opacity: 1, scale: 1 },
            exit: { height: 0, opacity: 0, scale: 0.3 },
          }}
          transition={{
            type: "spring",
            duration: 0.3,
            bounce: 0.1,
          }}
          className="overflow-hidden"
          style={{ clipPath: `url(#image-mask)` }}
        >
          {typeof hover === "boolean" ? <div>hi</div> : hover}
        </Cursor>
      )}
      <img {...props} alt={alt} width={width} height={height} />
      <canvas ref={ref} style={{ display: "none" }} />
      <svg width={width} height={height} style={{ position: "absolute", top: 0, left: 0, pointer-events: "none" }}>
        <defs>
          <clipPath id="image-mask">
            <image href={props.src} width={width} height={height} xlinkHref={props.src} />
          </clipPath>
        </defs>
      </svg>
    </div>
  );
};

export default Image;

clipPath 元素是在 SVG 中创建的，使用 href 属性来引用图像。

使用 style={{ ClipPath:url(#image-mask)}} 属性将 ClipPath 应用于 Cursor 组件。

这有效地屏蔽了光标组件，使其仅出现在图像的非透明部分上。

通过进行这些更改，光标效果现在应仅应用于图像的主题，不包括透明背景。