konvajs相关内容

Konvajs/Vue-Konva使用连接器动态连接形状

我在Vuejs/Nuxt应用程序中使用Konvajs/Vue-Konva。我使用Konva在运行时动态创建Rect形状。现在我想用某种Connectors把不同的Rect Shapes连接起来,这样我就可以有source Rect和Target Rect的逻辑,来建立Parent-Child的关系。 我正在使用与shapes相同的方法创建connectors,但由于某些原因,它未按预期工作。 ..
发布时间:2022-02-25 12:37:55 前端开发

创建Konvajs形状和连接基于按钮单击事件动态创建

我希望在我的应用程序中使用Vue-Konva/Konvajs创建Rectangle Shapes和Connections。我不想创建加载Static值,而是希望在用户单击Add Node按钮时创建Shapes,在用户单击Add Connector按钮时创建Connectors,并在Shapes之间建立连接。 我查看了一些内容,可以使用mouse events执行此操作,但无法将其转换为but ..
发布时间:2022-02-25 12:24:25 前端开发

React 中的 Konva 无限网格

我,我正在尝试通过一个包 react -konva 来学习如何使用画布.我找到了我需要用 javascript 编写的确切内容,但我需要让它像反应组件一样,并在按钮单击矩形的地方添加图像.谁能帮我重新组织代码以在反应中显示它......这是我在网上找到的小提琴......https://jsfiddle.net/kiksy/jqo2h3dx/2/ const stage = new Konva. ..
发布时间:2022-01-18 10:01:42 前端开发

Konva - 使用旋转并保持在界限内

我正在使用 Konva 在网页上创建一个区域.我为我的矩形创建了一个 dragBoundFunc 函数,检查 pos.x 和 pos.y 以及 canvas 和 rect 的宽度,这工作正常 - 矩形仅在拖动时停留在该区域中. 当我将矩形旋转 90 度时,我的问题就出现了.现在,当我检查 getClientRect().width 和 getClientRect().height 时,宽度小 ..
发布时间:2022-01-17 11:59:28 前端开发

将形状从调色板拖到 Konvajs 舞台上

最近有人在 Konvajs 聊天流中询问了一个从调色板拖放到 Konvajs 库前面的 HTML5 画布上的示例.没有现成的例子,我很好奇如何实现它. 我在代码笔中回答了这个问题,但决定在此处发布以供(我自己的)将来参考.请参阅下面的答案. 解决方案 这是我使用jquery UI draggable &可滴滴.Konvajs 需要 jquery,所以使用 jquery UI 只是进一 ..
发布时间:2022-01-17 11:53:16 前端开发

在 HTML5 画布上动画绘制路径

我的问题是如何为两点之间的路径绘制动画. 考虑两点之间的曲线或路径,A &B. 我可以使用 Konvajs 中的线条绘制功能在画布上轻松绘制. 但是,我真正想要的是对线的显示进行动画处理,使其从 A 点开始并逐渐绘制到 B 点.显示应该是动画的,这样我就可以应用令人愉悦的缓动. 作为一个比较示例,请参阅本网站 https://coggle.it/ 上的简短视频,其中视频展示了新盒 ..
发布时间:2022-01-17 11:29:58 前端开发

如何在vuejs中使用konvajs使用一条线连接2个对象?

早上好,我发现自己在使用 Konvajs 库,https://github.com/konvajs/vue-konva 有以下文档:https://konvajs.org/docs/sandbox/Connected_Objects.html,但我无法用 vuejs 实现它 因为我需要做的是选择对象1时,我可以拖动并形成箭头,选择对象2时,它们是链接的 目前我已经构建了以下内容: ..
发布时间:2021-09-20 19:58:46 前端开发

Vue.js Konva 库显示一个简单的图像,我错过了什么?

所以我浏览了 vue-konva 页面上列出的示例代码.虽然它对创建形状进行了采样,但我对它的理解足以尝试显示一个简单的图像来开始.这是基本代码.我的问题在于如何将实际图像文件附加到“图像"属性.或者如果我错过了其他东西. 通过 Konva 显示图像 ..
发布时间:2021-09-20 18:54:08 前端开发

使用 Typescript 和 React.Konva 指定 onClick 事件类型

