我正在尝试申请CamanJS过滤到使用 KineticJS 创建的画布。有用：
Caman("#creator canvas", function()
{
this.lomo().render();
});
应用 CamanJS 过滤器后，我尝试使用画布执行某些操作（例如，拖动并移动图层或仅单击它），但随后画布恢复到其原始状态（在应用 CamanJS 过滤器之前）。所以问题是：如何“告诉”KineticJS 更新缓存（？）或执行诸如 stage.draw（） 之类的操作来保留新的画布数据？
Here is jsfiddle（点击“应用过滤器”，处理完成后，尝试拖动星号）。
顺便说一句：为什么处理这么慢？
提前致谢。
正如您所发现的，Kinetic 在内部重绘时会重绘原始图像。
您的 Caman 修改内容不会被使用或保存。
为了保持卡曼效果，您可以创建一个离屏画布并指示您的 Kinetic.Image 从该离屏画布获取其图像。
然后您可以使用 Caman 来过滤该画布。
结果是 Kinetic 将使用您的 Caman 修改后的画布图像进行内部重绘。
Demo: http://jsfiddle.net/m1erickson/L3ACd/
代码示例：
<!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>
<script src="http://cdnjs.cloudflare.com/ajax/libs/camanjs/3.3.0/caman.full.min.js"></script>
<style>
body{padding:20px;}
#container{
border:solid 1px #ccc;
margin-top: 10px;
width:350px;
height:350px;
}
</style>
<script>
$(function(){
var stage = new Kinetic.Stage({
container: 'container',
width: 350,
height: 350
});
var layer = new Kinetic.Layer();
stage.add(layer);
// create an offscreen canvas
var canvas=document.createElement("canvas");
var ctx=canvas.getContext("2d");
// load the star.png
var img=new Image();
img.onload=start;
img.crossOrigin="anonymous";
img.src="https://dl.dropboxusercontent.com/u/139992952/stack1/star.png";
// when star.png is loaded...
function start(){
// draw the star image to the offscreen canvas
canvas.width=img.width;
canvas.height=img.height;
ctx.drawImage(img,0,0);
// create a new Kinetic.Image
// The image source is the offscreen canvas
var image1 = new Kinetic.Image({
x:10,
y:10,
image:canvas,
draggable: true
});
layer.add(image1);
layer.draw();
}
// lomo the canvas
// then redraw the kinetic.layer to display the lomo'ed canvas
$("#myButton").click(function(){
Caman(canvas, function () {
this.lomo().render(function(){
layer.draw();
});
});
});
}); // end $(function(){});
</script>
</head>
<body>
<button id="myButton">Lomo the draggable Star</button>
<div id="container"></div>
</body>
</html>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
