2014-07-14 7 views
1

캔버스의 크기를 조정할 때 효과가 나타나기를 원하지만 그 위에 그려지는 패스의 너비는 여전히 동일합니다. 그러나 캔버스 너비에 비례하여 너비가 변경됩니다. 경로를 다시 칠하려고했지만 종이 객체는 경로에 적용된 새로운 설정에도 불구하고 이전 너비와 높이를 기억하고 경로를 조정하는 것처럼 보입니다. 해결책은 경로 너비를 조정하는 것이지만 더 부드럽게 해결하기를 바랍니다.Paper.js의 패스 너비를 변경하지 않고 크기를 조정하는 캔버스


ANSWER 가장 용액 경로 ​​및 형상의 폭 및 반경 스케일링을 보인다. 크기를 조정 한 후 새 패스를 그릴 때 이전 폭과 높이를 새 포인트 좌표로 전달해야합니다. 어쩌면 이것은 부드럽게 해결되지는 않지만 작동하고 또 다른 것을 보지 못합니다.

http://paperjs.org/tutorials/getting-started/working-with-paper-js/#canvas-configuration

그런 다음 그것의 크기를 변경,하지만 따라 내용을 확장 안 :

+0

경로의 위치에도 문제가 있습니다. 그것은 작은 하바 훨씬 더 큰 해상도로 resisising 후 캔버스 보인다 .... 그리고 내 경로는 이미지와 같은 상대적 위치에 위치를 변경하지 않습니다. – VIPPER

답변

3

당신은 여기를 참조 자동으로 크기를 조정 캔버스를 알 수 있습니다. paper.js 웹 사이트의 모든 예에서 실제로이를 볼 수 있습니다. http://paperjs.org/examples/rounded-rectangles/

크기 조정이 프로그래밍 방식으로 수행되도록 지시됩니다.

캔버스 객체의 크기를 CSS 방식으로 조절하면 마우스 이벤트에서 날아간 픽셀과 잘못된 오프셋이 생길 수 있습니다.

resize 속성을 사용하지 않고 캔버스의 크기를 조정해야하는 경우 paper.view.setViewSize(width, height)을 호출하면 캔버스 크기를 조정할 수 있으며 HiDPI 설정 및 모든 사항을 고려하여 크기 조정을 수행합니다.

1

파티가 좀 늦을 수 있지만 최근에 같은 문제가 발생하여 resize 속성을 canvas 요소에 추가하여 해결했습니다.

HTML

<canvas id="myCanvas" resize="true"></canvas> 

명시 적으로true 동일하게 resize을 설정 하는 것을 잊지 마세요 (즉 resize="true").

단순히 resize 속성이 있거나 다른 값으로 설정하면됩니다.