Konvajs剪切功能，但不透明

Question

我一直在使用Konvajs剪辑功能来限制在边界框内可以看到的内容。

有没有人设法写出类似的功能，但是当konva对象离开边界框时，它会改变不透明度而不是简单地看不见？

感谢您的意见。

Answer 1

这是一个工作版本。黄色区域是画布范围。中间的清晰图像是裁剪区域。半透明区域是图像的全部范围。点击&拖动剪辑区域，您可以看到显示图像的“剪切”部分。

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