0

伙计们请看这个链接，http://www.logolenses.com/ 我正在做一些与此非常相似的事情，使用 raphael js 而不是 html5 画布。如果我们检查站点，我们可以看到，在左侧框架添加一个项目后，当我们拖动到框架的右侧时，它不会通过其他可自定义的区域显示。我无法用 raphael 达到同样的效果，尝试了 toBack() 和 toFront() 方法但没有用。谁能帮我？谢谢你的帮助

4

1 回答 1

0

所以你似乎在说的是：

  • 你有两个区域作为框架，彼此相邻。
  • 形状可以拖到这些框架中，并位于框架后面
  • 当您将一个对象拖向中间时，它位于两个框架的后面，它同时显示在两个框架中，因为它们都是同一个纸对象的一部分。
  • 您希望两个帧彼此独立，因此一个图像不能“溢出”并显示在另一个帧中。

那么你为什么不把每一帧都放在它自己独立的纸上呢？如果你想让每个都作为一个独立的区域，为什么不把它们变成独立的区域呢？

在 Raphael 中定义为纸张的区域按宽度和高度在其定义的边界上裁剪，隐藏边界外的任何内容。此剪辑似乎正是您想要的。

你如何重构来做到这一点取决于你。一种非常简单的方法是这样的：

function makeLens( id, width, height ){
   var paper = Raphael(id, width, height);
   var buttons = // find or place the buttons for this lens based on the id

   // the rest of your code

}
makeLens( 'left-lens', 500, 500 );
makeLens( 'right-lens', 500, 500 );

... 使用 HTML / CSS，例如：

<style>
   .lens { width: 500px; height: 500px; float: left; }
</style>
<div id="left-lens" class="lens"> </div>
<div id="right-lens" class="lens"> </div>
于 2013-04-29T23:39:13.040 回答