javascript – kineticjs表现缓慢
作者:互联网
对不起,如果已经提出这个问题,我试图找不到它.
我有一个画布,最终应该显示大约400-500个矩形20-30像素的高度/宽度.它们中的每一个都应该在鼠标移开时向上和向后移动一个像素,以创建一些选定的行为.
现在,我的代码在少量形状下工作得很好,但是对于其中的500个,它开始显着减慢.
从互联网上的一些例子中我看到我可以创建“动画层”并移动我需要在那里制作动画的对象.但是,这仍然需要我重绘主图层以从之前的位置移除移动的项目…
这是代码:
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并不熟悉.
有人能指出我正确的方向吗?
提前致谢,
丹尼
解决方法:
好吧,这是一个很好的挑战.我认为问题出在形状事件中,但那里的改进是如此之小.
通过搜索模型的坐标直到一个匹配当前的鼠标坐标,将KineticJS中的事件应用于特定的屏幕形状.因此,通过只有一个图层,我们增加要搜索的数组的大小.
修复是使用多个层.我为每一行添加了一个图层.
以下代码中的一些其他更改包括:
>不要在图层之间移动形状.它会导致数组拼接和索引转换.
>对于小班次,使用相对移动(x,y)方法而不是setX()setY()方法.
>您在教程中阅读的动画层概念用于在定时帧间隔上执行实际动画.我们正在对事件进行正常的形状移动.
>小JS改进;返回对象以隐藏私有数据和方法时,请勿使用new来创建对象.
页
<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,javascript,canvas 来源: https://codeday.me/bug/20191007/1863752.html