javascript - 在 Raphael (SVG/VML) 形状中呈现 HTML *的想法

Question

我正在开发一个使用 Raphael 的应用程序绘制原始形状(矩形、椭圆、三 Angular 形等)和线条，但也允许用户移动/调整这些对象的大小。主要要求之一是形状的表面可以有格式化的文本。实际文本是 Markdown 的子集(简单的东西，如粗体、斜体、列表)并呈现为 HTML。

FWIW - 我正在使用 Backbone.js View 来模块化形状逻辑。

方法一

我最初的想法是使用 foreignObject for SVG 的组合并使用用于 IE 的 VML 直接 HTML。然而，IE9 doesn't support foreignObject ，因此不得不放弃这种方法。

方法二

在 Canvas 对象旁边，添加包含实际 HTML 的 div。然后，将它们放置在具有透明背景的实际形状上。我创建了一个形状 View ，它引用了实际的 Raphael 形状和“覆盖”div。这种方法有几个问题:

1. 使用不是 SVG/VML 容器子级的覆盖层感觉是错误的。使用此叠加元素是否会导致其他渲染问题？

2. 通常由 Raphael 捕获的事件(拖动、单击等)需要从叠加层转发到 Raphael 对象。对于支持 pointer-events 的浏览器，这很容易做到:

   div.shape-text-overlay {  position: absolute;  background: none;  pointer-events: none;}

   但是，其他浏览器(如IE8及以下)需要转发事件:

   var forwardedEvents = 'mousemove mousedown mouseup click dblclick mouseover mouseout';this.$elText.on(forwardedEvents, function(e) {  var original = e.originalEvent;  var event;  if (document.createEvent) {    event = document.createEvent('HTMLEvents');    event.initEvent(e.type, true, true);  }   else {    event = document.createEventObject();    event.eventType = e.type;  }  // FYI - This is the most simplistic approach to event forwarding.   // My real implementation is much larger and uses MouseEvents and UIEvents separately.  event.eventName = e.type;  _.extend(event, original);  if (document.createEvent) {    that.el.node.dispatchEvent(event);  }   else {    that.el.node.fireEvent('on' + event.eventType, event);  }});

3. 重叠的形状会导致文本重叠，因为文本/形状位于不同的图层上。虽然重叠的形状并不常见，但这看起来很糟糕:

   

这种方法是我目前正在使用的方法，但它只是感觉像一个巨大的 hack。

方法三

几乎与方法 1 类似，但这将涉及直接编写文本节点/VML 节点。最大的问题是所需的手动转换量。打破 Raphael 的 API 之外似乎可能导致其他 Raphael 对象的稳定性问题。

问题

有没有其他人必须做类似的事情(在 SVG/VML 中呈现 HTML)？如果是这样，你是如何解决这个问题的？是否考虑了事件？

Answer 1

我构建了 this project (不再活着) 使用拉斐尔。我所做的实际上是放弃了在 SVG 中使用 HTML 的想法，因为它太困惑了。相反，我完全将 HTML 层放置在 SVG 层之上并将它们一起移动。当我想要显示 HTML 时，我只是将其淡入并淡出相应的 SVG 对象。如果时间和排列正确，未经训练的人不会注意到它。

虽然这不一定是您要找的东西，但也许它会让您想到新的方法来解决您的问题!随意查看该页面上的 JS，因为它未缩小；)

PS，该项目是一个收集线索的应用程序。如果您只是想看看它是如何工作的，请在第一个下拉列表中选择“ friend ”，您不必提供任何信息。