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 回答