Javascript 使用kineticjs在画布上创建覆盖并移除部分覆盖_Javascript_Html5 Canvas_Kineticjs

Javascript 使用kineticjs在画布上创建覆盖并移除部分覆盖

javascript html5-canvas

Javascript 使用kineticjs在画布上创建覆盖并移除部分覆盖,javascript,html5-canvas,kineticjs,Javascript,Html5 Canvas,Kineticjs,在画布绘制应用程序中，我想添加一个功能，在整个画布上创建覆盖，然后当我在画布上创建一个特定的矩形时，覆盖应该从该区域中移除，就像打开一个一样（选择聚焦工具）。我的想法是，如果在画布上制作一个矩形，那么我可以裁剪当前图像，然后将图像再次粘贴到画布上选定位置的覆盖层上。我不确定，在将图像粘贴到画布上之前，如何裁剪图像，我尝试使用方法setFillPaternImage of Kinetic.image对象，但在这里我想输入Kinetic.image对象而不是javascript图像对象，因为在Kin

在画布绘制应用程序中，我想添加一个功能，在整个画布上创建覆盖，然后当我在画布上创建一个特定的矩形时，覆盖应该从该区域中移除，就像打开一个一样（选择聚焦工具）。我的想法是，如果在画布上制作一个矩形，那么我可以裁剪当前图像，然后将图像再次粘贴到画布上选定位置的覆盖层上。我不确定，在将图像粘贴到画布上之前，如何裁剪图像，我尝试使用方法setFillPaternImage of Kinetic.image对象，但在这里我想输入Kinetic.image对象而不是javascript图像对象，因为在Kinetic.image对象上，我可以使用setAttrs方法。请告诉我如何裁剪和添加图像，或者是否有更好的方法来实现同样的效果。链接到小提琴->


这
var阶段=新的动力学阶段({
容器：'容器'，
宽度：500，
身高：300
});
var layer=新的动能层（）；
var img=新图像（）；
img.onload=函数（）{
imgObj=新的动力学图像({
x:0，y:0，宽度：400，高度：300，图像：img
});
图层添加（imgObj）；
var循环=新的动力学循环({
x:30，y:30，半径：30，填充：“红色”
});
图层。添加（圆圈）；
var rect=新的动能.rect({
x:0，y:0，宽度：300，高度：500，填充：“灰色”，不透明度：0.5
});
层。添加（rect）；
阶段。添加（层）；
}
img.src=“some.jpg”；
$（“#按钮”）。单击（函数（）{
rect2=新的动力学.Rect({
x:200，y:30，宽：100，高：100
});
/*
小心评论区域，这里我想在使用FillPaternImage之前裁剪图像
var img2=新图像（）；
img2.onload=函数（）{
imgObj2=新的动能图像({
图片：img2，
x:300
});
imgObj2=imgObj.clone（）；
setAttrs（{image:img2，x:100，y:0}）；
*/
img2=img；
rect2.setFillPatternImage（img2）；
添加层（rect2）；
layer.draw（）；
});

您的“剪裁展示”可以这样完成：

演示：

在底层：

添加一个图像
将半透明矩形添加到底部图像的“frost”

在覆盖层中：

将组添加到顶部覆盖层
将组的“剪辑”属性设置为要显示的区域

在组中：

再次添加图像（第二个图像将仅在“组剪辑”区域中“显示”）
添加一个可拖动的矩形作为“视图”
（矩形将其X/Y/宽度/高度设置为组剪辑区域

当用户拖动Rect时：

将组的剪裁区域更改为矩形的X/Y
Rect将作为显示位置的可拖动指示器

结果是，除了可拖动的矩形外，图像到处都是“磨砂”的。

下面是代码和小提琴：


