首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >在react-konva Transformer中可以使用图标作为旋转角色吗?

在react-konva Transformer中可以使用图标作为旋转角色吗?
EN

Stack Overflow用户
提问于 2020-08-18 00:54:14
回答 1查看 511关注 0票数 1

我想在react-konva transformer中使用一个自定义图标作为rotater,如下所示:

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-08-21 02:01:28

目前(使用konva@7.0.4),还没有官方的应用程序接口可以对转换器的内部结构进行那么多的更改。

但作为一种变通办法,您可以通过修补transformer.update()函数将自己的样式添加到任何锚中。

代码语言:javascript
运行
复制
import React from "react";
import { render } from "react-dom";
import { Stage, Layer, Rect, Transformer } from "react-konva";
import Konva from "konva";
import useImage from "use-image";

const ICON =
  "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgNDI2LjY2NyA0MjYuNjY3IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0MjYuNjY3IDQyNi42Njc7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxnPg0KCQk8cGF0aCBkPSJNMjEzLjMzMyw4NS4zMzNWMEwxMDYuNjY3LDEwNi42NjdsMTA2LjY2NywxMDYuNjY3VjEyOGM3MC43MiwwLDEyOCw1Ny4yOCwxMjgsMTI4cy01Ny4yOCwxMjgtMTI4LDEyOHMtMTI4LTU3LjI4LTEyOC0xMjgNCgkJCUg0Mi42NjdjMCw5NC4yOTMsNzYuMzczLDE3MC42NjcsMTcwLjY2NywxNzAuNjY3UzM4NCwzNTAuMjkzLDM4NCwyNTZTMzA3LjYyNyw4NS4zMzMsMjEzLjMzMyw4NS4zMzN6Ii8+DQoJPC9nPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPC9zdmc+DQo=";
const App = () => {
  const shapeRef = React.useRef();
  const trRef = React.useRef();
  const [icon] = useImage(ICON);

  React.useEffect(() => {
    if (!icon) {
      return;
    }

    const tr = trRef.current;
    tr.nodes([shapeRef.current]);

    var rot = tr.findOne(".rotater");

    // generate rotater background
    const iconCanvas = document.createElement("canvas");
    iconCanvas.width = rot.width();
    iconCanvas.height = rot.height();

    const ctx = iconCanvas.getContext("2d");
    ctx.fillStyle = "white";
    ctx.fillRect(0, 0, iconCanvas.width, iconCanvas.height);
    ctx.drawImage(icon, 0, 0, iconCanvas.width, iconCanvas.height);

    tr.update = function () {
      Konva.Transformer.prototype.update.call(tr);
      var rot = this.findOne(".rotater");
      // disaable fill
      rot.fill(null);
      // enable icon
      rot.fillPatternImage(iconCanvas);
    };
    tr.update();
    tr.getLayer().draw();
  }, [icon]);

  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        <Rect
          x={50}
          y={70}
          fill="grey"
          width={100}
          height={100}
          ref={shapeRef}
        />
        <Transformer ref={trRef} />
      </Layer>
    </Stage>
  );
};

render(<App />, document.getElementById("root"));

https://codesandbox.io/s/react-konva-rotater-customization-isn5l?file=/src/index.js

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/63455286

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档