2
죄송합니다.이 질문을 이미 물어 본 적이 있다면 찾을 수 없었습니다.kineticjs의 성능이 느림
필자는 궁극적으로 약 400-500 개의 사각형 20-30 픽셀 높이/너비를 보여야하는 캔버스를 가지고 있습니다. 그들 각각은 선택된 동작을 만들기 위해 한 픽셀을 마우스 위로 왼쪽 위로 움직여야합니다. 이제 코드는 모양이 작을 때 훌륭하게 작동하지만, 그 중 500 가지가 크게 줄어들 기 시작합니다. 인터넷의 일부 예제에서 "애니메이션 레이어"를 만들고 거기에 애니메이션을 적용해야하는 개체를 이동할 수 있음을 확인했습니다. 그러나, 이것은 여전히 여기에 ... 그것은 이전 위치의에서 이동 항목을 제거하는 주요 계층을 다시 그려야 나를 필요로하는 코드입니다 :
<!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>
: 캔버스를 렌더링
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,
}
}
그리고 코드 나는 여기서 뭔가 잘못한다고 생각하지만, 불행하게도 나는 kineticjs에 대해 충분히 잘 모른다. 누구나 올바른 방향으로 나를 가리킬 수 있습니까? 사전에
감사합니다, 그렇게 할 것이다 (500 개) 도형 그리기
감사합니다, 나는 실제로이 솔루션을 고려했지만, 어쩌면 내가 부족 뭔가를 생각하고 나는이 모든 것을 하나의 계층에서 할 수있다. 또한 애니메이션을 변경 했으므로 이제 모든 모양으로 늘어난 모양이 커지므로 메인 레이어를 다시 그리지 않아도되며 모든 것이 원활하게 작동합니다. 다시 한 번 감사드립니다. – Dimkin