konvajs 相关问题

Konva是一个HTML5 Canvas JavaScript框架,支持桌面和移动应用程序的高性能动画,转换,节点嵌套,分层,过滤,缓存,事件处理。

在 React Konva 中的 Canvas 上播放视频

基于有关如何将视频渲染到画布的 Konva 文档,我想通过直接从 Konva.Image 实例访问视频引用来播放视频。下面是一个贡献...

回答 2 投票 0

在 konvajs 上以自定义形状和拖动效果显示图像

这里有一个 Vanquished Wombat 发布的例子 该示例使用 Konva Group 中的 Konva Rect 和 Konva Image。是否有可能使用 Konva Line 达到相同的效果(有 P...

回答 0 投票 0

KonvaJS:放大/缩小时避免模糊

我正在使用 KonvaJS 绘制一些图形并制作简单的动画。 有时用户放大页面,绘制的画布变得模糊。 我注意到如果页面开始放大,模糊...

回答 1 投票 0

React-Konva 中有限的工作空间

我使用 React-Konva 并尝试制作一个具有可扩展性的有限大小的工作空间(如在 photoshop 中)。因此,当您缩放工作区窗口时,它开始在

回答 0 投票 0

Konva js | Transformer 两次调用 onDragMove

我有“变形金刚”和几个封闭的“线”。 对于 Line onDragMove,我定义了一个函数,该函数可以手动更改 Line 的 x 和 y。函数首先得到矩阵...

回答 0 投票 0

Konva getContext('2d').getImageData().data 在不同的分辨率和缩放下给出错误的数据

我最近开始使用 Konva,一切正常。我在 1920x1080 的显示器上以 150% 的缩放比例打开同一个 HTML 页面,发现数据点数组在这个时候出错了

回答 1 投票 0

Konva Shapes 的布尔运算

我想知道如何在 Konva.js 上进行布尔运算? 我想从 Konva.Rect 中减去 Konva.Line。 是否有任何内置函数,或者我需要一个外部库?

回答 1 投票 0

如何获得任何形状的 konva 变压器锚点位置

我正在尝试获取变压器边界框的锚点位置(即围绕具有 4 个圆的多边形形状的蓝色矩形的 8 个点) 现在只有当形状是矩形时……

回答 0 投票 0

如何防止混合颜色不透明

我有不透明的矩形。我需要不透明度来显示网格。但是,当一个矩形位于另一个矩形上方时,颜色会混合。 如何解决?就像它是具有更高 z-index 的矩形的白色背景。 ...

回答 0 投票 0

Konva/react-konva - 从 JSON 恢复画布元素

我正在创建一个使用 react-konva 和 Konva 作为绘图板的 React 应用程序。当前,当用户单击“保存”按钮时,它会获取...的“屏幕截图”(使用 toDataUrl)

回答 1 投票 0

通过在 Konva 中拖动来防止形状旋转

我正在使用 react-konva (Konva),我需要通过单击角点并将其拖到对角角点上来防止旋转形状(矩形)。这会将矩形旋转 180 或 -1 ...

回答 1 投票 0

在konva中为什么使用fillLinearGradientColorStops api在rect中画对角线时颜色不均匀

*场景:* 我使用 konva 在矩形中绘制对角线, rect api fillLinearGradientColorStops 满足我的需要, 当 fillLinearGradientColorStops Array length 的值小于 200 时,...

回答 1 投票 0

在 Vue KonvaJS 中调整和剪裁分组元素

我正在尝试使用 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 请告知如何在不影响笔画或圆圈的情况下调整整个组的大小。 谢谢。

回答 0 投票 0

Vue-Konva。有没有办法在飞行中重新排列图层?

所以,我一直在用vue-konva工作,我有这样的东西。 &amp;...

回答 1 投票 0

KonvaJS在SVG上进行绕中心旋转变换。

我使用KonvaJS在画布上创建文本。而且我可以使用Transformer冻结文本。绘制时,原点保持在中心位置,因为我希望这里没有问题。然而,当我想使用 ...

回答 1 投票 0

Konva.js可以识别SHIFT+dblclick吗?

是否可以正确理解为Konva的舞台不识别SHIFT+dblclick?在我下面的代码中,(1)没有实现------是的,我想实现(1)。当双击时,(2)...。

回答 1 投票 0

滚动到图层的中心

我在这个问题上有点被卡住了,我想根据图层的中心而不是鼠标指针来缩放。我想根据图层的中心而不是鼠标指针来缩放。这里是Konva的演示,我是从https:/konvajs.orgdocssandbox......得到的。

回答 1 投票 0

如何让KonvaJs舞台的使用区域作为高度宽度属性传递到toImage函数中?

我正在使用KonvaJs 3.2.4(尽管我可能会升级),并试图使用舞台类的toImage函数。看起来好像toImage()默认只返回一个可见的图像。

回答 1 投票 1

如何删除konva shapeimage,当使用node.destroy()。

在使用konva时,我使用一个按钮在我的舞台上多次添加一个形状,使用类似document.getElementById('Rect').addEventListener( "click" , function ( ) { ....

回答 1 投票 0

模仿具有konva图像的对象适合/对象位置属性的最佳策略

假设我们在画布上绘制了一个1000x1000的图像,并将konva图像的大小设置为500x700之类。是否可以在konva中模仿html 标签对象适合属性,所以我们可以告诉...

回答 1 投票 0

© www.soinside.com 2019 - 2024. All rights reserved.