我正在尝试摆脱我的 tslint 错误 'any' 的类型声明失去类型安全性. 但我正在努力弄清楚事件的正确类型是什么. 我正在通过 Lynda "构建和部署全栈 React 应用程序",同时尝试将其转换为 Typescript. 以下是导致问题的具体线路: onClick={(event: any) =>{makeMove(ownMark, event.target.index)} ..
发布时间:2021-07-03 20:52:57 其他开发

使用鼠标拖放选择形状不起作用 - React Konva

我正在尝试使用 React konva 的 Transformer 创建多个形状选择.它可以很好地用鼠标单击一个形状然后单击另一个形状,创建两个形状的完整选择.我希望通过鼠标拖放来实现这一点.为此,我在 文档中提到了舞台上的鼠标向上、向下和移动和点击功能.没有错误,但鼠标拖动选择不起作用.我希望选择与文档演示中给出的完全相同. 这是我的演示沙箱 链接. 解决方案 有很多方法可以做到这 ..
发布时间:2021-07-03 19:34:38 其他开发

在KonvaJS上将图像蒙版与globalCompositeOperation一起使用?

我正在使用Konva.js框架,并尝试在另一个框架上应用图像蒙版.该代码已从此帖子中完全复制.在这个 jsfiddle示例中,做了一些小的修改以添加背景(Rect). 问题是背景没有正确绘制.要在代码中看到它的实际效果,请在一行中添加注释/取消注释(以查看该问题的实际效果).有人有什么想法要实现这一目标吗? 最佳 let stage = new Konva.Stage({容器:“容器 ..
发布时间:2021-05-31 20:17:38 前端开发

使用React和Konva的自适应画布

我使用React和Konva库画一条简单的线.但是,当我调整屏幕大小时,该行不在屏幕外.那么,如何使它具有响应能力? 这是我的代码: import从“反应"中反应;从'react-konva'导入{Stage,Layer,Line};App类扩展了React.Component {构造函数(道具){超级(道具);}使成为() {返回 ( ..
发布时间:2021-05-29 20:50:30 前端开发

React中的Konva无限网格

我正在尝试通过包react -konva学习如何使用画布.我找到我需要用javascript写的确切内容,但是我需要使它像react组件并在单击按钮时添加矩形的图像.谁能帮助我重组代码以在响应中显示它....这是我在网上发现的小提琴... https://jsfiddle.net/kiksy/jqo2h3dx/2/ const stage = new Konva.Stage({容器:“容器", ..
发布时间:2021-05-13 19:32:54 前端开发

如何在Konvajs中向Konva.Image()对象添加纹理?

我遵循了这篇文章的答案;用纹理图案填充图像,它运行良好. 是否可以使用 KonvaJS 做同样的事情? 解决方案 AFAIK,KonvaJS尚不支持创建纹理叠加层所需的合成.但是 Konva.Image 可以采用本地html5 canvas元素作为其图像源,因此只需在html5 canvas元素上进行覆盖,然后将其提供给Konva: var textureImage = new Ko ..
发布时间:2021-04-21 19:20:17 前端开发

有没有一种方法可以通过使用Konva js向外/向内拖动圆周来调整圆的大小?

使用Konva js,是否有一种方法可以拖动圆的圆周而不显示调整大小元素,以便调整圆的大小(使半径增大)? 使用变压器-显示缩放器,并通过更改比例来拉伸矩形.我想在不显示调整大小的情况下实际调整圆的大小(较大的半径). 所有帮助将不胜感激.谢谢 解决方案 您可能需要使用两个圆圈.一个圆形是您的主要形状,另一个圆形是检测笔触事件的形状(第二个圆形可以透明,如果您不想在屏幕上看到它 ..
发布时间:2021-04-21 19:19:15 前端开发

如何使用HMTL5 Javascript Canvas使三个形状的交集发生碰撞并删除不发生碰撞的零件?

我最近针对KonvaJs发表了一个类似的问题点击区域,然后以某种方式应用剪辑功能在发生碰撞的零件上只能获得所需的结果.我看到的这种解决方案的问题是,如果每个形状都是可拖动的,则这些形状可能会被裁剪,但不会跟随所拖动的形状. 我的另一个想法是检测并剪切碰撞的区域,然后删除没有碰撞的区域,然后将它们组合在一起.(我不知道如何将它们切成小块……) 我不确定上述任何想法是否是解决该问题的正确/ ..
发布时间:2021-04-21 19:16:09 前端开发

如何对konva放大滚动做出反应

您好,我想在我的react项目中的rect上实现缩放功能,但是找不到找到它的方法吗?有什么帮助吗? 这是我发现的html konva示例: https://konvajs.github.io/docs/sandbox/Zooming_Relative_To_Pointer.html 解决方案 import React,{Component} from'react';从"konva ..
发布时间:2021-04-21 19:14:17 其他开发

用konva在画布上绘制像表格这样的电子表格

我正在使用HTML5画布和Konvajs画布库来进行类似于甘特图的任务显示. 将甘特图解构成其各个组成部分,目前使我产生如下视图.这里1是任务列表,2是任务栏区域,3是任务栏,4是文本单元格. 对于这个问题,我正在寻找构建1&的代码. 4.将要显示的数据将在带有嵌套任务列表的普通JS对象中传递,其中每个任务都有一个数字,名称,分配给人员的姓名,开始日期,结束日期,工期和完成百分比. ..
发布时间:2020-11-24 18:56:43 其他开发