globalCompositeOperation与KineticJS
globalCompositeOperation与KineticJS
提问于 2013-09-03 02:57:44
如何将globalCompositeOperation与KineticJS结合使用？我见过几个创建自定义函数的例子，但它们似乎都过时了，不再起作用了。
我正在尝试创建一个应用程序，其中一个形状(如一个圆圈)可以在画布周围移动，并显示其下方的图像，然后锁定位置以创建图像掩码。
似乎使用复合比尝试使用fillImagePattern更好。任何想法都将不胜感激。
谢谢，-克里斯
回答 1
Stack Overflow用户
回答已采纳
发布于 2013-09-03 04:32:58
这里是如何在KineticJS中使用globalCompositeOperation来做“显示”
方法是：
- 创建两个动态层:背景层和顶层。
- 在背景层上放一张图像。
- 添加一个完全填充顶层的矩形。
- 在顶层添加自定义形状(圆圈)。
- 自定义循环使用“目的-out”组合来“显示”下面的图像。
当然，如果您的设计允许矩形“显示”，您可以创建一个剪辑区域。
下面是代码和Fiddle：http://jsfiddle.net/m1erickson/QcnHa/
<!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.5.5.min.js"></script>
<style>
#container{
border:solid 1px #ccc;
margin-top: 10px;
width:400px;
height:400px;
}
</style>
<script>
$(function(){
var stage = new Kinetic.Stage({
container: 'container',
width: 400,
height: 400
});
var layerBk = new Kinetic.Layer();
stage.add(layerBk);
var layer = new Kinetic.Layer();
layer.setDraggable("true");
stage.add(layer);
var img=new Image();
img.onload=function(){
start();
}
img.src="koolaidman.png";
function start(){
var image=new Kinetic.Image({
x:0,
y:0,
width:300,
height:300,
image:img
});
layerBk.add(image);
var rect = new Kinetic.Rect({
x: -300,
y: -300,
width: 1000,
height: 1000,
fill: 'skyblue',
stroke: 'lightgray',
strokeWidth: 3
});
layer.add(rect);
var revealOutline=new Kinetic.Circle({
x:120,
y:120,
radius:78,
stroke:"black",
strokeWidth:4
});
layer.add(revealOutline);
var thumb=new Kinetic.Polygon({
points:[200,125, 200,115, 250,100, 250,140],
fill:"green",
stroke:"black"
});
layer.add(thumb);
var reveal = new Kinetic.Shape({
drawFunc: function(canvas) {
var context = canvas.getContext();
context.save();
context.beginPath();
context.globalCompositeOperation="destination-out";
context.arc(120,120,75,0,Math.PI*2,false);
context.closePath();
canvas.fillStroke(this);
context.restore();
},
dragBoundFunc: function(pos) { return(pos); },
fill: '#00D2FF',
stroke: 'black',
strokeWidth:4,
draggable:true
});
reveal.on("mousedown",function(){
console.log("reveal: "+getX());
});
layer.add(reveal);
layerBk.draw();
layer.draw();
}
}); // end $(function(){});
</script>
</head>
<body>
<p>Drag the green grabber to move the reveal</p>
<div id="container"></div>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18583431
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号