Question

我的舞台上有2张图像，位于2帧的叠加图像下面。用户可以拖动每个图像，就好像它们位于相框内的每个图像一样。我遇到的问题是这个例子中的尤达图像可以重叠并出现在左边的darth vader框架内（反之亦然），如下所示：

overlap example http://i39.tinypic.com/119xbv6.png

jsfiddle在这里：

http://jsfiddle.net/vTLkn/

有没有办法将图像放在某种形式的容器或矩形中以阻止它，以便它们不会出现在另一个“框架”内？

最终页面最终可能最多有5或6帧，每张图像的图像可以放大或缩小，也可以被用户拖动到任何他们想要的地方（我看过dragBoundsFunc但我实际上并不想限制它们放置的位置，只是停止重叠。

我还尝试使用矩形作为图像蒙版，将图像作为fillPatternImage属性，但我无法拖动和缩放图像，只是矩形本身。

Answer 1

您可以使用Kinetic Group加“yoda cropping”以确保您的图片不重叠

enter image description here

首先创建一个包含相框和尤达的组：

如果您需要拖动或缩放，则可以拖动或缩放组（所有包含的元素都会相应地做出反应）

    var group=new Kinetic.Group({
        x:20,
        y:20,
        width:256,
        height:256,
        draggable:true
    })
    layer.add(group);

然后添加已被裁剪以适合相框的Yoda图像。

由于这个Yoda图像在背景中（较低的z-index），与图像帧的任何轻微重叠都将被较大的图像帧隐藏。

在这里，Yoda会比相框大，所以需要裁剪一下。

        var inner=new Kinetic.Image({
            image:Yoda,
            x:44,
            y:44,
            width:168,
            height:162,
            crop:{
                x: 23,
                y: 38,
                width: 168,
                height: 162
            }

        });
        group.add(inner);

最后，添加将使用宽度/高度缩放以适合组的图片框架：

        var outer=new Kinetic.Image({
            image:pictureFrame,
            x:0,
            y:0,
            width:256,
            height:256,
        });
        group.add(outer);

这是代码和小提琴：http://jsfiddle.net/m1erickson/qGHZn/

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Prototype</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.4.min.js"></script>

<style>
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
  width:400px;
  height:400px;
}
</style>        
<script>
$(function(){

    var stage = new Kinetic.Stage({
        container: 'container',
        width: 400,
        height: 400
    });
    var layer = new Kinetic.Layer();
    stage.add(layer);

    var group=new Kinetic.Group({
        x:20,
        y:20,
        width:256,
        height:256,
        draggable:true
    })
    layer.add(group);

    //////////////////////////
    // START
    //////////////////////////


var frame=new Image();
frame.onload=function(){

    var pic=new Image();
    pic.onload=function(){

        var inner=new Kinetic.Image({
            image:pic,
            x:44,
            y:44,
            width:168,
            height:162,
            crop:{
                x: 23,
                y: 38,
                width: 168,
                height: 162
            }

        });
        group.add(inner);

        var outer=new Kinetic.Image({
            image:frame,
            x:0,
            y:0,
            width:256,
            height:256,
        });
        group.add(outer);

        layer.draw();
    }
    pic.src="http://www.html5canvastutorials.com/demos/assets/yoda.jpg";

}
frame.src="woodenframe.png";


}); // end $(function(){});

</script>       
</head>

<body>
    <div id="container"></div>
</body>
</html>

kineticjs - 掩盖/包含图像所以没有重叠

1 个答案: