问题标签 [vue-konva]

Vue 新手——在探索中学习。

我正在尝试使用自定义对象作为 v-for 情况的数据源。到目前为止，还不行——我承认我不确定如何在 Vue 组件中按名称访问数据。

main.js

可能未直接连接到数据提供者的自定义对象是 roomBuilder。

然后，在我想引用这个对象的组件中，我有这个代码：

这两个 POJO 是：

RoomBuilder.js

和

房间.js

谢谢，对我放轻松。我通常是服务器端的人！我显然接线有误...尝试过

v-for="这个房间。$data.roomBuilder.getRooms()"

v-for="roomBuilder.getRooms() 中的房间"

等等

显然有一些我不明白的魔法正在发生！

谢谢！

包含 v-xxx 项（例如 v-circle）的对象是什么？我想简单地在该对象上调用 hide() ，并认为可能是 ref 播放了一个关键滚动，但这并不成功（得到 this.$refs.testCircle.show 不是一个函数）。

以下是我为说明这一点而创建的代码框。

使用 konva.js，您可以在画布上创建视频组件。在这里您可以看到文档中的示例 ( https://konvajs.org/docs/sandbox/Video_On_Canvas.html )。

现在我正在使用 vue-konva 并且没有组件可以在画布上创建视频。你需要用 v-image 组件来做，但我不能让它工作。vue-konva可以吗？

所以，我一直在使用 vue-konva，我有这样的事情：

目前，如果我想绘制新框，当图像上已有其他 annotationRects 时，会出现一些问题。因为它们在技术上位于 eventBox 和 Rubberbox 之上，所以当光标位于现有 annotationRect 之上时，它们会“阻止”这两个层。

但是，我不想总是让 eventBox 和 RubberBox 在 annotationRect 之上，因为我需要能够与 annotationRect 交互以移动它们、调整它们的大小等。

有没有办法让我重新排序 eventBox、rubberBox 和 annotationRect，即将顺序从原始 eventBox-rubberBox-annotationRect 更改为（从下到上）annotationRect-eventBox-rubberBox 并返回，例如当 vue组件从另一个组件接收事件？

我对 vue-konva 有疑问，我不能在同一层中创建太多形状，例如：

结果我得到了第一个形状和错误：

如何绘制一个多边形，我可以通过单击 vue konva 来设置每个角？我找不到任何v-polygon可以创建预定义多边形而不是交互式多边形的边。

我目前正在解决如何接近图片上非常复杂的布局。我将需要动态更改每个元素的颜色并动态显示其中一些元素的数据。

谁能建议如何解决这个问题？到目前为止，我正在考虑使用这个https://konvajs.org/

布局示例

我正在使用 konvajs 和 vue-konva 将图像定位在矩形区域上。我需要缓存此图像以便对其应用自定义过滤器。

此图像由用户上传，其尺寸可能非常大（例如来自设备相机），并且设备可以是资源有限的智能手机。

对于小图像，一切正常，但是当用户在移动设备上选择大图像（例如 2500x2500）时，图像首先呈现并cache()在图像节点上调用方法时消失。

这似乎取决于设备：在我的笔记本电脑上一切都很好，但在我的智能手机（都是高端设备）上却没有，两者都使用了最新版本的谷歌浏览器。我设法用更大的图像（~6000x6000）在我的笔记本电脑上重现了这个问题。

我真的不知道它是否与 Konva 有关，或者我是否达到浏览器对大文件的限制（这可以解释它取决于设备）。如果是这样，任何建议/解决方法将不胜感激。

最后但并非最不重要的一点是，我需要导出画布以便稍后打印（300dpi 分辨率，最终图像宽度必须在 2300 像素左右），所以我不能减少太多图像尺寸。

您可以使用此链接进行复制。

我目前了解，React Native 环境不支持 react-konva；但是，想知道 vue-konva 是否支持移动应用程序？

或者，如果您可以建议我一种将 konva 画布内容迁移到 android 应用程序的方法？

感谢您的回复。

我正在按照https://konvajs.org/docs/sandbox/Gestures.html上给出的教程在我的应用程序中包含旋转手势。但是在我的应用程序中，我还附加了“tap”事件侦听器，因此每当我尝试使用手势旋转形状时，也会发出“tap”事件，并且在一次点击形状时会发出“tap”事件两次。有什么方法可以防止这种情况发生，通过两指旋转手势进行旋转时，不应发出“点击”事件？有什么方法可以在 konvajs 中使用 stopImmediatePropagation() 吗？

https://jsfiddle.net/pudio/z68nc5p3/2/