问题标签 [konvajs]

我正在使用 konva.js 构建一个简单的编辑器。画布上的元素之一是由后端服务器动态生成的图像：

该项目是一个Image项目，我正在使用：

用一些触发器更新它。

流程运行良好，但结果不是很好。图像被渲染好几次，每次都比前一个低。

是否支持这种动态操作？

我在我的项目中使用KonvaJs。我需要实现拖动绑定到Konva.Layer. 我的图层有很多其他形状和图像。我需要将图层的移动限制在其宽度和高度的 50% 以内。我在这个plunkr 中所做的方式。当用户使用鼠标滚轮放大或缩小图层时，就会出现问题。缩放后，我不知道为什么拖动绑定的行为有所不同。好像我无法正确地做数学。我需要有相同的行为，即当用户不执行缩放时图层的移动方式受到限制。这就是我正在做的事情：

我可以单击 html 页面中的图像并将图像渲染到 Konva 阶段。我正在尝试使用 jQuery 淡入（）图像，这就是我卡住的地方。

jsfiddle：https ://jsfiddle.net/tommy6s/5w5swLde/8/

我可以使用一些帮助。谢谢

出于某些目的，我需要画布中的输入类型范围，我需要使用它来更改我的字体大小。我已经制作了形状并且可以拖动，但是圆形控制器超出了这条线。

只需预览垃圾箱即可了解我的意思。杰宾

我只想像输入范围一样将拖动区域限制为行。

这是 KonvaJs 库的文档。

我有一个显示一些 SVG 路径的画布。我用 KonvaJs 画了这些。用户应该能够单击任何这些路径并放大它。单击路径后，画布应缩放到路径适合画布全尺寸的位置。看到这个 JsFiddle。（路径将从另一个来源导入）。

我知道你可以像这样缩放一个图层：

但我不知道它需要什么x和价值才能获得正确的规模。y

所以，我的问题：如何缩放/缩放路径以适应它的容器，使用 KonvaJs？

我希望你知道我的意思。如果没有，AmCharts 的 Maps 正是我想要完成的事情。当您单击一个国家/地区时，画布会放大它。缩放动画会很好，但不是必需的。我没有使用 AmCharts，因为它不符合我的（其余）需求。

注意：我开始使用 KonvaJs 是因为我之前使用过 KineticJs。据我了解，KineticJs 不再维护，但 KonvaJs 是它的一个分支（如果我错了，请纠正我）。如果你知道一个更好的图书馆来做到这一点，请告诉我。

我在形状层的顶部有一个透明的拖动层。非常适合使交互与众不同，因此我可以切换拖动的作用（在滚动视图或编辑形状位置之间）。但是，除非我关闭拖动模式（通过隐藏介入的透明矩形），否则不会在其下方的形状层上触发其他鼠标悬停事件。我需要将非拖动鼠标事件传播到它下面的图层。有很多带有鼠标悬停事件的形状。

有没有一种简单的方法可以将鼠标悬停事件传播到它下面的图层，或者我是否需要编写一个自定义处理程序来为每个形状触发事件？

我的脚本有一个非常奇怪的行为：只是偶尔（很少一次 3-4 次，但更有可能每 7 到 150 次试验一次）加载脚本，但我只看到一个白色的画布和得到错误信息：

未捕获的类型错误：无法读取 undefinedKonva.Util.addMethods.add @ konva.min.js:44draw @ floorplansurvey.php:950（匿名函数）@ floorplansurvey.php:985images.（匿名函数）的属性“getParent”。onload @ floorplansurvey .php:390

重新加载时它通常会再次起作用...我根本不知道这里发生了什么，无法强制/复制该错误，非常感谢您，如果您有什么可以帮助我的。即使是更清晰的分析策略也会有所帮助，抱歉代码不具体且冗长

编辑：我在下面做了一个 jsfiddle： https ://jsfiddle.net/17548hmv/1/

运行它几次，直到发生错误，这些是代码片段：

@ floorplansurvey.php:390：

@ floorplansurvey.php:985images.(匿名函数).onload:

@ floorplansurvey.php:950（匿名函数）：

@konva.min.js:44draw：这个我自己看不懂

Var 源定义如下：

...等等

这是函数绘制：

有一个很棒的教程Selecting Multiple Objects with KineticJS教你如何在 HTML Canvas 中创建一个选择框以选择多个对象，但是作者Michelle Higgins编写了他的代码来选择选择框所包含的对象。

以下 JavaScript 代码表达了该算法：

问题是：如何使选择框不仅选择它所接触的任何对象，还选择它所包含的对象？

PS：这是一个工作jsbin。

我有一个项目以一种特殊的方式使用 KonvaJS（我最近从 KineticJS 移植了它）。我基本上用它在等轴测视图中显示建筑物的 3D 表示，如您在此处看到的。

最初一切正常，但随着建筑物尺寸的增加，性能开始受到影响，因为我必须代表建筑物的照明，每个灯具都有 3 个多边形。我只使用图层和组，舞台是可拖动的，每个灯具都是可选的，所以我使用鼠标事件。

我面临的主要问题是在拖动以及指向和缩放时重绘舞台。例如，我有一座拥有近 2000 盏灯具的大建筑，而使用它是不可能的。

这是我的节点列表的简化版本。

• 阶段
  • 层
    • 墙壁ISO (群展)
      • nx 多边形
    • 地板ISO (群展)
      • nx 多边形
    • 灯具ISO (群展)
      • 单灯 (群展)
        • 3 x 多边形
      • 单灯 (群展)
      • ...

我应该使用不同的图层吗？会更好吗？有什么我想念的吗？我开始认为我应该使用 3D 框架。

我在我的项目中使用KonvaJs。我正在使用Konva.Line通过设置创建一个多边形closed:true。我需要弄清楚一个点是否在多边形内。我正在使用Ray-Casting算法来查找多边形中的点，它工作正常。但是在拖动多边形时会出现问题。当它被拖动时，顶点（点）仍然保持不变，因此我无法获得新的坐标。如何更改多边形的点以便我可以使用它们？这是plunkr。