性能减慢与kineticjs [英] Performance slow with kineticjs
问题描述
对不起，如果这个问题已经提出，我试图找到它不能。
Sorry if this question was asked already, I've tried to find it by couldn't.
我有一个画布，应该最终显示大约400-500矩形20-30像素高/宽。每个人都应该向左和向上移动一个像素鼠标，然后回到鼠标输出创建排序的选择行为。
现在，我的代码非常适合少量的形状，但是对于其中500个，它开始显着减慢。
从互联网上的一些例子，我看到，我可以创建动画层和移动对象，我需要动画那里。但是，这仍然需要我重新绘制主层以删除移动的项目从它的以前的位置...
这里的代码：
I have a canvas that should eventually show about 400-500 rectangles 20-30 pixels height/width. Each one of them should move one pixel left and up on mouse over and back on mouse out to create sort of selected behavior. Now, my code works great with small amount of shapes, but for 500 of them it starts slowing down dramatically. From some example on the internet I saw that I can create "animation layer" and move the object i need to animate there. But, this still requires me to redraw the main layer to remove the moved item from it's previous position... Here's the code:
var seatMap = {};
seatMap.seatTypes = {
economy: {
width: 20,
height: 20,
fill: 'red',
stroke: 'black',
strokeWidth: 4,
cornerRadius: 5
},
business: {
width: 22,
height: 22,
fill: 'red',
stroke: 'black',
strokeWidth: 4,
cornerRadius: 5
},
first: {
width: 25,
height: 25,
fill: 'red',
stroke: 'black',
strokeWidth: 4,
cornerRadius: 5
}
};
seatMap.Map = function (params) {
var stage = new Kinetic.Stage({
container: params.container,
width: params.width,
height: params.height
});
var mainLayer = new Kinetic.Layer();
var animationLayer = new Kinetic.Layer();
stage.add(mainLayer);
stage.add(animationLayer);
var addSeat = function (object) {
object.seat.mainLayerRef = mainLayer;
object.seat.animationLayerRef = animationLayer;
mainLayer.add(object.seat);
};
var refresh = function () {
mainLayer.draw();
}
return {
refresh: refresh,
addSeat: addSeat
}
}
seatMap.Seat = function (params) {
var seatType = params.seatType == null ? seatMap.seatTypes.economy : params.seatType;
var seat = new Kinetic.Rect({
width: seatType.width,
height: seatType.height,
x: params.x,
y: params.y,
fill: seatType.fill,
stroke: seatType.stroke,
strokewidth: seatType.strokewidth,
cornerRadius: seatType.cornerRadius,
listening: true
});
seat.staticXPosition = params.x;
seat.staticYPosition = params.y;
seat.on('mouseover', function (event) {
event.shape.moveTo(event.shape.animationLayerRef);
event.shape.setX(event.shape.staticXPosition - 2);
event.shape.setY(event.shape.staticYPosition - 2);
event.shape.animationLayerRef.draw();
event.shape.mainLayerRef.draw();
});
seat.on('mouseout', function (event) {
event.shape.setX(event.shape.staticXPosition);
event.shape.setY(event.shape.staticYPosition);
event.shape.moveTo(event.shape.mainLayerRef);
event.shape.animationLayerRef.draw();
event.shape.mainLayerRef.draw();
});
return {
seat: seat,
}
}
呈现画布的代码：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="scripts/jquery-1.8.0.js"></script>
<script type="text/javascript" src="scripts/kinetic-v3.10.5.min.js"></script>
<script type="text/javascript" src="scripts/local/seatMapKineticExtender.js"></script>
<!--<script type="text/javascript" src="scripts/local/app.js"></script>-->
<script>
$(function () {
var map = new seatMap.Map({
container: 'stage',
width: 1000,
height: 420
});
for (var i = 0; i < 800; i += 30) {
for (var j = 0; j < 500; j+=30) {
var seat = new seatMap.Seat({
seatType: seatMap.seatTypes.business,
x: i,
y: j
});
map.addSeat(seat);
}
}
//var seat = new seatMap.Seat({
// seatType: seatMap.seatTypes.business,
// x: 200,
// y: 200
//});
//map.addSeat(seat);
map.refresh();
});
</script>
</head>
<body>
<div id="stage" style="width: 1000px; height: 420px; margin: 0 auto; border: 1px solid black; position: relative">
<div style="position: absolute; top: 0; z-index: 1000">
<button id="zoomIn" type="button">Zoom In</button>
<button id="zoomOut" type="button">Zoom Out</button>
</div>
</div>
</body>
</html>
我觉得我在这里做错了事，但不幸的是我不熟悉kineticjs 。
任何人都可以指向正确的方向？
I feel that I do something very wrong here, but, unfortunately I'm not familiar with kineticjs enough. Can anyone point me to the right direction?
提前感谢，
Danny
Thanks in advance, Danny
推荐答案
好吧，这是一个很好的挑战。我认为问题是在形状事件，但在那里的改善是如此之小。
Alright, this was a good challenge. I thought that the problem was in the shape events but the improvement there were ever so small.
KineticJS中的事件通过搜索模型的坐标应用于特定的屏幕形状，直到与当前鼠标坐标匹配。所以通过只有一个图层，我们增加要搜索的数组的大小。
The events in KineticJS are applied to the specific on screen shapes by searching through the co-ordinates of the models until one matches the current mouse co-ordinates. So by having only one layer, we increase the size of the array to search.
修复是使用许多图层。我为每一行添加了一个图层。
The fix is to use many layers. I added a layer for every row.
以下代码中的一些其他更改是：
Some of the other changes in the code below are:
- 不要在图层之间移动图形。它引起数组拼接和索引移位。 c> setX（）setY（） 使用相对的
- 在教程中阅读的动画层概念用于在定时帧间隔上进行实际动画。
- 轻微的JS改进;当返回对象以隐藏私有数据和方法时，不要使用
new创建对象。
move（x，y） code> - Don't move shapes between layers. It causes an array splice and an index shift.
- Use the relative
move(x,y)method instead ofsetX() setY()methods for small shifts. - The animation layer concept you read in a tutorial is used for doing actual animation on a timed frame interval. We are just doing a normal shape move on an event.
- Minor JS improvement; When returning an object to hide private data and methods, don't use
newfor creating an object.
页
<script>
$(function () {
var map = seatMap.Map({
container: 'stage',
width: 1000,
height: 420
});
for (var i = 0; i < 800; i += 30) {
var layer = map.createLayer();
for (var j = 0; j < 500; j+=30) {
var seat = seatMap.Seat({
seatType: seatMap.seatTypes.business,
x: i,
y: j
});
map.addSeat(seat, layer);
}
layer.draw();
}
//var seat = new seatMap.Seat({
// seatType: seatMap.seatTypes.business,
// x: 200,
// y: 200
//});
//map.addSeat(seat);
map.refresh();
});
</script>
代码
seatMap.Map = function (params) {
var stage = new Kinetic.Stage({
container: params.container,
width: params.width,
height: params.height
});
var addSeat = function (object, layer) {
object.seat.layer = layer;
layer.add(object.seat);
};
var refresh = function () {
mainLayer.draw();
};
var createLayer = function() {
var layer = new Kinetic.Layer();
stage.add(layer);
return layer;
};
return {
createLayer : createLayer,
refresh: refresh,
addSeat: addSeat
};
}
seatMap.Seat = function (params) {
var seatType = params.seatType == null ? seatMap.seatTypes.economy : params.seatType;
var seat = new Kinetic.Rect({
width: seatType.width,
height: seatType.height,
x: params.x,
y: params.y,
fill: seatType.fill,
stroke: seatType.stroke,
strokewidth: seatType.strokewidth,
cornerRadius: seatType.cornerRadius,
listening: true
});
seat.staticXPosition = params.x;
seat.staticYPosition = params.y;
seat.on('mouseover', function (event) {
event.shape.move(-3,-3);
event.shape.layer.draw();
});
seat.on('mouseout', function (event) {
event.shape.move(3,3);
event.shape.layer.draw();
});
return {
seat: seat,
};
}
这篇关于性能减慢与kineticjs的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
