1

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

重叠示例

jsfiddle在这里：

http://jsfiddle.net/vTLkn/

有没有办法将图像放置在某种形式的容器或矩形内来阻止这种情况，这样它们就不会出现在另一个“框架”内？

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

我也尝试使用矩形作为图像蒙版，图像作为fillPatternImage属性，但我不能在里面拖动和缩放图像，只是矩形本身。

4

1 回答 1

1

您可以使用 Kinetic Group 和“yoda 裁剪”来确保您的图像不会重叠

在此处输入图像描述

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

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

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

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

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

在这里，尤达会比相框大，所以需要稍微裁剪一下。

        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>
于 2013-07-18T18:31:46.013 回答