Image KineticJS-如何在不移动遮罩的情况下将图像移动到遮罩后面_Image_Kineticjs_Mask

Image KineticJS-如何在不移动遮罩的情况下将图像移动到遮罩后面

image

Image KineticJS-如何在不移动遮罩的情况下将图像移动到遮罩后面,image,kineticjs,mask,Image,Kineticjs,Mask,是否可以在不移动遮罩的情况下将图像移动到遮罩后面？我正在寻找一个操作，允许移动一个面具后面的图像，它应该是准确和顺利我正在寻找的最佳答案是遮罩一个动态图像对象。动态。图像是可拖动的，需要担心它的运动。请告诉我是否真的有可能屏蔽Kinetic.Image对象？演示：使用dynamic.Shape访问画布上下文，然后创建剪切区域创建一个新的动力学形状在形状中定义非矩形路径调用clip（）将绘图限制为该路径将图像绘制到剪裁区域中指定图像的x&y属性，以便可以绘制图像下面是代码中的内

是否可以在不移动遮罩的情况下将图像移动到遮罩后面？我正在寻找一个操作，允许移动一个面具后面的图像，它应该是准确和顺利

我正在寻找的最佳答案是遮罩一个动态图像对象。动态。图像是可拖动的，需要担心它的运动。请告诉我是否真的有可能屏蔽Kinetic.Image对象？

演示：

使用dynamic.Shape访问画布上下文，然后创建剪切区域

创建一个新的动力学形状
在形状中定义非矩形路径
调用clip（）将绘图限制为该路径
将图像绘制到剪裁区域中
指定图像的x&y属性，以便可以绘制图像

下面是代码中的内容：

// create a Kinetic.Shape which gives you access
// to a context to draw on

clippingShape = new Kinetic.Shape({
    sceneFunc: function(context) {

      // define your path here
      // context.beginPath(); ...

      // make your path a clipping region

      context.clip();

      // draw the image inside the clipping region
      // img.x & img.y are offsets which can be used
      // to "drag" the image around the clipping region

      context.drawImage(img,img.x,img.y);

      // KineticJS specific context method
      context.fillStrokeShape(this);

    },
    stroke: 'black',
    strokeWidth: 4,
    listening:false
});

在舞台上侦听鼠标事件，以便在图形中绘制图像时重新定位图像

在mousedown中：保存鼠标位置并设置一个标志，指示拖动已开始
在mousemove中：计算鼠标移动了多少，并将图像的x/y偏移了该距离
在鼠标悬停中：清除拖动标志，因为拖动已结束

鼠标事件处理程序如下所示：

var isdown=false;

stage.getContent().onmousedown=function(e){ 
    var pos=stage.getPointerPosition();
    img.lastX=parseInt(pos.x);
    img.lastY=parseInt(pos.y);
    isdown=true; 
};
stage.getContent().onmouseup=function(e){ 
    isdown=false; 
};
stage.getContent().onmousemove=function(e){
    if(!isdown){return;}
    var pos=stage.getPointerPosition();
    var mouseX=parseInt(pos.x);
    var mouseY=parseInt(pos.y);
    var dx=mouseX-img.lastX;
    var dy=mouseY-img.lastY;
    img.lastX=mouseX;
    img.lastY=mouseY;
    img.x+=dx;
    img.y+=dy;
    layer.draw();
};

[先前版本的答案——在提问者发出指令后，替换为上面的新答案]

传统上，这种剪辑是通过包含透明“视口”的前景图像来完成的，该视口允许用户看到下面背景图像的一部分

演示：

在底层创建可拖动的背景图像：

// create a background layer

var bottomLayer=new Kinetic.Layer();
stage.add(bottomLayer);

// put a draggable image on the background layer

var city=new Kinetic.Image({ image:bk,x:0,y:0,draggable:true,width:700,height:440, });
bottomLayer.add(city);
bottomLayer.draw();

在顶层创建不可拖动的前景图像

顶部图像有一个透明的“视口”

重要提示：顶层不侦听事件，因此拖动将移动底部图像，而不是顶部图像