原型
正文{padding:20px；}
#容器{
边框：实心1px#ccc；
边缘顶部：10px；
宽度：300px；
高度：300px；
}
$（函数（）{
var阶段=新的动力学阶段({
容器：'容器'，
宽度：300，
身高：300
});
var layer=新的动能层（）；
var frostlayer=新的dynamic.Layer（）；
阶段。添加（层）；
阶段。添加（霜层）；
var观点；
var img=新图像（）；
img.onload=函数（）{
start（）；
}
//img.src=”https://dl.dropboxusercontent.com/u/139992952/stackoverflow/KoolAidMan.png";
img.src=“KoolAidMan.png”；
函数start（）{
var image=新的动能图像({
图片：img，
x:0,，
y:0，
宽度：300，
身高：300
});
图层。添加（图像）；
var frost=新的动能.Rect({
x:0,，
y:0，
宽度：300，
身高：300，
填充：“白色”，
不透明度：0.70
});
层。添加（霜）；
var viewport=new dynamic.Group({
x:0,，
y:0，
宽度：300，
身高：300，
短片：[30,30100100]
});
添加（视口）；
解冻=新的动力学图像({
图片：img，
x:0,，
y:0，
宽度：300，
身高：300
});
viewport.add（解冻）；
视图=新的动能.Rect({
x:30，
y:30，
宽度：100，
身高：100，
冲程宽度：3，
笔画：“紫色”，
德拉格布尔：是的
});
view.on（“dragmove”，function（））{
viewport.setClip（this.getX（），this.getY（），100100）；
});
viewport.add（视图）；
layer.draw（）；
frostlayer.draw（）；
}
})；//end$（函数（）{}）；
拖动未冻结的矩形

<html>
<head>
<style>


</style>
</head>

<body>


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

<button id="button">this</button>
<script src="js/jquery.js"></script>
<script src="js/kinetic.js"></script>
<script>

var stage = new Kinetic.Stage({
container:'container',
width:500,
height:300
});

var layer=new Kinetic.Layer();


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

imgObj = new Kinetic.Image({
x:0,y:0,width:400,height:300,image:img
});

layer.add(imgObj);


var circle = new Kinetic.Circle({
x:30,y:30,radius:30,fill:'red'
});

layer.add(circle);

var rect = new Kinetic.Rect({
    x:0,y:0,width:300,height:500,fill:'gray',opacity:0.5
    });

layer.add(rect);    

stage.add(layer);
}
img.src="some.jpg";

$("#button").click(function() {

 rect2 = new Kinetic.Rect({
x:200,y:30,width:100,height:100
});

/*
Careful with the commented area , here I wanted to crop the image before using FillPaternImage
var img2 = new Image();
img2.onload = function() {
imgObj2 = new Kinetic.Image({
image: img2 , 
x:300 
});
imgObj2 = imgObj.clone();
imgObj2.setAttrs({image :img2 ,x:100 , y:0 }); 
*/

img2 = img ;

rect2.setFillPatternImage(img2);
layer.add(rect2);
layer.draw();

});



</script>


</body>
</html>

<!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.7.2.min.js"></script>

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

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

var view;

var img=new Image();
img.onload=function(){
  start();
}
//img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/KoolAidMan.png";
img.src="KoolAidMan.png";


function start(){

  var image=new Kinetic.Image({
      image:img,
      x:0,
      y:0,
      width:300,
      height:300
  });
  layer.add(image);

  var frost=new Kinetic.Rect({
      x:0,
      y:0,
      width:300,
      height:300,
      fill:"white",
      opacity:0.70
  });
  layer.add(frost);

  var viewport=new Kinetic.Group({
      x:0,
      y:0,
      width:300,
      height:300,
      clip:[30,30,100,100]
  });
  frostlayer.add(viewport);

  unfrosted=new Kinetic.Image({
      image:img,
      x:0,
      y:0,
      width:300,
      height:300
  });
  viewport.add(unfrosted);

  view=new Kinetic.Rect({
      x:30,
      y:30,
      width:100,
      height:100,
      strokeWidth:3,
      stroke:"purple",
      draggable:true
  });
  view.on("dragmove",function(){
      viewport.setClip(this.getX(),this.getY(),100,100);
  });
  viewport.add(view);

  layer.draw();
  frostlayer.draw();

}


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

</script>       
</head>

<body>
  <h3>Drag the unfrosted Rect</h3>
  <div id="container"></div>
</body>
</html>