问题标签 [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.
konvajs - 如何改变变压器旋转图标的位置
我已经开始 react-konva 了。我正在尝试使用Transfomer。
现在旋转处理程序位于顶部中心,我想将其放置在底部中心、左侧或另一侧。我怎样才能做到这一点?
https://konvajs.org/docs/select_and_transform/Transformer_Styling.html
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 画布重绘自身的代码。
reactjs - 如何为我的 react-konva 形状添加边框?
我有一个带有 TypeScript 的 React 项目。我正在使用 react-konva 包来绘制一些形状。如何在我的形状中添加一个类似于 HTML ( border: 1px solid black
) 的边框?
我的代码:
reactjs - React-konva - 使用鼠标单击用线连接圆
我正在使用react-konva
,并且我有两个Circle
想要连接的组件Line
。我已经通过硬编码实现了这一点,但我想让它具有交互性。
我的目标:当我单击一个Circle
组件时,它会创建一个Line
组件。然后,如果我点击另一个Circle
,两者都会被连接Line
。
我的问题:我不知道该怎么做。我对想法持开放态度。
reactjs - 一旦我更新了 mobx 5,KonvaJs 示例就不起作用
我正在尝试在该 KonvaJs 示例上进行开发:https ://konvajs.org/docs/sandbox/Window_Frame_Designer.html
克隆存储库时,一切正常。但是,一旦我将 mobx 从 4.3.1 更新到 5.15.0,它就会出现该错误;
错误:MobX 注射器:商店“商店”不可用!确保它是由某个 Provider 提供的
有人可以帮我解决这个问题。谢谢。
reactjs - 用 react-konva 反应 DnD
我已经实现了 react DnD 来复制和拖动元素并放入容器中。现在我想实现 react-konva 在它们之间创建一个箭头。如果有人帮助我指导并提供一些关于如何一起使用 react DnD 和 react Konva 的指示,那将非常有帮助。
reactjs - 如何添加为属性并获取 React Konva 元素 ID
我想知道如何将 ID 添加到元素并以类似于e.target.getAttribute("id")
DOM 元素的方式检索它。需要注意的一点是,元素基于作为父组件一部分的数组。为了使元素基于父数组呈现,我在父组件中添加了 and 在子组件中。简而言之,它的结构是这样的。
家长班:
儿童班:
reactjs - 如何将边框半径添加到 react-konva Image 对象?
我有一个Image
组件react-konva
并想添加border-radius: 8px
. 哪种方法最简单?
reactjs - 删除具有相同组件名称的先前形状组件时如何避免形状改变大小和位置?康瓦
我一直在使用 react-konva 遇到这个问题,当我在数组中删除一个形状时,所有形状都会移动到初始位置,并且如果该形状位于已删除形状上方的一个位置并且具有相同的组件名称,例如:deleted == =RegularPolygon 和上面的一个===RegularPolygon,比它占用被删除组件的相同位置以及相同的大小和旋转。我尝试将索引更改为删除时的最远位置,并尝试拼接以删除并放置在数组的顶部,但它仍然无法正常工作。使用 strictMode 会使形状在删除时变大,并且不会保持其初始大小。从数组中删除形状时,我只希望所有形状保持相同的位置、大小和旋转,我该怎么做?
代码很大,但这里是相关的块:
家长说:
移除元素:
移除元素 = () =>{
舞台层:
子组件渲染并返回:
我很乐意展示一个使用 Skype、Slack 或任何其他屏幕共享平台的演示。谢谢