在 KineticJS 4.7.2 上使用 globalcompositeoperations
Posted
技术标签:
【中文标题】在 KineticJS 4.7.2 上使用 globalcompositeoperations【英文标题】：use globalcompositeoperations on KineticJS 4.7.2 【发布时间】：2013-11-02 22:31:00 【问题描述】：使用 KineticJS 4.6.0 在this question 回答了这个问题，提供了这个fiddle
但是...知道如何在最新版本的 kineticjs 上执行此操作吗？
我用 kineticjs 4.7.2 尝试了同样的小提琴：http://jsfiddle.net/qNtSg/ 我刚刚用新的 API 改变了 drawFunc
drawFunc: function (context)
...
context.fillStrokeShape(this);
合成不工作
【问题讨论】：
【参考方案1】：Kinetic.Shape 在最近的版本中发生了变化。
现在 Shape drawFunc 接收上下文的包装器而不是画布。
但是，包装的上下文仍然不支持globalCompositeOperation。
因此，您仍然需要通过获取实际的 html 上下文（而不是包装的上下文）来“作弊”。
以下是获取实际 html 上下文的方法：
drawFunc: function(context)
var ctx=this.getContext()._context;
....
所以这里是修改后的代码和小提琴：http://jsfiddle.net/m1erickson/h3DGB/
var reveal = new Kinetic.Shape(
drawFunc: function(context)
var ctx=this.getContext()._context;
ctx.save();
ctx.beginPath();
ctx.globalCompositeOperation="destination-out";
ctx.arc(120,120,75,0,Math.PI*2,false);
ctx.closePath();
ctx.fill();
ctx.restore();
,
dragBoundFunc: function(pos) return(pos); ,
fill: '#00D2FF',
stroke: 'black',
strokeWidth:4,
draggable:true
);
【讨论】：
【参考方案2】：非常鼓舞人心的答案。我的要求略有不同，但我可以通过阅读来做到这一点。留下评论的小提琴以便做出贡献）。 我在这里是因为声誉低于 50 岁，我还不能发表评论 :)
再次感谢 MarkE 的启发， 愚蠢的东西不能在没有代码的情况下发布小提琴
马克西
<html>
<head>
<style>
body
margin: 20px;
padding: 20px;
</style>
</head>
<body>
</body>
</html>
愚蠢的东西不能在没有代码的情况下发布小提琴
http://jsfiddle.net/L7eLR/
【讨论】：
以上是关于在 KineticJS 4.7.2 上使用 globalcompositeoperations的主要内容，如果未能解决你的问题，请参考以下文章