如何在Konva中使用globalCompositeOperation处理具有缩放功能的多个形状

文章/答案/技术大牛

发布

1回答

konvajs

我正尝试在Konva中创建具有内边界的多边形。我找到了一个用globalCompositeOperation做这件事的例子，只要只有一个形状，它在Konva中就能很好地工作。当我尝试添加第二个形状时，这显然不再起作用，第一个形状消失了。如果我为每个形状使用不同的层，它将会工作，但当然这不是一个伸缩性很好的解决方案。我试着使用

浏览 36提问于2020-01-18得票数 1

1回答

如何在不删除图像的情况下删除用画笔绘制的线条

html5-canvas、erase、konvajs、brush、react-konva

我在第一个例子中使用了https://konvajs.org/docs/sandbox/Free_Drawing.html，但也在stage中添加了图像。但是当我删除绘制的线条时，图像也被删除了。

浏览 28提问于2020-04-26得票数 0

1回答

将Konva缩放到可见区域的中心

canvas、coordinates、zooming、konvajs

Konva.js被用来实现可缩放的白板，但我正在努力实现它，当缩放时，可见区域中的对象将停留在区域的中心。所以，这里有一个例子： 100%且位置不变的图片(绘制的“红色1”大致在中心)： ? 然后stage被缩放0.25 - "red 1“停留在区域中心： ? 如果比例回到1，我们将“绿色2”的位置移动到区域中心： ? 然后缩放0.25级-“绿色2”到区域的右侧(

浏览 215提问于2021-10-01得票数 0

1回答

KonvaJS，可能是掩蔽而不是clipFunc？

javascript、draggable、masking、konvajs

我正在使用konvajs，需要帮助！假设我需要一个在复杂形状中可拖动的图像。因此，我想知道，是否可以使用掩蔽与Konva.Group，而不是clipFunc或一种方式，将掩蔽图像转换为画布剪辑路径和使用与clipFunc！像这样：

浏览 0提问于2017-07-14得票数 0

3回答

是否可以使用Konva.js实现油漆桶？

javascript、canvas、konvajs、react-konva

我使用实现了多个工具，允许用户绘制不同的形状和图案，如:矩形、圆圈、箭头、自由绘制、橡皮擦等等。c.我试图实现这样的目标:使用油漆桶，用户应该能够填充形状的不同部分，如果在该形状上绘制的是其他形状或模式。用户现在使用</

浏览 0提问于2019-05-21得票数 0

2回答

放大到konva.js中的特定形状

konvajs、konva

我的问题是:我有两个形状在舞台上和按钮点击，我需要放大到特定的形状和它的位置。你知道怎么做吗？我已经检查了教程的缩放到指针的位置和舞台的中心。

浏览 15提问于2021-08-16得票数 1

1回答

如何使用Konva按比例将getTransform获得的矩阵应用到更大的画布上

matrix、canvas、konvajs、konva

我们的项目是一个在线DIY专辑。用户在画框中填写照片。要求Konva实现类似Photoshop的掩模功能，类似于图片按下帧的效果。我的画布上可能有很多画框，只有一个画布不能实现这个功能。因此，我需要使用一个新的画布来画这个，然后把这个面具画布的内容画到Konva的画布上。基于这个想法，我意识到了基本的需求。我们的要求是，用户可以

浏览 14提问于2022-09-14得票数 0

1回答

如何将konva变压器与“鼠标退出”事件的图像分离？

javascript、konvajs、konva

我正试图找到一种将Konva.js转换器与我的图像分离开来的方法。我已经使用"mouseover"事件成功地创建了转换器并将其附加到映像中，但当转换完成后，我想不出如何使用我的"mouseout"事件来分离转换器。我发现的大多数文档和示例都建议使用tr.detach()方法，但没有成功。有人能建议另一种方法或者查看我的代码并让我知道我遗漏了什么吗？下面是一个演示程序的

浏览 6提问于2021-06-17得票数 0

回答已采纳

2回答

在Javascript中对非矩形形状创建斜面效果

javascript、canvas

这是一个没有斜面应用的图像，和一个具有我正在寻找的效果的图像。这是在Photoshop中完成的：编辑:我和马克的建议一起争论了一些事情。到目前为止，这涉及几个不同的步骤： 1)首先创建一个具有透明填充颜色、边框和轻微阴影(带有(0,0)偏移)和模糊值为1的形状，然后将该形状绘制到自身上，以增加阴影的不透明度。然后，我创建一个具有透明

浏览 6提问于2014-07-12得票数 2

回答已采纳

1回答

用Konva设计甘特视图

konvajs

我正在尝试用Konva构建甘特控件(使用Konva是否有意义)？我试图在下面勾勒出这个控件：我想把Konvas的舞台分解成以下几个部分：从事件处理的角度来看，同步不同层的最佳方法是什么？例如，如果用户单击滚动条的向下箭头形状</em

浏览 1提问于2018-03-07得票数 2

回答已采纳

2回答

KonvaJS :如何在鼠标移动的基础上画一条线来连接两个形状？

javascript、konvajs

