Raphael - 브라우저의 창 크기에 맞게 용지 크기를 맞추는 방법?

Question

윈도우 크기에 맞게 Raphael의 용지 크기를 변경하고 싶습니다.

가 사용할 수있는 경우, I 전체 화면 모드에 맞게 싶습니다 [Firefox_13.0, Raphael_2.1.0, 지금 WindowsXP를 사용하여].

============================================== ====

(단계)

는 I 종이 생성 : 용지 라파엘 = (0, 50, 800, 600); // 초기 너비와 높이는 800과 600입니다.

종이에 물건을 올려 놓았습니다. 브라우저의

창 크기는 (파이어 폭스) windowW = window.innerWidth 및 winnowH = window.innerHeight에 의해 확인된다.

스케일링 값은 sv = windowW/800으로 계산됩니다.

그리고 paper.scale (sv, sv)로 용지 크기를 조정하십시오.

============================================== ====

(스크립트)

창로드 = 함수() {

paper = Raphael(0, 50, 800, 600); 
var background = paper.rect(0, 0, 800, 600).attr({fill:'#669999'}); 

// placing the objects 
var circle = ...; 
var rect = ...; 
var ellipse = ...; 

winowW = window.innerWidth; 
winowH = window.innerHeight; 
sv = winowW/800. 

paper.scale(sv, sv); 

}

============== ====================================

(결과)

paper.scale (sv, sv) 및 background.scale (sv, sv)은 rect.scale (sv) 아니.

왜 이런 경우입니까? window.onresize = function() {...}에 의해 창 크기를 실시간으로 얻을 수 있습니다. 더 나은 방법이 있다면 말해주십시오. 나는 두 점을 따라 성공했습니다

Answer 1

감사 :

1) "종이"자체가 조작 개체가 아닙니다. 광고 게시판으로 봐야한다고 생각합니다.

2) 일 = ​​paper.set()를 사용하고있는 객체 (원, RECT, ...)했습니다. 그리고 st.scale (sv, sv, 0, 0)을 사용하십시오;

* 세 번째와 네 번째 매개 변수 (0, 0)는 매우 효과가 없습니다.

(주)

직렬 리사이징 연산 함수 "스케일()"에 대한 좋지 않다. 각 크기 조정 계수는 숫자의 겹쳐서 표시되기 때문에. 따라서 1.1 배 크기 조정 작업을 5 번 수행하면 크기는 1.1^5가됩니다.

Answer 2

사용 setViewBox()

그것은 일을해야 http://raphaeljs.com/reference.html#Paper.setViewBox