나는 자주 (X3AP, fwiw) 재생하는 컴퓨터 게임을위한 맵을 만들기 위해 kineticJS를 사용하고 있습니다.완전히 표시되지 않은 레이어의 이미지로 변환
지도는 일련의 동적 이미지 개체로 XML에서 만들어지고 있습니다. 첫 번째 프로토 타입 빌드에서 저는 섹터의 다양한 이미지를 유니버스 레이어에 직접 추가했습니다 (즉, 왼쪽, 오른쪽, 위아래, 섹터 자체의 사각형, 이름 텍스트, 노트 스테이션을 포함하고 있는지 아닌지에 대한 동적 인 이미지). 모든 섹터는 레이어 (스테이지보다 훨씬 큰 레이어로 끝납니다)로 그려지고 그 레이어는 스테이지로 그려집니다.
해당 레이어에서 드래그를 구현하면 드래그가 느려집니다.
첫 번째 생각은 이러한 것들을 유니버스 맵을 나타내는 레이어에 직접 추가하는 대신 모든 것을 로컬 변수 레이어에 추가하고 해당 레이어의 이미지를 사용하고 처리 함수에서 결과 이미지를 I 지도에 사용하십시오. 이미지가 공백으로 반환되었습니다 (Firefox의 방화 녀와 확인).
나는 어떤 단계에서든 로컬 레이어를 그려 본 적이 없다고 생각했기 때문에 상상할 수있는 것이 아무것도 없었습니다. 그래서 내가했던 것처럼 전체 레이어를 그려 보았습니다. 그 이미지는이지만 이번에는 내가 기대했던 것보다 더 작은 이미지를 얻었습니다 (이 비슷한 이미지는 http://jsfiddle.net/3tUj7/5/입니다).
지도 레이어를 복제하여 속성을 실제 크기로 설정 한 두 번째 캔버스 개체에 추가하여 전체 이미지를 얻을 수 있습니다. 이것이 적절한 방법입니까? 이 넣었다 것처럼 필요한 곳
var layer;
$(
function()
{
var stage = new Kinetic.Stage({
width:100,
height:100,
container:'canvas'
});
layer = new Kinetic.Layer({
width:200,
height:200,
draggable:true
});
stage.add(layer);
layer.add(
new Kinetic.Rect({
fill:'black',
x:0,
y:0,
width:200,
height:200
})
);
for(var i = 0; i < 100; i++)
{
var x = parseInt(Math.random()*190);
var y = parseInt(Math.random()*190);
layer.add(
new Kinetic.Rect({
x:x,
y:y,
width:10,
height:10,
fill:'red',
stroke:'black',
strokeWidth:1
})
);
}
layer.draw();
// only returns the image of the *shown* part of the layer
layer.toImage({
callback:function(img)
{
$('#canvasImg').attr('src', img.src);
}
});
}
);