[英]Slow kinetic.js drawing in Firefox
i have some problems with Kinetic.js (5.0.1) in Debian with firefox (in Windows works well, in chromium works well). 我在使用Firefox的Debian中使用Kinetic.js(5.0.1)遇到了一些问题(在Windows中效果很好,在铬中效果很好)。 I'm trying to do a drawing board but is very slow.
我正在尝试制作绘图板,但是速度很慢。 Any solution to improve performance?
有提高性能的解决方案吗?
Thank you. 谢谢。
PD: here is my code. PD:这是我的代码。
var initializeDrawings = function() {
var myExistingLine;
var currentLine = [];
var mouseDrag = false;
var stage;
var background;
var backgroundlayer = new Kinetic.Layer();
var mylayer = new Kinetic.Layer();
var lineColor = 'black';
var lineWeight = 5;
var allmoves = [];
// Create an invisible shape that will act as an event listener
stage = new Kinetic.Stage({
container: 'container',
width: 600,
height: 600
});
var imageObj = new Image();
imageObj.onload = function() {
background = new Kinetic.Image({
width: stage.getWidth(),
height: stage.getHeight(),
image: imageObj
});
// Attach handlers
background.on('mousedown touchstart', function(e) {
var position = getPosition("container", e);
mouseDrag = true;
myExistingLine = new Kinetic.Line({stroke: lineColor, strokeWidth: lineWeight});
mylayer.add(myExistingLine);
currentLine.push(position.x);
currentLine.push(position.y);
});
background.on('mousemove touchmove', function(e) {
if(mouseDrag === true) {
var position = getPosition("container", e);
currentLine.push(position.x);
currentLine.push(position.y);
myExistingLine.setPoints(currentLine);
mylayer.batchDraw();
}
});
background.on('mouseup touchstop', function(e) {
allmoves.push ({ color: lineColor, grosor: lineWeight, points: currentLine });
mouseDrag = false;
currentLine = [];
});
stage.add(backgroundlayer.add(background));
stage.add(mylayer);
}
imageObj.src = "summoners-map.png";
};
Use mylayer.batchDraw
instead of mylayer.drawScene
. 使用
mylayer.batchDraw
而不是mylayer.drawScene
。
batchDraw
redraws your line only once per refresh cycle instead of attempting many redraws. batchDraw
在每个刷新周期仅重batchDraw
一次行,而不是尝试多次重画。
...And, don't do console.log in an active event handler like mousemove. ...而且,不要在像mousemove这样的活动事件处理程序中进行console.log。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.