使用kineticjs创建叠加并在画布上移除部分叠加 [英] creating overlay and removing parts of it on canvas using kineticjs
问题描述
在画布绘画应用程序中，我想添加功能以在整个画布上创建叠加，然后当我在画布上创建一个特定的矩形时，叠加层应该从该区域移除，就像在
< ;！DOCTYPE html>
< html>
< head>
< meta charset =utf-8>
< title> Prototype< / title>
< script type =text / javascriptsrc =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;
宽度：300px;
身高：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;
函数start（）{
var image = new Kinetic.Image（{
image：img，
x：0，
y：0，
宽度：300，
身高：300
}）;
layer.add（图片）;
var frost = new Kinetic.Rect（{
x：0，
y：0，
width：300，
height：300，
fill：白色，
不透明度：0.70
}）;
layer.add（霜冻）;
var viewport = new Kinetic.Group（{
x： 0，
y：0，
宽度：300，
身高：300，
剪辑：[30,30,100,100]
}）;
frostlayer.add（viewport）;
unfrosted = new Kinetic.Image（{
image：img，
x：0，
y：0，
width：300，
身高：300
}）;
viewport.add（未磨砂）;
view = new Kinetic.Rect（{
x：30，
y：30，
width：100，
height：100，
strokeWidth：3，
stroke：紫色，
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>拖动未经过磨损的Rect< / h3>
< div id =container>< / div>
< / body>
< / html>
In a canvas painting application I want to add feature to create overlay over the whole canvas and then when I make a particular rectangle on the canvas the overlay should get removed from that region ,exactly like one on https://onpaste.com/ (select focus tool) . What I have thought is that if a rectangle is made on the canvas , then I can crop the current image and then paste the image on the canvas again over the overlay at the place which was selected . I am not sure , how to crop the image before pasting it on the canvas , I tried to use method setFillPaternImage of Kinetic.Image object ,but here I want to feed Kinetic.Image object instead of javascript image object because on Kinetic.Image object I can use setAttrs method . Please tell how I can crop and add the image or if there is a better way to achieve the same . Link to fiddle -> 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>
Your "clipped reveal" can be accomplished like this:
A Demo: http://jsfiddle.net/m1erickson/qXHAJ/
In a bottom layer:
- Add an image.
- Add a semi-transparent Rect to "frost" the bottom image.
In an overlay layer:
- Add a group to a top overlay layer.
- Set the clip property of the group to the area you want revealed.
In the group:
- Add the image again (this second image will be "revealed" only in the groups clip area).
- Add a draggable Rect to act as your "view"
- (the Rect will have its X/Y/width/height set to the groups clip area.
When the user drags the Rect:
- Change the group's clipping area to the Rect's X/Y.
- The Rect will act as a draggable indicator of where the reveal should be.
The result is that the image is "frosted" everywhere except the draggable Rect.
Here is code and a Fiddle: 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>
这篇关于使用kineticjs创建叠加并在画布上移除部分叠加的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
