Konva是一个HTML5 Canvas JavaScript框架,支持桌面和移动应用程序的高性能动画,转换,节点嵌套,分层,过滤,缓存,事件处理。
基于有关如何将视频渲染到画布的 Konva 文档,我想通过直接从 Konva.Image 实例访问视频引用来播放视频。下面是一个贡献...
这里有一个 Vanquished Wombat 发布的例子 该示例使用 Konva Group 中的 Konva Rect 和 Konva Image。是否有可能使用 Konva Line 达到相同的效果(有 P...
我正在使用 KonvaJS 绘制一些图形并制作简单的动画。 有时用户放大页面,绘制的画布变得模糊。 我注意到如果页面开始放大,模糊...
我使用 React-Konva 并尝试制作一个具有可扩展性的有限大小的工作空间(如在 photoshop 中)。因此,当您缩放工作区窗口时,它开始在
Konva js | Transformer 两次调用 onDragMove
我有“变形金刚”和几个封闭的“线”。 对于 Line onDragMove,我定义了一个函数,该函数可以手动更改 Line 的 x 和 y。函数首先得到矩阵...
Konva getContext('2d').getImageData().data 在不同的分辨率和缩放下给出错误的数据
我最近开始使用 Konva,一切正常。我在 1920x1080 的显示器上以 150% 的缩放比例打开同一个 HTML 页面,发现数据点数组在这个时候出错了
我想知道如何在 Konva.js 上进行布尔运算? 我想从 Konva.Rect 中减去 Konva.Line。 是否有任何内置函数,或者我需要一个外部库?
我正在尝试获取变压器边界框的锚点位置(即围绕具有 4 个圆的多边形形状的蓝色矩形的 8 个点) 现在只有当形状是矩形时……
我有不透明的矩形。我需要不透明度来显示网格。但是,当一个矩形位于另一个矩形上方时,颜色会混合。 如何解决?就像它是具有更高 z-index 的矩形的白色背景。 ...
Konva/react-konva - 从 JSON 恢复画布元素
我正在创建一个使用 react-konva 和 Konva 作为绘图板的 React 应用程序。当前,当用户单击“保存”按钮时,它会获取...的“屏幕截图”(使用 toDataUrl)
我正在使用 react-konva (Konva),我需要通过单击角点并将其拖到对角角点上来防止旋转形状(矩形)。这会将矩形旋转 180 或 -1 ...
在konva中为什么使用fillLinearGradientColorStops api在rect中画对角线时颜色不均匀
*场景:* 我使用 konva 在矩形中绘制对角线, rect api fillLinearGradientColorStops 满足我的需要, 当 fillLinearGradientColorStops Array length 的值小于 200 时,...
我正在尝试使用 Vue 库在 KonvaJS 上构建应用程序。 我有一个组层,我在其中绘制一个圆圈并将图像放置在该组中。 我正在尝试使用 Vue 库在 KonvaJS 上构建应用程序。 我有一个组层,我在其中绘制一个圆圈并将图像放置在该组中。 <v-group v-for="item in listGroup_Logo" :key="item.name" :ref="item.name" :config="item" @dblclick="check" @dragstart="handleDragStart" @dragend="handleDragEnd" > <v-circle v-for="item in listCircle_Logo" :key="item.name" :ref="item.name" :config="item" @dragstart="handleDragStart" @dragend="handleDragEnd" /> <v-image v-for="item in listLogo" @dragstart="handleDragStart" @dragend="handleDragEnd" :ref="item.name" :key="item.name" :config="item" :keyup.delete="deleteItemFromKey" /> </v-group> 目标是根据圈子/组区域裁剪图像。最终用户也可以集体调整组元素的大小。 正如您在下面看到的那样,调整组的大小会影响圆形笔触。 为了实现这一点,我定义了要在组层内部传递的基本配置数据集listGroup_Logo,因此该配置数据在初始渲染时呈现 listGroup_Logo: [ { clipFunc: (ctx) => { ctx.arc(50, 50, 30, 0, Math.PI * 2, false); }, draggable: true, x: 50, y: 50, name: "Group1676367620342", type: "group", }, ], 为了添加拖放功能,我在 @mousedown 组件上跟踪 @touchstart 和 v-stage 事件,并定义了一个方法 handleMousedown 来做进一步的修改 我正在尝试获取 x,y 位置以及 scaleX 和 scaleY 值并尝试更新圆圈配置: this.listCircle_Logo[objIndex] = e.target.attrs; let scaleX = typeof e.target.attrs.scaleX === "undefined" ? 1 : e.target.attrs.scaleX; let scaleY = typeof e.target.attrs.scaleY === "undefined" ? 1 : e.target.attrs.scaleY; let obj = { clipFunc: (ctx) => { ctx.arc( 50 * scaleX, 50 * scaleY, 30 * scaleX, 0, Math.PI * 2, false ); }, }; this.listGroup_Logo[0].clipFunc = obj.clipFunc; 但是圆圈没有更新它的值。见下图: 我为我的代码制作了一个沙箱。你可以在这里找到它:https://codesandbox.io/s/bold-fog-ivccnt?file=/src/App.vue 请告知如何在不影响笔画或圆圈的情况下调整整个组的大小。 谢谢。
我使用KonvaJS在画布上创建文本。而且我可以使用Transformer冻结文本。绘制时,原点保持在中心位置,因为我希望这里没有问题。然而,当我想使用 ...
是否可以正确理解为Konva的舞台不识别SHIFT+dblclick?在我下面的代码中,(1)没有实现------是的,我想实现(1)。当双击时,(2)...。
我在这个问题上有点被卡住了,我想根据图层的中心而不是鼠标指针来缩放。我想根据图层的中心而不是鼠标指针来缩放。这里是Konva的演示,我是从https:/konvajs.orgdocssandbox......得到的。
如何让KonvaJs舞台的使用区域作为高度宽度属性传递到toImage函数中?
我正在使用KonvaJs 3.2.4(尽管我可能会升级),并试图使用舞台类的toImage函数。看起来好像toImage()默认只返回一个可见的图像。
如何删除konva shapeimage,当使用node.destroy()。
在使用konva时,我使用一个按钮在我的舞台上多次添加一个形状,使用类似document.getElementById('Rect').addEventListener( "click" , function ( ) { ....
假设我们在画布上绘制了一个1000x1000的图像,并将konva图像的大小设置为500x700之类。是否可以在konva中模仿html 标签对象适合属性,所以我们可以告诉...