使用 kineticjs 在画布上创建覆盖并删除部分覆盖答案

【问题标题】：creating overlay and removing parts of it on canvas using kineticjs使用 kineticjs 在画布上创建覆盖并删除部分覆盖
【发布时间】：2013-11-14 12:19:09
【问题描述】：

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

<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>

【问题讨论】：

标签： javascript html5-canvas kineticjs

【解决方案1】：

您的“剪辑显示”可以这样完成：

演示：http://jsfiddle.net/m1erickson/qXHAJ/

在底层：

添加图片。
添加一个半透明的 Rect 以“冻结”底部图像。

在叠加层中：

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

在群组中：

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

当用户拖动 Rect 时：

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

结果是图像除了可拖动的 Rect 之外的所有地方都“结霜”了。

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

<!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>

【讨论】：