Question

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

有没有人设法编写类似的函数但是当konva对象离开边界框时，它的透明度会发生变化，而不是简单地看不到？

感谢您的投入。

Answer 1

这是一个有效的版本。黄色区域是画布范围。中心的清晰图像是剪切区域。半透明区域是图像的完整范围。点击＆amp;拖动剪裁的区域，你可以看到“剪掉”＆＃39;显示图像的组成部分。

＆＃13;

// 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");
  
})

＆＃13;

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

＆＃13;

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

＆＃13;

Konvajs剪切功能但具有不透明度

1 个答案: