Signature_pad: 너비와 높이

+1이 패키지를 시도하고 크기 조정에 문제가 있습니다. 이상적으로는 모바일 장치에서 전체 너비에 걸쳐 있고 데스크탑에서 더 작아지기를 원합니다. @szimek 아이디어가 있습니까?

크기 조정과 관련된 이러한 문제는 정확히 무엇입니까?

이 예를 들어 보십시오. 그릴 때 위치가 잘못 되었습니다 http://jsfiddle.net/4qjwr06h/1/

좋아, 아마 내가 바보가 될거야. 반응형을 원한다면 캔버스의 실제 너비를 변경하지 않고 대신 늘이기 때문에 width: 100% 를 <canvas> 로 해서는 안 됩니다. 대신 고정 너비를 사용해야 합니다.

데모 앱에서 resizeCanvas 방식을 확인할 수 있습니다. 이 두 줄을 데모에 추가하면 잘 작동합니다.

canvas.height = canvas.offsetHeight;
canvas.width = canvas.offsetWidth;

내 코드는 devicePixelRatio 도 고려하지만 솔직히 100% 맞는지는 잘 모르겠습니다.

효과가 있었던 것 같아요. 감사합니다.

비바트 예수

보낸 사람: Szymon Nowak [mailto:[email protected]]
보낸 날짜: 2015년 10월 7일 수요일 오전 10시 14분
받는 사람: szimek/signature_pad [email protected]
참조: crazzeto [email protected]
제목: Re: [signature_pad] 너비 및 높이(#118)

데모 앱에서 https://github.com/szimek/signature_pad/blob/master/example/js/app.js#L10 -L18 resizeCanvas 메소드를 확인할 수 있습니다. 이 두 줄을 데모에 추가하면 잘 작동합니다.

캔버스.높이 = 캔버스.오프셋높이;
캔버스.폭 = 캔버스.오프셋폭;

제 코드는 레티나 디스플레이도 고려하지만 솔직히 100% 맞는지는 잘 모르겠습니다.

—
이 이메일에 직접 답장하거나 GitHub https://github.com/szimek/signature_pad/issues/118#issuecomment -146207233 에서 확인하세요.

이 줄을 넣을 것을 제안해도 될까요?

canvas.height = canvas.offsetHeight;
canvas.width = canvas.offsetWidth;

문서/README에서? 그것을 알아내는 데 꽤 시간이 걸렸고 <canvas> 에 경험이 없는 다른 사람들에게도 해당될 수 있다고 생각합니다.

@Boldewyn 제안 감사합니다. 이것이 더 이상 필요하지 않게 만드는 PR이 있습니다. 올해 말까지 나는 그것을 병합하고 데모 앱을 업데이트하거나 이 정보를 README에 추가할 것입니다.