Konva-使用旋转并保持在范围内
我正在使用Konva在网页上创建区域.我为矩形创建了一个dragBoundFunc函数，用于检查pos.x和pos.y以及画布和rect的宽度，并且效果很好-矩形在拖动时只停留在我想要的区域. 我将矩形旋转90度时出现了问题.现在，当我检查getClientRect().width和getClientRect().height时，宽度小于高度，但这是预期的，但是除非我检测到旋转结束并更改我的
..
konvajs相关内容
react-konva上传后如何更改图像?
我正在做一个小项目，允许用户上传图像，然后图像将显示在画布上. 为此，我正在使用反应-konva . 我有一个名为DesignPage的容器组件，它可以管理状态，并将事件处理程序传递给其子级. 在此DesignPage组件内，我还有两个其他组件:工具-画布 当我使用工具组件上载图像时，该图像应显示在 Canvas 组件上. 我正在工具中使用 react-dropzon
..
Konvajs:如何更改文本组的位置
我正在使用Konvajs，我有一组文本，并且我想不允许在画布之外拖动组，我尝试使用dragBoundFunc解决，但这无济于事，现在我只是尝试在dragmove期间更改组位置，但是setPosition，setAbsloutePosition不允许我更改组位置 stage.on('dragmove', (e) => stageOnDragMove(e, layer)); const stag
..
KonvaJS:分离后如何保持形状在组中的位置和旋转?
分离后如何在组中保持形状的位置，旋转和缩放属性? 如果在用户移动或调整大小后旋转组中的每个形状，旋转包裹在Transformer下的组，则看起来形状丢失了，并且属性发生了更改. 我尝试以下来源. ungroup
const stage =
..
KonvaJS连接正方形和正确的线位置?
所以我要用KonvaJS和KonvaReact构建一个UML绘图工具，为此我需要用线连接形状.我在网站上的已连接对象 https://konvajs.org/docs/sandbox/Connected_Objects.html . 它们使用函数get_connecter_points，该函数根据圆上的弧度从直线计算位置. function getConnectorPoints(fro
..
KonvaJS，可以用遮罩代替clipFunc吗？
我正在使用konvajs，需要一些帮助！ 假设我需要在复杂形状内可拖动的图像。 所以我想知道是否可以通过Konva.Group而不是clipFunc使用遮罩，还是可以将遮罩图像转换为canvas-clip-path并与clipFunc一起使用的方法！ 像这样：使可拖动 解决方案 默认情况下 Konva 仅支持矩形的简单剪辑和的剪辑clipFunc 可以在其中描述所需的路径。
..
如何创建Konva-React上下文菜单
据我所知，Konva并没有一种简单/内置的方式来创建右键单击对象的上下文菜单。我正在忙于一个需要使用上下文菜单的项目，所以我想我自己创建一个。 不用说我对Konva还很陌生，所以我希望SO上的某人可能有更多的经验来帮助我克服最后的障碍。 我创建了一个沙箱，位于这里 要求为： 对象应该是可拖动的。 （我从Konva沙箱复制了一个工作示例。） 在右键单击时，对象应显示一个上下
..
Konva拖放下落而不移动拖动元素
我的问题是如何拖放形状，但是要克隆可拖动的形状，然后将该克隆拖动到可放置的形状。 我是Konva的新手。在查看文档和文档时，我可以找到如何拖放形状的示例。 我找到了克隆形状的参考，但是我不确定如何做到这一点。 如果有人可以向我展示这种方式，将不胜感激。 谢谢 解决方案 rect.on（'dragstart'，function（）{ //停止拖动原始矩形 rec
..
带有弯头的路线或路径标记的解决方案
我想为我的用户提供一种简便的方法，以可视方式在地图或图片上跟踪路线.该解决方案必须让用户添加控制点，他们可以将其用于将折弯放置到路径中. 它应该与html5 canvas一起使用-我目前使用Konvajs库，因此使用此库的解决方案将是不错的选择. 为了共享与分享的利益学习，如果您可以建议使用其他HTML5画布库的解决方案，那也很值得一看. 注意:这不是最初提出的问题.但是随着时间
..
在HTML5画布上擦除图像的一部分?
我有一个HTML5画布.我正在使用 KineticJS(KonvaJS)画布库.在空白画布上，我如下图所示拖动图像.现在，我想创建一个圆形，可以用来擦除图像的一部分.图像中的红色圆圈是橡皮擦. 如何在HTML5画布上擦除图像的一部分? 解决方案 您可以使用“合成"来“擦除"像素. 特别是您使用destination-out合成. KineticJS不支持合成，但是您仍然有
..
Konva在图层之间传播事件
我在形状层的顶部有一个透明的拖动层.可以很好地使交互变得独特，因此我可以切换拖动的功能(在滚动视图或编辑形状位置之间).但是，除非我关闭拖动模式(通过隐藏中间的透明Rect)，否则其他鼠标悬停事件都不会触发其下方的形状层.我需要将非拖动鼠标事件传播到它下面的层.鼠标悬停事件有很多形状. 是否有一种简便的方法将鼠标悬停在事件下方的层上，还是需要编写一个自定义处理程序来触发每种形状的事件?
..
如何在Canvas中创建选择框以选择它触摸的任何对象，而不仅仅是它包含的对象?
有很棒的教程使用KineticJS选择多个对象教您如何在HTML Canvas中创建选择框以选择多个对象，但是作者 Michelle Higgins 编写了代码，以选择被选择框包含的对象. 以下JavaScript代码表达了该算法: var pos = rectSel.getAbsolutePosition(); //get the extents of the selectio
..
将形状从调色板拖到Konvajs舞台上
最近在Konvajs聊天流上，有人要求提供一个示例，将其从调色板拖放到Konvajs库前面的HTML5画布上.没有可用的示例，我很好奇如何实现. 我用Codepen回答了这个问题，但决定在此张贴(以供我自己将来使用).请参阅下面的答案. 解决方案 这是我使用jquery UI可拖动&的解决方案.可放下的东西. Konvajs需要使用jquery，因此使用jquery UI仅一步之遥.
..
Konvajs如何将缩放效果从中心应用到图像
以下是Konvas.js（v 2.4）中的基本增长效果，从图像的左上角开始（ https://codepen.io/simedia/pen/mzrvJq ） var width = window .innerWidth; var height = window.innerHeight; //其中一切都在Konvas var stage = new Konva.Stage（{
..
动画在HTML5画布上绘制路径
我的问题是如何在两点之间绘制路径的动画。 考虑两点之间的曲线或路径，A& B.我可以使用Konvajs中的线条绘制功能在画布上轻松绘制。 然而，我真正想要的是动画显示线的动画，使其从A点开始并逐渐绘制到B点。显示应该是动画的，所以我可以申请令人满意的宽松。 作为一个类似的例子，请参阅本网站上的简短视频 https://coggle.it/ ，其中视频显示新框的创建，并绘制线条以将
..
KonvaJS：如何用箭头连接两个形状？
我想使用Konvajs执行以下任务： 在画布上绘制两个矩形组。每组包含一个矩形，文本和一个圆圈 当我使用鼠标从圆圈拖动时，它会在拖动时绘制一个箭头。 当我将箭头放入另一组时，它会停止绘制并将两组边对边连接 这样的事情： 是否有任何原生方法支持形状之间的连接？ 有人能告诉我一些例子吗？ 解决方案 我已经连接了Konva.Circles。但图像的逻辑也是一样的。请找到
..
如何在旋转和调整大小后设置矩形的中心点，保持旧位置
我在旋转和调整大小后尝试设置中心点，但出现了问题。 var width = window.innerWidth; var height = window.innerHeight; $（'＃left'）。on（'click'，function（）{rectGroup.rotate（-1）; layer.draw（）;}）; $（'＃right'）。on（'click'，function（）{
..
为什么KineticJS文档中没有方法draw（）？
我花了几个小时在谷歌搜索Kinetic.Layer.draw（）方法。我发现的所有内容都是用例 - 没有关于如何，何时以及为何使用它的文档。也许它已经被弃用？ 这些是我在学习和玩这个精彩框架时使用的主要链接： http://kineticjs.com/docs/index.html http：// www.html5canvastutorials.com/kineticjs/ht
..
Knovajs / HTML5 Canvas - 旋转起源
我已经成功创建了一个按钮，可以顺时针或顺时针旋转图像。但是，此按钮只能使用一次。即如果我按CW我就不能再使用CCW还原图像。 任何想法？ $ rw = $（'＃rotate_right'）; $ rw.on（' click'，function（event）{event.preventDefault？event.preventDefault（）：event.returnValue
..
在画布上绘制平滑线条
我想在画布上画一条线 context.globalCompositeOperation ='destination-out'; context.globalAlpha = 0.118; 结果如下： 图像的背景是一个黄色的矩形。我使用圆圈将其拖放到图像上，然后绘制线条。正如你所看到的那样，我绘制的线条并不是那么平滑。你可以看到圆圈而你没有复合线
..