콜콜 (Collie) HTML5 콜 콜콜콜 콜콜콜콜콜콜 콜콜콜콜콜콜 콜콜콜 콜콜 콜 콜콜 콜콜콜콜 콜콜콜콜콜 콜콜콜 NHN
May 13, 2015
따라서 이미지를 캔버스에 그리기 전에영역 등의 정보를 별도로 관리해야 한다
var o = new Yame();o.age = 32/2*Math.sin(1)+13;o.height = "160cm";o.weight = unde-fined;o.cooking = false;o.defense = "backside";...
단일화된 렌더링 파이프라인을 이용해초당 60 번 등록된 객체를 그린다 function draw() { // 지우기 ctx.clearRect(0, 0, ctx.canvas.width, ctx.can-vas.height);
// 등록된 객체를 그리기 for (var i = 0; i < list.length; i++) { list[i].drawEachObject(); }};
// 초당 60 번 반복setInterval(draw, 1000 / 60);
requestAnimationFrame 을 사용하면좀 더 자연스러운 애니메이션이 된다모바일에서는 iOS6 부터 사용 가능function draw() { requestAnimationFrame(draw); // ...}
requestAnimationFrame(draw);
캔버스에서는 drawImage 를 이용해간단하게 구현할 수 있다var ctx = elCanvas.getContext("2d");ctx.drawImage( 대상이미지 , 원본 x, 원본 y, 원본너비 , 원본높이 , 대상 x, 대상 y, 대상너비 , 대상높이 );
원본 x,y,width,height
drawImage
대상 x,y,width,height
원본과 대상의 크기가 다르면픽셀 조작으로 인해 iOS4 에서 느려진다
원본 너비 100
drawImage
대상 너비 200
var ctx = elCanvas.getContext("2d");ctx.drawImage(elImg, 0, 0, 100, 100, 0, 0, 200, 100);
CSS3 3D Transforms 를 이용하면iOS4 에서도 하드웨어 가속이 가능안드로이드 4.0 이상에서도 하드웨어 가속 지원
.displayObject {-webkit-transform:translate3d(x,y,z) scale3d(x, y, z) rotateZ(deg);-wekit-transform-origin:0 0;-webkit-transform-style:preserve-3d;}
다른 CSS 속성이 같이 변경되면애니메이션 속도가 느리다background-position 과 같은 속성을 사용할 수 없다따라서 3D 속성만 사용할 수 있도록 구조를 만든다
DIV(overflow:hidden)IMG(position:absolute)
기기 별로 다른 대응을 해야 한다안드로이드 4.0 미만은 하드웨어 가속을 받을 수 없다
기기 /OS iPhone3GS
iPhone4
iPhone4S
Android3 미만
Android3 이상
렌더링방식
CSS3D
CSS3D(iOS4 이
하 ) Can-vas
Canvasor
DOMCSS3D
Canvas(iOS5 이
상 )
안드로이드 4.0 도 문제가 있다- 한 면이 2048 픽셀을 넘어가는 이미지를
사용하면화면에 검정색으로 표시 된다 .
- 회전을 하게 되면 overflow:hidden 영역의크기가 바뀐다 .
"10 만원대 갤럭시 S3 놓칠라 " 대리점 폭주
갤 S3 공짜폰에 유통 대란 ... " 전산 마비 "
" 갤럭시 S3 17 만원 판매 " 일파만파
to. 안드로이드 2.X 사용자 분들께
바꿔주세요 . 제발 ...
from. 익명의 개발자
이벤트 모델이 다르기 때문에캔버스에도 버블링을 구현
<div> <img /></div>
var layer = new collie.Layer();var parent = new collie.DisplayOb-ject();var child = new collie.DisplayObject();parent.addTo(layer);child.addTo(parent);img
div
body
child
parent
layer
캔버스와 DOM 에서 보다 정밀한 이벤트영역을 찾기 위해 hitArea 적용- PNPOLY 알고리즘을 이용해 캔버스의 getIm-
ageData 보다 빠르게 영역 확인 가능- 외부 도메인의 이미지일 경우 getImageData
사용 불가능[[126, 285],[104, 286],[101, 267],[105, 221],[101, 213],[88, 188],[85, 168],[81, 153],[94, 133],[97, 103],[94, 60],[95, 29],[103, 32],[109, 97],[143, 93],[147, 33],[151, 31],[152, 97],[161, 137],[166, 167],[165, 188],[169, 200],[165, 208],[160, 209],[159, 235],[159, 256],[159, 269],[162, 275],[162, 286],[138, 288],[130, 275],[132, 254]]
간단하게 고해상도 디스플레이 지원성능 문제로 인해 아이폰 레티나만 지원var isRetina = collie.Renderer.isRetinaDisplay();collie.ImageManager.addImages({ yame : (isRetina ? "large" : "small") + "/yame.png"});
a
개별 편의성 제공처음에 나온 토끼가 움직이는 애니메이션 구현 예제
collie.ImageManager.addImages({ yame : "img/yame.png" });
var layer = new collie.Layer({ width : 320, height : 480 });var yame = new collie.DisplayObject({ width : 100, height : 180, backgroundImage : "yame"}).addTo(layer);
collie.Timer.cycle(yame, 1000, { to : 7 });yame.move(200, 0, 100);
collie.Renderer.addLayer(layer);collie.Renderer.load(document.getElementById("t");collie.Renderer.start();