Javascript 由CamanJS修改的KineticJS帆布
我正在尝试将过滤器应用于使用KineticJS创建的画布。它的工作原理是:Javascript 由CamanJS修改的KineticJS帆布,javascript,image-processing,canvas,kineticjs,camanjs,Javascript,Image Processing,Canvas,Kineticjs,Camanjs,我正在尝试将过滤器应用于使用KineticJS创建的画布。它的工作原理是: Caman("#creator canvas", function() { this.lomo().render(); }); 在应用了CamanJS过滤器后,我试图对画布做些什么(例如,拖动并移动图层或只是单击它),但是画布会恢复到其原始状态(在应用CamanJS过滤器之前)。所以问题是:如何“告诉”KineticJS更新缓存(?)或执行类似stage.draw()的操作来保留新的画布数据 这里是(点击“应用
Caman("#creator canvas", function()
{
this.lomo().render();
});
在应用了CamanJS过滤器后,我试图对画布做些什么(例如,拖动并移动图层或只是单击它),但是画布会恢复到其原始状态(在应用CamanJS过滤器之前)。所以问题是:如何“告诉”KineticJS更新缓存(?)或执行类似stage.draw()的操作来保留新的画布数据
这里是(点击“应用过滤器”,当处理完成时,尝试拖动星号)
顺便问一下:为什么处理速度这么慢
提前感谢。正如您所发现的,Kinetic在内部重画时将重画原始图像 您的Caman修改内容未被使用或保存 为了保持你的卡曼效果,你可以创建一个屏幕外画布,并指示你的Kinetic.Image从该屏幕外画布获取图像 然后您可以使用Caman来过滤画布 其结果是,Kinetic将使用修改后的Caman画布图像进行内部重画 演示: 代码示例:
<!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>
原型
正文{padding:20px;}
#容器{
边框:实心1px#ccc;
边缘顶部:10px;
宽度:350px;
高度:350px;
}
$(函数(){
var阶段=新的动力学阶段({
容器:'容器',
宽度:350,
身高:350
});
var layer=新的动能层();
阶段。添加(层);
//创建屏幕外画布
var canvas=document.createElement(“canvas”);
var ctx=canvas.getContext(“2d”);
//加载star.png文件
var img=新图像();
img.onload=启动;
img.crossOrigin=“匿名”;
img.src=”https://dl.dropboxusercontent.com/u/139992952/stack1/star.png";
//加载star.png时。。。
函数start(){
//将星形图像绘制到屏幕外画布
canvas.width=img.width;
canvas.height=img.height;
ctx.drawImage(img,0,0);
//创建一个新的动态图像
//图像源是屏幕外的画布
var image1=新的动力学图像({
x:10,
y:10,
图片:画布,
德拉格布尔:是的
});
添加图层(图1);
layer.draw();
}
//洛莫画布
//然后重新绘制dynamic.layer以显示lomo'ed画布
$(“#我的按钮”)。单击(函数(){
卡曼(画布,函数(){
this.lomo().render(函数(){
layer.draw();
});
});
});
}); // end$(函数(){});
洛莫:可拖动的星星
我刚刚添加了JSFIDLE,应该更好:)Thx,非常好用。我的应用程序要复杂得多,但我会尝试实现你的解决方案。这在桌面上非常有效,但在移动设备上,Caman过滤器非常慢。有什么方法可以改善这一点吗?是的,图像过滤使用getImageData
&putImageData
,速度非常慢,尤其是在“动力不足”的移动设备上。唯一的改进是,如果你可以重构你的设计来预处理图像,这样用户就不必等待它了。