问题标签 [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 回答
1119 浏览

reactjs - 是否可以将 react-konva 应用到 React Native 项目中?

我从谷歌看到了 react-konva 弹跳球示例https://codesandbox.io/s/5qvyyyjrx,我尝试将它应用到我的 React Native 应用程序中。

但没有运气,我得到这个错误不变违规视图配置未找到来自Stage (import { Stage } from "react-konva";)的名称 div 。

我可以知道解决这个问题的任何方法,并且 react-konva 可以在 React Native 中应用吗?

请指教。谢谢你。

0 投票
1 回答
1176 浏览

javascript - 在 React Konva 中的 Canvas 上播放视频

基于如何将视频渲染到画布的Konva文档,我想通过直接从Konva.Image实例访问视频参考来播放视频。下面是一个人为的示例,用于模拟我从​​组件外部动态播放视频的目标。即使imageRef.current.image()返回视频元素引用,以下内容也不会按预期播放视频。关于如何访问视频参考的任何建议?

0 投票
0 回答
1481 浏览

javascript - React Konva Transformer 错误“无法读取未定义的属性 'getStage'”

我在 React 16.8 中使用 Konva 4.0.18。应用程序,迄今为止在独立 (CRA) 中运行良好。当将此工作解决方案集成到现有的应用程序框架中时,我遇到了一个在转换矩形时出现的错误(即使再次单击时矩形转换停止,也会在移动鼠标时不断出现):

Transformer.js:316 未捕获的类型错误:无法在默认被动事件.js:6 处读取 e._handleMouseMove (Transformer.js:316) 处未定义的属性“getStage”

函数“findOne”的调试器屏幕截图,该函数返回“未定义”

有一个Masking组件可以导入 Konva 的Stage, LayoutandImage以及MaskingRectangle可以转换的。

我的MaskinRectangle组件看起来像这样:

一些想法/猜测:我想知道为什么它作为一个独立的应用程序工作得很好,但是当包含在现有的 HTML 页面中时会失败(顺便说一下,它还包括 jquery 和 Angular 1.x 等库)。

也许您可以给我一些提示如何搜索或回答以下问题之一:

  1. 在 React 应用程序本身之外的主体和其他元素上注册了几个事件处理程序(单击、鼠标移动),但它们不应该影响反应应用程序,还是我错了?
  2. 我看到错误中提到了default-passive-events。这可能与问题有什么关系(如果是,如何避免)?
  3. 是否更有可能是 Konva.js 库有问题(见附件截图)

提前感谢您提供的任何帮助、评论、建议在哪里/如何查看

0 投票
1 回答
355 浏览

react-konva - react-konva中的图像旋转

我需要在使用之前旋转图像this.setState,为什么上面的代码不起作用?

0 投票
1 回答
1407 浏览

javascript - 反应:画布drawImage没有更新画布

我正在使用 react konva 在画布上绘制图像。我在舞台元素中有两个不同的图层(konva 中的画布)。一张图片是预先确定的,一张在运行时通过输入更新。两张图片都显示得很好,但是当我尝试保存它们时,来自输入的只是一个黑色 png,而不是我选择的图片。

Javascript:

单击输入时的图像上传。

它像我想要的那样在屏幕上显示图像并且看起来它可以工作,但是,如果我想将画布保存为 png 文件,它就不再存在了。

保存功能:

JSX:

该应用程序的目标是保存包含两张图片的舞台,但正如我所说,背景总是黑色的,而灯正在显示。

提前致谢!

0 投票
1 回答
1984 浏览

reactjs - 为什么我在 chrome 开发工具性能面板中得到 30 fps,但 JS 和 React 都说是 60?

我正在尝试使用 react 开发经典游戏教程how-to-make-a-simple-html5-canvas-game

一切都很顺利,直到我发现我的动作有点小故障,在线测试链接代码

在此处输入图像描述

虽然用 JS 编写的原始游戏要流畅得多:

在此处输入图像描述

所以我深入研究了一下,发现实际的 fps 是不同的:

反应:

在此处输入图像描述

纯JS: 在此处输入图像描述

奇怪的是,在我向 calc fps 添加了一些代码之后,我在 react hook 和 useEffect 中都得到了“60 fps”:

在此处输入图像描述

定位问题

我添加了一个对比鲜明的画布,每次heroPos更新时都会呈现。它让我在 chrome 开发工具中获得 60FPS。现在问题肯定是由我正在使用的画布库引起的:react-konva。

定位问题

我找到了问题,它是由使用的batchDraw react-konva引起的:

改变这条线后,我现在可以得到 60fps 的移动。

根据他们的文档,batchDraw 会绘制the next animationFrame。但react它本身也用于RAF触发下一次道具更新,所以batchDraw这里发生2 frames在 i 之后setHeroPos()

解决方案:

我要向他们的项目提交一个拉取请求。

0 投票
1 回答
417 浏览

reactjs - 无法读取未定义 Konva.js 的属性“应用”

我正在尝试使用方法查找对象find。它只是代码的一部分,只是为了演示问题。一般来说,我需要ShapesKonva框架的数组中找到对象。我在渲染功能组件后使用 refs 得到它。

我在库中得到错误。是 konva 框架库吗?如何通过另一种方式从数组中找到元素?

TypeError:无法读取未定义集合的属性“应用”。[如发现]

这是我在 StackOwerflow 上的第一个问题,很抱歉这个问题的格式不完全。我在这里做了一个例子

UPD:通过使用findIndex并通过 circles[index] 获得值解决了问题。但是剩下 1 个问题:它是库(框架)的错误吗?

0 投票
1 回答
238 浏览

konvajs - 同时拖动/移动对象的最有效方法是什么?

这更像是一个通用的设计问题,而不是关于一段代码的特定问题。让我做一个大纲:

想象一个包含 3 个或更多点的折线的画布。这些点中的每一个都有一个圆形对象作为可拖动手柄。用户可以移动拖动手柄,该操作会更新仅包含这 3 个坐标的反应上下文。新的上下文会触发画布的重绘,使用新坐标更新折线和拖动手柄,同时在拖动发生时执行“对齐轴”和“对齐到最近的其他向量”检查。

我只使用功能组件(React.FC),并在需要的地方使用钩子共享状态。

我在拖动处理程序上使用 requestAnimationFrame() 来消除更新,使其尽可能接近客户端的最大刷新率。目标是保持在 60fps。

问题:

react-konva 中附加到舞台的组件的重新渲染是否总是会触发实际画布上所有内容的重绘,或者 react-konva 是否会跟踪?

在这种情况下是否建议使用 vanilla Konva 而不是 react-konva 抽象,以避免过度重绘,而仅在拖动操作结束后使用 react 上下文来保持状态?

有没有更有效的方法来处理我目前不知道的这个用例?

0 投票
3 回答
3097 浏览

javascript - 在 react-konva 中更改 Hover 上的光标

我正在使用 react-konva 为应用程序创建 UI。我想要它,以便在将鼠标悬停在 Rect 上时光标变为指针。有关于如何使用 konva 而不是 react-konva 的文档。任何人都可以帮忙吗?

0 投票
1 回答
991 浏览

javascript - 使用 react-konva 在 Canvas 上制作 GIF 动画

我正在尝试使用 react 为应用程序创建 UI。我正在使用 react-konva 创建 2D 画布。我已经想出了如何将图像导入到此画布上,但在尝试为 gif 设置动画时遇到了麻烦。有关于如何在 konva 中执行此操作的文档,但我似乎无法将其转换为 react-konva。

此处提供了在 konva 中执行此操作的文档。