使用kineticjs在畫布上創建疊加層並刪除其中的部分

在畫布繪畫應用程序中，我想添加要素以在整個畫布上創建疊加層，然後當我在畫布上製作特定矩形時，疊加層應從該區域中移除，就像https://onpaste.com/（選擇焦點工具）上的一樣。我的想法是，如果在畫布上製作一個矩形，那麼我可以裁剪當前圖像，然後將圖像粘貼到選定位置的覆蓋圖上。我不確定，如何在將圖像粘貼到畫布上之前裁剪圖像，我嘗試使用Kinetic.Image對象的方法setFillPaternImage，但在此我想要提供Kinetic.Image對象而不是javascript image對象，因爲在Kinetic.Image對象上我可以使用setAttrs方法。請告訴我如何裁剪和添加圖像，或者是否有更好的方法來實現。鏈接撥弄 - >http://jsfiddle.net/hearsid/9a2Hn/使用kineticjs在畫布上創建疊加層並刪除其中的部分

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

來源

2013-11-03 Siddharth Sharma

你「被剪輯露」可以這樣實現：

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

enter image description here

在底層：

添加圖像。
添加一個半透明Rect以「霜」底部圖像。

在一個覆蓋層：

添加組到頂部覆蓋層。
將組的剪輯屬性設置爲您想要顯示的區域。

在基團：

再次添加圖像（該第二圖象將是「顯露」僅在組剪輯區）。
添加可拖動矩形來充當你的「視圖」
（該矩形將其X/Y /寬/高設置爲組剪輯區。

當用戶拖動矩形：。

更改這個組的剪切區域的矩形的X/Y
的矩形會充當其中揭示應該是一個可拖動的指標

結果是圖像除了可拖動的矩形以外都是「結霜」的。

這裏是代碼和一個小提琴：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>

來源

2013-11-04 00:25:21 markE

使用kineticjs在畫布上創建疊加層並刪除其中的部分

回答

相關問題