问题标签 [react-konva]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
645 浏览

konvajs - 如何改变变压器旋转图标的位置

我已经开始 react-konva 了。我正在尝试使用Transfomer。

现在旋转处理程序位于顶部中心,我想将其放置在底部中心、左侧或另一侧。我怎样才能做到这一点?

https://konvajs.org/docs/select_and_transform/Transformer_Styling.html

0 投票
1 回答
1157 浏览

javascript - Konva.js 用文本在 Img 元素周围虚线描边

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

例子

任何想法如何在 Konva.js 中做到这一点?谢谢!

0 投票
1 回答
722 浏览

javascript - 将 WebFontLoader 与 React Konva 一起使用会导致文本偏移?

我正在尝试使用 Web 字体和 React Konva 画布库在画布上绘制一些文本数据。我正在使用 WebFontLoader 库加载网络字体。

在字体完全加载之前当然会有短暂的延迟。但是,一旦加载了字体,文本就会被绘制在不正确的位置,并且在重新绘制之前不会自行纠正。

我注意到这个问题只发生在对齐center或对齐的文本上right,而对齐的left文本没有这样的问题。

我还没有找到任何其他帖子讨论这个问题以及如何解决它。创建组件的引用并在字体加载完成后调用draw()forceUpdate()使用 WebFontLoader 不会导致元素重新调整,只会修改其内容。

我在 CodeSandbox 上创建了一个最小的可重现示例:https ://codesandbox.io/s/react-konva-webfonts-6engr

这是一个演示该问题的 GIF。

示范

请注意文本相对于行的位置,该行具有静态位置。文本首先以错误的字体加载(请注意,在我的完整应用程序中,我具有隐藏画布直到加载字体和图像的功能),然后更改为正确的字体,但处于偏移位置,并且直到文本框被修改。

我希望看到 WebFontLoader 的替代方案,它以 Konva 可以理解的方式加载字体,或者强制 Konva 画布重绘自身的代码。

0 投票
1 回答
1498 浏览

reactjs - 如何为我的 react-konva 形状添加边框?

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

我的代码:

0 投票
1 回答
834 浏览

reactjs - React-konva - 使用鼠标单击用线连接圆

我正在使用react-konva,并且我有两个Circle想要连接的组件Line。我已经通过硬编码实现了这一点,但我想让它具有交互性。

我的目标:当我单击一个Circle组件时,它会创建一个Line组件。然后,如果我点击另一个Circle,两者都会被连接Line

我的问题:我不知道该怎么做。我对想法持开放态度。

0 投票
1 回答
162 浏览

reactjs - 一旦我更新了 mobx 5,KonvaJs 示例就不起作用

我正在尝试在该 KonvaJs 示例上进行开发:https ://konvajs.org/docs/sandbox/Window_Frame_Designer.html

克隆存储库时,一切正常。但是,一旦我将 mobx 从 4.3.1 更新到 5.15.0,它就会出现该错误;

错误:MobX 注射器:商店“商店”不可用!确保它是由某个 Provider 提供的

有人可以帮我解决这个问题。谢谢。

0 投票
0 回答
122 浏览

reactjs - 用 react-konva 反应 DnD

我已经实现了 react DnD 来复制和拖动元素并放入容器中。现在我想实现 react-konva 在它们之间创建一个箭头。如果有人帮助我指导并提供一些关于如何一起使用 react DnD 和 react Konva 的指示,那将非常有帮助。

0 投票
1 回答
373 浏览

reactjs - 如何添加为属性并获取 React Konva 元素 ID

我想知道如何将 ID 添加到元素并以类似于e.target.getAttribute("id")DOM 元素的方式检索它。需要注意的一点是,元素基于作为父组件一部分的数组。为了使元素基于父数组呈现,我在父组件中添加了 and 在子组件中。简而言之,它的结构是这样的。

家长班:

儿童班:

0 投票
2 回答
449 浏览

reactjs - 如何将边框半径添加到 react-konva Image 对象?

我有一个Image组件react-konva并想添加border-radius: 8px. 哪种方法最简单?

0 投票
1 回答
336 浏览

reactjs - 删除具有相同组件名称的先前形状组件时如何避免形状改变大小和位置?康瓦

我一直在使用 react-konva 遇到这个问题,当我在数组中删除一个形状时,所有形状都会移动到初始位置,并且如果该形状位于已删除形状上方的一个位置并且具有相同的组件名称,例如:deleted == =RegularPolygon 和上面的一个===RegularPolygon,比它占用被删除组件的相同位置以及相同的大小和旋转。我尝试将索引更改为删除时的最远位置,并尝试拼接以删除并放置在数组的顶部,但它仍然无法正常工作。使用 strictMode 会使形状在删除时变大,并且不会保持其初始大小。从数组中删除形状时,我只希望所有形状保持相同的位置、大小和旋转,我该怎么做?

代码很大,但这里是相关的块:

家长说:

移除元素:

移除元素 = () =>{

舞台层:

子组件渲染并返回:

我很乐意展示一个使用 Skype、Slack 或任何其他屏幕共享平台的演示。谢谢