标签: konva

这里三角形的边界框没有正确地连接到三角形的末端，所有正多边形的情况都是如此。所以当我们尝试捕捉形状时，由于形状没有正确地捕捉到正多边形的末端针对上述问题。这是链接：- https://codesandbox.io/s/react-konva-basic-demo-btuum?file=/index.js

安装并导入 Konva 和 React-konva 后，我的 jest@enzyme 测试无法运行并出现以下错误：

\xe2\x97\x8f 测试套件运行失败

Jest encountered an unexpected token\n\nThis usually means that you are trying to import a file which Jest cannot parse, e.g. it's not plain JavaScript.\n\nBy default, if Jest sees a Babel config, it will use that to transform your files, ignoring "node_modules".\n

细节：

C:\\avius\\fortest\\node_modules\\konva\\lib\\Core.js:1\n({"Object.<anonymous>":function(module,exports,require,__dirname,__filename,global,jest){export { Konva } from './_CoreInternals.js';\n                                                                                         ^^^^^^\n\nSyntaxError: Unexpected token 'export'\n\n  at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:1350:14)\n  at Object.<anonymous> (node_modules/react-konva/lib/ReactKonvaCore.js:19:13)\n

它是一个新创建的 create-react-app 用于测试此错误，因此没有什么特别的。\n我没有 babel.rc，也没有 babel.config.js 或 jest.config.js 文件。（因为我尝试了很多设置，都不起作用。） …

我正在使用 react-konva 为应用程序创建 UI。我希望它使光标在悬停在 Rect 上时变为指针。有关于如何使用 konva 但没有关于 react-konva 的文档。任何人都可以帮忙吗？

在 VueJS 中使用 Konva 时，如何将背景图像添加到我的舞台或图层？

我尝试fillPatternImage在config图层和舞台上应用，但没有效果。我在文档中找不到任何关于此的内容，除了可能在其中一层中添加一个大矩形并填充它之外。有什么想法如何做到这一点？

这是我在单个形状上使用它的一些代码。我可以在图层/组/舞台级别上做类似的事情来设置背景吗？

<v-stage
  ref="stage"
  :config="configKonva"
>
  <v-layer v-if="image" ref="layer">
    <v-regular-polygon
      v-for="item in list"
      :key="item.id"
      :config="{
        x: item.x,
        y: item.y,
        sides: 6,
        rotation: item.rotation,
        id: item.id,
        numPoints: 5,
        radius: 30,
        outerRadius: 50,
        opacity: 0.8,
        fillPatternImage: image,
        fillPatternRepeat: 'no-repeat',
        fillPatternOffset: {
...

所以我正在使用 KonvaJS 和 KonvaReact 构建一个 UML 绘图工具，为此我需要将形状与线条连接起来。我在网站上看到了有关连接对象的教程https://konvajs.org/docs/sandbox/Connected_Objects.html。

他们使用一个函数get_connecter_points根据圆上的弧度计算直线的位置。

function getConnectorPoints(from, to) {
        const dx = to.x - from.x;
        const dy = to.y - from.y;
        let angle = Math.atan2(-dy, dx);

        const radius = 50;

        return [
          from.x + -radius * Math.cos(angle + Math.PI),
          from.y + radius * Math.sin(angle + Math.PI),
          to.x + -radius * Math.cos(angle),
          to.y + radius * Math.sin(angle)
        ];
      }

我试图想出一个模拟函数，但无法想出一个好的解决方案或找到一个好的例子。正如您在图像中看到的，我刚刚在函数中返回了 from x 和 y 以及 to x 和 y，因此这些线将放置在每个方块的左上角。

该函数的目标应该是将线放置在正方形一侧的中间和正方形的正确一侧。所以当 to 方块放在下面时，它应该出现在底部。

因此，如果有人有解决方案，我们将不胜感激。