KineticJS帆布由CamanJS修改 [英] KineticJS canvas modified by CamanJS
问题描述
我正在尝试将 CamanJS 过滤器应用于使用KineticJS创建的画布。它的工作原理：
I'm trying to apply CamanJS filter to a canvas created with KineticJS. It works:
Caman("#creator canvas", function()
{
this.lomo().render();
});
在应用了CamanJS过滤器之后，我试图用画布做sth（例如拖动和移动图层或者只是点击它），但然后画布恢复到其原始状态（应用CamanJS过滤器之前）。所以问题是：如何告诉KineticJS更新缓存（？）或者像std一样使用stage.draw（）来保存新的canvas数据？
After applying a CamanJS filter I'm trying to do sth with canvas (eg. drag and move layer or just click on it), but then the canvas reverts to its original state (before applying CamanJS filter). So the question is: how to "tell" KineticJS to update cache(?) or do sth like stage.draw() to keep new canvas data?
a href =http://jsfiddle.net/8JD8N/2/ =nofollow> jsfiddle （点击应用过滤器，当处理完毕后，尝试拖动星标）。
Here is jsfiddle (click on "apply filter", when processing will be done, try to drag the star).
BTW：为什么处理这么慢？
BTW: why is the processing so slow?
提前感谢。
推荐答案
正如你已经发现，Kinetic将在内部重绘时重绘原始图片。
As you've discovered, Kinetic will redraw the original image when it internally redraws.
未使用或保存您的Caman修改内容。
Your Caman modified content is not used or saved.
为了保持Caman效果，您可以创建离屏画布，并指示您的Kinetic.Image从该离屏画布获取其图像。
To keep your Caman effect, you can create an offscreen canvas and instruct your Kinetic.Image to get its image from that offscreen canvas.
然后您可以使用Caman过滤该画布。
Then you can use Caman to filter that canvas.
结果是Kinetic将使用Caman修改的画布图像进行内部重绘。
The result is that Kinetic will do its internal redraws with your Caman modified canvas image.
演示： a href =http://jsfiddle.net/m1erickson/L3ACd/ =nofollow> http://jsfiddle.net/m1erickson/L3ACd/
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>
这篇关于KineticJS帆布由CamanJS修改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