// create a top layer that does not respond to mouse events
// any mouse events will filter down to the background image
// this enables the background to be dragged even while behind the top image

var topLayer=new Kinetic.Layer({listening:false,});
stage.add(topLayer);

// create a top image with transparent pixels 
// used as a viewport to see a portion of the bottom image

var mirror=new Kinetic.Image({ image:viewport,x:0,y:0 });
topLayer.add(mirror);
topLayer.draw();

示例代码：

<!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-v5.0.1.min.js"></script>
<style>
body{padding:20px;}
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
  width:350px;
  height:300px;
}
</style>        
<script>
$(function(){

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

    var bottomLayer=new Kinetic.Layer();
    stage.add(bottomLayer);
    var topLayer=new Kinetic.Layer({listening:false,});
    stage.add(topLayer);

    var loadedCount=0;
    //
    var bk=new Image();
    bk.onload=start;
    bk.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/desert1.jpg";
    //
    var viewport=new Image();
    viewport.onload=start;
    viewport.src="https://dl.dropboxusercontent.com/u/139992952/multple/car4.png";

    function start(){
        if(++loadedCount<2){return;}

        var city=new Kinetic.Image({ image:bk,x:0,y:0,draggable:true,width:700,height:440, });
        bottomLayer.add(city);
        bottomLayer.draw();

        var mirror=new Kinetic.Image({ image:viewport,x:0,y:0 });
        topLayer.add(mirror);
        topLayer.draw();

    }


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

</script>       
</head>
<body>
    <h4>Drag to move the background image in the mirror</h4>
    <div id="container"></div>
</body>
</html>


原型
正文{padding:20px；}
#容器{
边框：实心1px#ccc；
边缘顶部：10px；
宽度：350px；
高度：300px；
}
$（函数（）{
var阶段=新的动力学阶段({
容器：'容器'，
宽度：350，
身高：300
});
var layer=新的动能层（）；
阶段。添加（层）；
var bottomLayer=新的动能层（）；
阶段。添加（底层）；
var topLayer=new dynamic.Layer（{侦听：false，}）；
阶段。添加（顶层）；
var loadedCount=0；
//
var bk=新图像（）；
bk.onload=启动；
bk.src=”https://dl.dropboxusercontent.com/u/139992952/stackoverflow/desert1.jpg";
//
var viewport=新图像（）；
viewport.onload=开始；
viewport.src=”https://dl.dropboxusercontent.com/u/139992952/multple/car4.png";
函数start（）{
如果（++LoadedCount，请澄清“掩码”的含义.剪裁遮罩？不透明度遮罩？通过合成创建的遮罩？是的。我可以很好地处理剪裁遮罩。这就是我处理这种情况的方式：1.创建一个不可拖动的组并设置其剪裁边界。2.添加一个可拖动的动力学.Image对象。这种效果很好，没有任何性能损失。这种方法解决了我的问题在某种程度上。但仍然无法使其适用于任意形状。我需要使其适用于任何形状，而不仅仅是矩形或正方形。例如：使用Kinetic.RegularPolygon创建形状。现在，我们如何使其剪裁Kinetic.Image对象，以便形状不可拖动，但我们可以在此剪裁区域内拖动图像？感谢您的回复快速。这是一个可以接受的解决方案，其中我们有多个层，顶层不监听鼠标活动。这使底层能够监听并相应地采取行动。此解决方案也非常适合具有透明像素形式的任意形状，以便背景层具有透明效果。感谢Mark的回复。它仍然可以无法解决我们希望有一个由透明像素包围的形状，并允许我们拖动以形状为边界的基础图像，而图像在形状区域外不可见。如果可能，请让我知道。这将有助于我解决我面临的问题。我看到…遮罩上的透明像素，您不需要检查后，我发现Kinetic.Shape的最新KineticJS版本支持context.clip（Yea！），因此应该可以（1）使用Kinetic.Shape作为图像的剪辑遮罩。（2）在舞台上监听鼠标事件并创建“拖动”这将在形状内重新定位剪裁的图像。感谢Mark提供更新的解决方案。这似乎是一个很好的解决方案，我们可以使用形状剪裁图像。