标签: react-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 的文档。任何人都可以帮忙吗？

我正在使用 React-Konva 创建一个 RPG 桌面游戏。我通过拖放制作了无限网格和一些图像令牌。

所以，它工作正常。但是，在寻找另一个功能时，我发现使用 Canvas 实现了这一点，它几乎与我所做的一样，但是使用 spap，形状会像磁性一样被吸引到 Rect 上！

这里是一个示例： 使用 Canvas 进行 Snap
使用 Konva.js 进行 Snap

for (var i = 0; i < (600 / grid); i++) {
  canvas.add(new fabric.Line([ i * grid, 0, i * grid, 600], { stroke: '#ccc', selectable: false }));
  canvas.add(new fabric.Line([ 0, i * grid, 600, i * grid], { stroke: '#ccc', selectable: false }))
} 

有没有办法用 React-Konva 做同样的事情？我发现了与 Konva.js 类似的东西

编辑：

我快到了！！！

const [x, setX] = useState(50)
const [y, setY] …

我正在使用react-konva

当我渲染<Stage />宽度为 750 的元素时，它将渲染<canvas />宽度为 750 * devicePixelRatio 的元素

<Stage width={750} />

将渲染（在 iPhone 7 中）

<canvas width="1500" />

如何禁用此行为？

我正在尝试学习如何通过包react-konva使用canvas。我找到了我需要在 javascript 中编写的确切内容，但我需要像反应组件一样，并在单击按钮时添加矩形的图像。任何人都可以帮我重新组织代码以在反应中显示它......这是我在网上找到的小提琴...... https://jsfiddle.net/kiksy/jqo2h3dx/2/

const stage = new Konva.Stage({
            container: 'container',
            width: window.innerWidth,
            height: window.innerHeight,
            draggable: true
        });

        const layer = new Konva.Layer();
        stage.add(layer);


        const WIDTH = 100;
        const HEIGHT = 100;

        const grid = [
            ['red', 'yellow'],
            ['green', 'blue']
        ];

        const blocks = [
            { w: 150, h: 150 , background: "white" , image: "/img/test2.png" , fullImage: false, title: "" , text: "" },
            { w: 150, h: 150 , background: "white" , image: "/img/person-icon.png" ,  fullImage: false ,title: …

我是 Konva.js lib 的新手，我在 canvas 元素内实现了 img 的拖放，我想向用户指出该 img 是可拖动的，所以我想做这样的事情 ->

有什么想法如何在 Konva.js 中执行此操作吗？谢谢！

我想将舞台的宽度和高度设置为 100%。有点像这样，这样它就会填充父级 div：

<Stage
    width="100%"
    height="100%"
></Stage>

这可能吗？谢谢！

Konva 是否可以沿线/路径对形状（标记、圆形）进行动画处理。我尝试随着时间的推移手动计算位置，但这只有在从 A 到 B 的直线是直线时才可行，但我对贝塞尔曲线和多个路径点感兴趣。

所以我想知道 Konva 是否支持这种事情，或者有人可以指导如何处理这个问题。

我有一个带有 TypeScript 的 React 项目。我正在使用 react-konva 包来绘制一些形状。如何向我的形状添加像 HTML ( border: 1px solid black)那样的边框？

我的代码：

       <Rect
          x={103}
          y={103}
          width={144}
          height={44}
          // here i need a border
          fill="#E2E6EA"
          draggable
          onDragStart={this.handleDragStart}
          onDragEnd={this.handleDragEnd}
        />

我正在努力使用自定义剪辑功能在组形状中应用角半径（在所有侧面）。

这是我的代码和框：

https://codesandbox.io/s/w28nrrj885