Konvajs Clipping function but with opacity

Question

I've been using the Konvajs clipping function to limit what can be seen inside a bounding box.

Has anyone managed to write a similar function but when the konva object leaves the bounding box it changes in opacity instead of simply not being seen?

Thanks for the input.

score 2 · Answer 1 · answered Aug 07 '17 at 12:29

Here's a working version. The yellow region is the canvas extent. The clear image in the center is the clipping region. The semi-transparent region is the full extent of the image. Click & drag the clipped region and you can see the 'clipped off' component of the image displayed.

// this is the position for the clipping rectangle
var clipRect = {left: 30, top: 30, width : 420, height : 340, right: 450, bottom: 390};

// generic
// add a stage & add a layer
var s = new Konva.Stage({container: 'container', width: 800, height: 600});
var l = new Konva.Layer({draggable: true});
// background layer
var bgr = new Konva.Rect({x:0, y: 0, width: 500, height: 500, fill: 'gold', opacity: 0.1, listening: false})
l.add(bgr)
s.add(l);
// end of generic

// Add an image to show the full extent of the clipped image
var boundsRect  = new Konva.Image({opacity: 0.2, stroke: 'black', strokeWidth: 1, draggable: false, dash: [2, 2], listening: false});
l.add(boundsRect);


// to clip we have to add a group with a clip.
var vp = new Konva.Group({
  clip: { x: clipRect.left, y: clipRect.top, width : clipRect.width, height : clipRect.height}
});
// add a border to the clip region via a rect just surrounding it.
var r1  = new Konva.Rect({x: clipRect.left - 1, y: clipRect.top - 1, width : clipRect.width + 2, height : clipRect.height + 2, stroke: '#00008B', strokeWidth: 1, draggable: false});
l.add(r1);


/* This is the image that is the subject of the clipping effort */
var i=new Konva.Image({x: 0, y: 0, width: 0, height: 0, draggable: true,
      // we want to ensure that the image cannot be dragged
      // beyond the glip rect bounds.
      dragBoundFunc: function(pos) {
         var posRect = getPosRect(pos,this);
         var iPos = this.getClientRect();
         var newX = pos.x;
         var newY = pos.y;

         newX = (posRect.left >= clipRect.left) ? clipRect.left : posRect.left;
         newX = (posRect.right <= clipRect.right) ? clipRect.right - posRect.width : newX;                         
         newY = (posRect.top >= clipRect.top) ? clipRect.top : posRect.top;
         newY = (posRect.bottom <= clipRect.bottom) ? clipRect.bottom - posRect.height : newY;      

         return {
           x: newX,
           y: newY
         }}
       });  
i.on('dragmove', function() {
  setBoundRect(this);
});
vp.add(i);
var imageObj = new Image();
imageObj.onload=function () {
  i.image(imageObj);
  boundsRect.image(imageObj);
  i.width(imageObj.width);
  i.height(imageObj.height);
  setBoundRect(i);
  s.draw();
}
imageObj.src = "http://btckstorage.blob.core.windows.net/site13706/gallery/2015/Porthleven%20lifeboat%20day%202015%20f%20-%20Chris%20Yacoubian%20Ltd.jpg";

l.add(vp) // add image to clipping viewport

s.draw()


// used to get the client rect of a shape.
function getPosRect(pos, ele){
  var cliPos = ele.getClientRect();
  var posRect = {left: pos.x, top: pos.y, right: pos.x + cliPos.width, bottom: pos.y + cliPos.height, width: cliPos.width, height: cliPos.height};
  return posRect;
}


// set the bounds rect to the size of the given element
function setBoundRect(ele){
  var x = ele.position();
  var posRect = getPosRect(ele.position(), ele);
  boundsRect.position({x: posRect.left, y: posRect.top});
  boundsRect.size({width: posRect.width, height: posRect.height});
}




// change the image
$('img').on("click", function(e){
  imageObj.src = $(this).prop("src");
  
})

.pic
{
  max-width:150px; 
  max-height: 80px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/konvajs/konva/1.6.5/konva.min.js"></script>

<div id='container' style="display: inline-block; width: 750px; height: 400px; background-color: transparent; overflow: hidden;"></div>
<div style="display: inline-block; width: 500px; height: 400px; " >
  <p>
    <img class='pic'  src="http://btckstorage.blob.core.windows.net/site13706/gallery/2015/53%20-%20Chris%20Yacoubian%20Ltd.jpg"/>
  </p>
  <p>
    <img  class='pic'src="http://btckstorage.blob.core.windows.net/site13706/gallery/2015/Crew%20day%20Mousehole%202015%20e%20-%20Chris%20Yacoubian%20Ltd.jpg" />
  </p>
  <p>
    <img class='pic' src="http://btckstorage.blob.core.windows.net/site13706/gallery/2015/34%20-%20Chris%20Yacoubian%20Ltd.jpg"/>
  </p>

Konvajs Clipping function but with opacity

1 Answers1

Linked