キャンバス ペインティング アプリケーションで、キャンバス全体にオーバーレイを作成する機能を追加したいのですが、キャンバス上に特定の長方形を作成すると、https://onpaste.com/にあるものとまったく同じように、その領域からオーバーレイが削除されます(フォーカスツールを選択) . 私が考えたのは、キャンバス上に長方形を作成すると、現在の画像をトリミングして、選択した場所のオーバーレイの上に再度キャンバスに画像を貼り付けることができるということです。キャンバスに貼り付ける前に画像をトリミングする方法がわかりません。Kinetic.Image オブジェクトのメソッド setFillPaternImage を使用しようとしましたが、ここでは JavaScript の画像オブジェクトの代わりに Kinetic.Image オブジェクトをフィードしたいと考えています。 setAttrs メソッドを使用できます。画像をトリミングして追加する方法、または同じことを達成するためのより良い方法があるかどうかを教えてください。フィドルへのリンク - > 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>