스프라이트에서 자른 이미지로 도형을 채우는 올바른 방법

결합 된 이미지 파일 (스프라이트)에서 부분 이미지 (자르기)로 도형을 채우기 위해 KineticJS에서 "올바른"방법에 대해 약간 혼란 스럽습니다.스프라이트에서 자른 이미지로 도형을 채우는 올바른 방법

fillPatternImage와 같이 정의 된 오프셋을 사용할 수 있습니다. 이미지의 나머지 부분은 보이지 않지만 전체 이미지를 그릴 수 있습니다. 스프라이트가 비교적 크고 자르기의 영향이 정확하게 fps를 줄이면 그 모양을 여분의 레이어로 옮긴 후에 만 성능을 얻을 수있었습니다.

내가 찾은 모든 대안은 "채우기"속성에 다른 "이미지"속성을 사용하지만이 때마다 검은 색 배경이 나타나는 것으로 보입니다.

이미지 모양을 사용하면 도움이되지만 내 모양이 드물기 때문에 거의 사용할 수 없습니다.

KineticJS 설명서에는 자르기 좌표 ("오프셋", 너비 및 높이 제외)를 지정하는 것에 대한 언급이 없으므로이를 수행하는 절대적인 올바른 방법은 무엇입니까?

출처

2013-03-12 Pharao2k

절대 "절대 올바른 방법"은 플랫폼 및 특정 코드에 따라 다르지만,

스프 라이트를 보았습니까? http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-sprite-tutorial/.

간단한 애니메이션 스프라이트를 마스크하려면 각 그리기 후에 일반 자바 스크립트를 사용하십시오.

context.globalCompositeOperation = 'destination-in';

복합 작업을 통한 drawImage의 성능은 웹 킷에서 수동으로 그림을 그리는 것보다 낫습니다.

출처

2013-03-12 14:18:18 Jaibuu

당신이 저를 오해 한 것 같아요. 여러 관련 이미지 (애니메이션) 에서처럼 스프라이트를 의미하지는 않았습니다. 스프라이트는 GET 요청 수를 줄이기 위해 파일을 공유하는 여러 독립 이미지와 같습니다. 내가 "목적지 인"을 이해하는 한, 이전 이미지도 볼 수 있어야하기 때문에 도움이되지 않을 것입니다. :) – Pharao2k

WebGL (openGL 어쨌든)과 같은 다른 기술과 달리 캔버스에서 스프라이트를 공유합니다. 단일 스프라이트 시트는 여전히 스프라이트 시트 당 하나의 그리기 대신 스프라이트 당 하나의 그리기를 요구합니다. 어쨌든, fillPatternImage로 이미지 객체를 채우면 객체 생성시 각 스프라이트에 전체 이미지가 그려 지지만 스프라이트를 계속 업데이트하거나 이동하면 전체 이미지 객체가 다시 그려지지 않습니다. 'destination-in'접근법은 최종 캔버스 이전에 오프 스크린 캔버스로 그릴 때 사용하기위한 것입니다. – Jaibuu

스프라이트에서 자른 이미지로 도형을 채우는 올바른 방법

답변

관련 문제