creating overlay and removing parts of it on canvas using kineticjs

问题

In a canvas painting application I want to add feature to create overlay over the whole canvas and then when I make a particular rectangle on the canvas the overlay should get removed from that region ,exactly like one on https://onpaste.com/ (select focus tool) . What I have thought is that if a rectangle is made on the canvas , then I can crop the current image and then paste the image on the canvas again over the overlay at the place which was selected . I am not sure , how to crop the image before pasting it on the canvas , I tried to use method setFillPaternImage of Kinetic.Image object ,but here I want to feed Kinetic.Image object instead of javascript image object because on Kinetic.Image object I can use setAttrs method . Please tell how I can crop and add the image or if there is a better way to achieve the same . Link to fiddle -> 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>

回答1:

Your "clipped reveal" can be accomplished like this:

A Demo: http://jsfiddle.net/m1erickson/qXHAJ/

In a bottom layer:

Add an image.
Add a semi-transparent Rect to "frost" the bottom image.

In an overlay layer:

Add a group to a top overlay layer.
Set the clip property of the group to the area you want revealed.

In the group:

Add the image again (this second image will be "revealed" only in the groups clip area).
Add a draggable Rect to act as your "view"
(the Rect will have its X/Y/width/height set to the groups clip area.

When the user drags the Rect:

Change the group's clipping area to the Rect's X/Y.
The Rect will act as a draggable indicator of where the reveal should be.

The result is that the image is "frosted" everywhere except the draggable Rect.

Here is code and a Fiddle: 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>

来源：https://stackoverflow.com/questions/19758263/creating-overlay-and-removing-parts-of-it-on-canvas-using-kineticjs

标签

javascript

html5-canvas

kineticjs