我试图画一条线来连接基于鼠标移动的两种形状。我也知道如何使用本地画布重新使用它。但是不知道如何使用KonvaJS来实现它。请帮帮我。这就是我想要实现的代码。stage.on('mousedown', function(e) {

浏览 6提问于2020-07-20得票数 1

回答已采纳

1回答

使用react-konva渲染数十万个圆

canvas、bigdata、visualization、react-konva

我正在使用react-konva渲染大型基因数据集，我对konva和react-konva都是相当陌生的。它具有易于使用的api，对代码迭代非常有帮助。然而，我遇到了渲染数万或数十万`或组件的伸缩问题。目前，我只是在数据集上映射，并返回一个圆形或矩形，因为代码非常容易读/写。konva是否对每个形状都执行了一次draw()，或者它已经对draw调用进行了批处理？有没有更好

浏览 23提问于2019-09-26得票数 1

1回答

如何使用Konva* JS检测图像和文本对象之间的冲突*

collision、konvajs

我正在尝试构建一个简单的应用程序，在其中，用户将一个单词拖到相应的图像上。当用户“删除”图像上的单词时，需要检测到冲突。我有一条console.log消息，只有在发生这种情况时才应该记录。目前，即使在没有冲突的情况下，我的消息仍在记录。知道我哪里出问题了吗？这是我的代码：var stage = new Konva.Stage({ c

浏览 8提问于2022-01-22得票数 1

回答已采纳

1回答

使用手指移动的变换精灵

iphone、ios、cocos2d-iphone

我正在制作一个绘图应用程序在某种程度上像绘画在Windows中我有一个工具栏与许多形状的按钮，如矩形，圆形，三角形等。当点击一个按钮，我添加了一个带有按钮名称的形状的精灵。我想添加这样的功能-当点击形状时，它会在形状的每个角落显示四个4点，我可以触摸和拖动来倾斜或缩放。就像我们在photoshop或MSWord中处理图像一样，有

浏览 0提问于2013-05-30得票数 0

回答已采纳

1回答

我使用konvajs和vue-konva在矩形区域上定位图像。我需要缓存此图像，以便在其上应用自定义过滤器。此图像由用户上传，其尺寸可以相当大(例如，来自设备摄像头)，并且设备可以是资源有限的智能手机。这似乎取决于设备:我的笔记本电脑上一切正常，但我的智能手机(两种高端设备)上的一切都没问题，两者都安装了最新版本的Google Chrome。我已经设法在我的笔记本电脑上用更大的图像(~6000x6000)重现了这个问题。我真的不知道

浏览 96提问于2020-07-10得票数 0

回答已采纳

1回答

Haskell中的图形转换句柄

haskell、graphics、gtk、image-manipulation、cairo

我正在尝试使用gtk2hs和cairo在Haskell中创建图形用户界面和图形应用程序。目前，我正在开发一个程序，在这个程序中，用户可以在屏幕上创建和操作简单的几何形状。我希望用户能够做的三个操作是:平移、旋转和缩放。理想的实现方式是在大多数图像处理程序(如photoshop)中提供转换句柄：(即，可以通过拖动对象内部的某处来平移对象，通过拖动适当的白色框来缩放

浏览 0提问于2013-07-15得票数 3

1回答

在将形状从组移到层上时正确应用转换

konvajs

这个问题的原因是，我一次要处理多个konva形状。在原始项目中，将通过在要选择的形状(矩形选择)周围绘制一个瞬间矩形来选择形状。我看过其他一些关于这方面的帖子，但他们似乎只处理选择本身，我有这样的工作。使用说明：单击“选择”按钮，将两个形状放入一个组和一个转换器中。旋转并缩放选定的

浏览 1提问于2018-12-13得票数 0

回答已采纳

1回答

globalCompositeOperation和同心、空心、移动的形状

javascript、html、canvas、globalcompositeoperation

每个圆圈都有一个“洞”，所以后面画的较小的圆圈是部分可见的。每个帧(我们使用window.requestAnimationFrame渲染)，每个圆圈/形状/环的半径略有增加。在图像中描述了一个有两个环的场景。看看“我得到了什么”的形象。这是在多个框架上绘制单个环的结果。我不应该得到任何不同的东西，就像一个中间有一个空心正方形的黑色圆圈

浏览 6提问于2014-04-09得票数 0

回答已采纳

1回答

jquery: fancybox 3，响应式图像地图和可缩放内容

svg、imagemap、fancybox-3

我想在fancybox 3中使用图像地图，目标是显示山峰全景图，在那里用户可以指向山顶并获取名称和数据。通常的建议是使用基于SVG的图像映射，如。由于图像的大小，fancybox的缩放功能很重要。我尝试将fancybox中的<img>标记替换为使用SVG文件作为数据属性的<object>标记。这将正确显示具有</e

浏览 6提问于2018-11-22得票数 0

2回答

如何使用HMTL5 Javascript画布获得三个形状的交集，碰撞和删除未碰撞的部分？

javascript、html、canvas、html5-canvas、konvajs

最近，我专门为KonvaJs 发布了一个类似的问题，但是我没有得到任何答案，我想直接了解KonvaJ使用什么的根源。我想知道是否有一种使用HMTL5 Javascript画布解决以下问题的标准方法。根据我搜索的内容，我可以通过使用来检测碰撞区域，然后以某种方式将应用于碰撞的部分，只得到所需的结果。我在这个解决方案中看到的问题是，如果每个形状都是可拖动的，则形状可能会被裁剪，但不会遵

浏览 8提问于2020-11-05得票数 4

回答已采纳

点击加载更多