问题标签 [dojox.gfx]

我正在通过 DOJO 的 GFX API 绘制图像

它们现在是静态图像，是他们将其拖放到 DOJO 中的一种方式

我创建了一个 dojo 图形组并将几个鼠标事件连接到它，但是 mouseclick 事件会触发所有其他鼠标事件，单击时我没有移动鼠标。

鼠标单击同时触发了“ mouseout ”、“ mouseenter ”和“ mousedown ”。

有人有什么想法吗？

更新：我在鼠标输入上重新创建图形，这导致了各种问题。

我有一些形状的表面。我用

从中生成一个json，然后

获取数据并将其附加到表面。当我创建一个可移动节点时，问题就来了。将其保存为 json 然后将其附加到表面后，该节点不再可移动。我发现无法使节点再次可移动。有没有办法做到这一点？我希望能够在我的页面中保存和加载 svg 数据，加载后，移动元素。在我偶然发现这个问题之前，使用 dojo 似乎很容易。如果我不能轻松做到这一点，是否有更好的库可以用来实现我的目标？

编辑：这里是实际代码： http: //pastebin.com/2qLCTw8B

我发现在 svg/gfx 中你不能为子元素设置边框和填充等。

那么有没有替代方案（svg/gfx 方式用于边框/填充...）？

我想这样做，当用户单击一个<image>（或其他节点类型）时，他会以某种方式看到选择了哪个元素。我认为边界会起作用，但显然我错了。

我成功地使用 dojo.gfx (surface) 来绘制页面的交互部分。现在，我想添加一些功能，这些功能已经以 dijit.form 元素或一些 dojox 控件（例如 dojox.gauges）的形式提供。

控件应该用于输入和输出（按钮、滑块、复选框、仪表……），因此将自制图形（dojo.gfx）与预建控件（dijit）结合起来似乎是个好主意或dojox）。

有没有关于如何做到这一点的例子？我知道的一件事是 z 顺序可能是一个有趣的问题（在表面上绘制的形状与 dijit 或 dojox 控件）。

解决方案

只是在让事情正常工作时遇到了一些实际问题，但最终解决方案很明显：

• 创建了一个具有固定大小（与表面相同）的 <div>，否则滚动将无法正常工作
• 将控件添加到 <div&tg; 的父级 创建曲面的位置
• Z 排序有点问题，因为整个表面要么在控件的前面，要么在控件的后面，因此不可能将图形的一部分放在控件的前面，而将其他部分放在控件的后面

tl; dr 我将如何使用以下返回的 CTM：

修改dx, dy屏幕坐标中的矢量，使其位于世界坐标中？ie{ dx: 1, dy: 0}应该成为上面500px 宽窗口中{ dx: 3.6, dy: 0}带有 viewBox 的 SVG 示例。0 0 1800 1800

我认为以下方法会起作用：

但itm出来的时候充满了 NaN 和 Infinity。

CodePen 示例后面是长版问题

我知道这背后的基本数学，但发现自己很难用矩阵变换来做这件事。文档似乎避免了这个主题。情况是：

• SVG 节点具有定义世界坐标的 viewBox，例如 0,0 到 1800,1800
• SVG 节点位于将其缩放到窗口大小的文档中，大约 500 像素宽因此 SVG 中的世界坐标（1800 x 1800 单位）不会 1:1 映射到屏幕坐标。每个像素跨度为 1800/500 = 3.6 世界单位

• dojox/gfx/Moveable 使用 dojox/gfx/Mover ，它的 onMouseMove函数传递了它在屏幕坐标中移动的量：

  this.host.onMove(this, {dx: x - this.lastX, dy: y - this.lastY});

dojox/gfx/Moveable.onMoving最后一个参数作为参数传入shift，如果鼠标向右移动一个像素，则可能是例如 { dx: 1, dy: 0 }。

如果我们愚蠢地允许框架将其应用于被拖动形状的平移变换，则其位置与鼠标坐标不完全匹配：https ://codepen.io/neekfenwick/pen/RxpoMq （这在 dojox 演示中运行良好因为它们的 SVG 坐标系与屏幕坐标系 1:1 匹配）。

我在http://grokbase.com/t/dojo/dojo-interest/08anymq4t9/gfx-constrainedmoveable找到了一些灵​​感，其中 Eugene 说“在你的对象上覆盖 onMoving 并修改“shift”对象，因此它永远不会将形状移出一个指定的边界。”，这似乎是修改shift对象的一个​​好点，所以我接下来的尝试声明了一个新的类型dojox/gfx/Moveable和覆盖onMoving。

我尝试使用矩阵转换来获取 SVG 的 Screen CTM（它位于 的对象中）并使用直接矩阵运算{ a, b, c, d, e, f }将其用作dojox/gfx Matrix2D( )。{ xx, xy, dx, yx, yy, dy }目的是在将shift对象用于形状的变换矩阵之前修改对象以将屏幕单位转换为世界单位，但发现自己很困惑。一开始，CTM 似乎有一个大约 50 的大 dy，这立即使形状从屏幕底部射出。这是我最新的非常混乱和破碎的尝试：https ://codepen.io/neekfenwick/pen/EoWNOb

我可以手动获取 CTM 的 x 和 y 比例值并将它们应用于 shift 对象：https ://codepen.io/neekfenwick/pen/KZWapa

如何使用矩阵运算，例如Matrix2D.invert()和 Matrix2D.multiplyPoint()获取 SVG 的坐标系，生成一个转换矩阵以从屏幕坐标转换为世界坐标，并将其应用于鼠标移动的 dx,dy？

我们有一个 TypeScript 项目，我们需要在其中使用 Dojo 的createSurface. 但是，我们意外地需要包含<reference path="..."/>如下所示。

我本来希望不需要<reference path="..."/>但没有它 TypeScript 抱怨它找不到显示的每个 require/import 语句的模块。

我们的 package.json 是

我们的 tsconfig.json 是

我们如何（可以）在没有 的情况下导入 Dojox 模块<reference path=""/>？

2018 年 6 月 4 日更新

在进一步检查 dojo 的类型定义后，我发现我可以在没有<reference path="..."/>类似的情况下进行 dojox ......

这是因为@types/dojo/index.d.ts导出了以下模块。

但是，dojox 接口index.d.ts将 gfx 定义为Object. 打字稿然后警告说

“dojox”类型上不存在属性“createSurface”

作为测试，我创建了一个只有以下依赖项的新项目。

然后我更改gfx: Object为gfx: dojox.gfx;inside index.d.ts。这似乎解决了这个测试项目的所有问题。

我试图对我的原始项目做同样的事情，但 TypeScript 警告说

node_modules/@types/dojo/index.d.ts(26014,24)：错误 TS2694：命名空间“dojox”没有导出的成员“gfx”。

我已经验证了 的内容node_modules/@types/dojo是相同的，并且两个项目都使用相同的 TypeScript 版本。tsconfig.json 文件也是一样的。

为什么一个项目会看到导出的成员而另一个没有？

我用一些代码创建了一个文本对象，例如：

稍后我想更改文本。我已经尝试了很多变化：

或者

没有运气，我想用更新的文本替换原始文本。是唯一的选择删除旧的并重新绘制吗？