javascript-使用dynamicjs在画布上创建覆盖并删除其中的一部分
作者：互联网
在画布绘画应用程序中,我想添加功能以在整个画布上创建覆盖,然后在画布上制作一个特定的矩形时,覆盖应该从该区域中删除,就像https://onpaste.com/上的一个一样(选择聚焦工具).我想到的是,如果在画布上制作一个矩形,则可以裁剪当前图像,然后将图像再次粘贴到画布上选定位置的覆盖层上.我不确定如何在将图像粘贴到画布上之前对其进行裁剪,我尝试使用Kinetic.Image对象的setFillPaternImage方法,但是在这里我想提供Kinetic.Image对象而不是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>
解决方法:
您的“片段显示”可以这样完成：
演示：http://jsfiddle.net/m1erickson/qXHAJ/
在底层：
>添加图像.
>添加一个半透明的Rect来“冻结”底部图像.
在覆盖层中：
>将组添加到顶部覆盖层.
>将组的剪辑属性设置为要显示的区域.
在组中：
>再次添加图像(仅在组剪辑区域中“显示”第二个图像).
>添加可拖动的矩形作为您的“视图”
>(Rect将其X / Y /宽度/高度设置为分组剪辑区域.
当用户拖动Rect时：
>将组的剪切区域更改为Rect的X / Y.
> Rect将充当显示位置的可拖动指示器.
结果是除了可拖动的Rect之外,图像在所有地方都“蒙砂”了.
这是代码和小提琴：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,html5-canvas,javascript 来源： https://codeday.me/bug/20191122/2060651.html