Question

伙计们请看这个链接，http://www.logolenses.com/ 我正在研究与此类似的东西，使用raphael js而不是html5 canvas。如果我们检查网站，我们可以看到，当我们拖动到框架的右侧时，在左框架上添加项目后，它将不会通过其他可自定义区域显示。我无法用raphael实现同样的功能，尝试使用Back（）和toFront（）方法但没有用。谁能帮我？谢谢你的帮助

Answer 1

所以你似乎在说的是：

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

那么为什么不在每个独立的纸质对象中制作每个帧？如果您希望每个人都充当独立区域，为什么不将它们变成独立区域？

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>

Raphael js在某些区域隐藏元素

1 个答案: