Signature_pad: 도면 품질 향상

이것은 내가 지난 여름에 만든 빠르고 더러운 실험입니다. 아이디어는 움직이는 창 위에 기능을 사용하여 경로를 부드럽게 하는 것입니다. 창은 코드에서 설정되지만 속도에 따라 조정할 수 있습니다. 단순화를 위해 고정된 펜 너비를 사용했습니다.
http://scvsa-servizi.campusnet.unipr.it/tools/signature/signature_pad/example/

클.

@claaudiorivetti 정말 굉장합니다! 제가 그것을 확인해 보겠습니다. Google 드로잉 앱 중 하나가 동일한 솔루션을 사용하고 있었던 것으로 기억합니다. 그러나 iMessage의 이상한 점은 지연이 이 라이브러리보다 길지 않다는 것입니다...

스타일러스 대신 손가락을 사용하여 그리는 경우 터치 포인트가 꽤 넓고(확실히 1픽셀보다 넓음) 모바일 앱이나 브라우저가 실제로 이러한 터치 이벤트의 정확한 좌표를 파악하는 방법을 잘 모르겠습니다. 사례. 아마도 이전 점의 좌표와 현재 속도를 기반으로 브라우저가 수신한 좌표를 조정하고 두 점 사이의 경로를 보간하는 것이 가능할 것입니다. 의미가 있는지 또는 실험할 시간이 있는지 잘 모르겠습니다. 곡선 자체를 개선할 수 있는지 또는 점이 "이상적인" 선을 따르지 않는지 확인하려면 점을 표시해야 합니다.

@claaudiorivetti 멋지네요 어떻게 저런 마법을 얻을 수 있죠? :) 확실히 그것은 완전히 동적으로 조금 더 현실적이어야 할 것입니다. 아니면 그냥 더 두꺼운 선으로 충분할 것입니다.

내가 관찰한 대부분의 사람들은 어떤 이유에서인지 느리게 작성하며 90년대처럼 보입니다. SignaturePad 입력 매개변수를 조정하여 거친 모서리를 제거할 수 없습니다.

( 추신: 데스크톱, iPhone, 태블릿 펜 또는 손가락만 사용하는지 여부는 중요하지 않습니다. 항상 동일하게 보입니다. 캔버스는 스케일 3,3에서 1200x600픽셀(즉, 400x400픽셀)입니다. 해상도가 문제)

나를 놀라게 한 것은 다른 라이브러리에는 동적 너비가 전혀 없지만 일반적으로 나에게 "더 깨끗해 보인다"는 것입니다. 예를 들어 내가 위에 게시한 이미지와 비교합니다.

supersignature 는 곡선을 자동 수정합니다.

jSignature )는 조금 더 흔들리지만 여전히 픽셀처럼 보이지 않습니다.

@halo 후처리/자동 수정을 피하고 싶지만 결과가 일반적으로 훨씬 더 좋다는 데 동의합니다. 문제는 적어도 iMessage에서는 눈에 띄는 후 처리 없이 부드러운 선을 가질 수 있다는 것입니다. 시도하고 싶은 몇 가지가 있습니다. 예를 들어 서로 너무 가까운 건너뛰기 지점이 있습니다. 스로틀링이 최근에 추가되었지만 누군가가 정말 천천히 그리는 경우에는 별로 도움이 되지 않습니다.

또 다른 점은 제가 이 라이브러리를 더 이상 사용하지 않는다는 것입니다. 그래서 더 부드러운 선을 제공하는 방법에 대한 몇 가지 예를 찾지 못하면( Square의 게시물 과 마찬가지로) 조사할 시간이 많지 않을 것입니다. 내 자신.

@halo 빠른 실험을 했습니다. 이전 항목과 너무 가까우면 한 지점을 건너뜁니다. 매우 느리게 그릴 때 그리기 품질을 향상시키는 것처럼 보이지만 눈에 띄는 지연이 발생합니다. 그래도 iOS iMessage 또는 Notes 앱에서 가능한 것과는 거리가 멀습니다 . http://signature-pad.surge.sh/ 에서 데모를 볼 수 있으며 signaturePad.minDistance 값을 변경하여 영향을 확인할 수 있습니다. 그림. 기본값은 5로, 이전 지점이 새 지점과 5px보다 가까우면 새 지점을 건너뜁니다.

또한 performance.now to #_updateStroke 함수를 사용하여 타이밍을 추가했습니다(데모에는 없음). 비동기식으로 진행되거나 뭔가 엉망이 되지 않는 한 1도 안 되는 것처럼 보입니다. 점을 추가하고 곡선을 그리는 데 밀리초가 소요됩니다. 더 멋진 처리를 할 시간이 많다는 뜻입니다.

실제 사용자와 함께 프로덕션 환경에서 이 기능을 사용해보고 피드백을 주시면 감사하겠습니다. Github에 브랜치가 있습니까 아니면 사용할 수 있는 dist 파일이 있습니까?

접근 방식이 마음에 듭니다. 시도해 주셔서 감사합니다.

편집 : 나는 http://signature-pad.surge.sh/js/signature_pad.js 를 사용할 수 있다고 생각합니다.

@halo 자신만의 버전(예: 축소)을 만들고 싶다면 https://github.com/szimek/signature_pad/tree/improve-drawing-quality 브랜치로 푸시했습니다.

감사합니다. 방금 데모 페이지에서 컴파일된 것을 가져와 프로덕션에 배포했습니다. 앞으로 1-3주 안에 어떻게 접수되는지 알려드리겠습니다.

@halo & @szimek - 이 두 링크를 살펴보세요. 도움이 될 수 있습니다.

• http://paperjs.org/examples/path-simplification/
• http://thejosephturner.com/simpleline/

@fa-at-pulsit 감사합니다! 그러나 두 예제 모두 사용자가 그리기를 중지 한 후 경로를 단순화하므로 피하고 싶습니다. 언젠가는 포기하고 그냥 이 솔루션을 사용하겠지만 눈에 띄는 대기 시간 없이 더 나은 결과를 얻을 수 있기를 바랍니다.

사후 처리/자동 수정을 피하고 싶습니다.

그냥 호기심에서, 왜?

• [ ] 버그를 방지하고 코드를 단순하고 강력하게 유지
• [ ] 시각적 결함으로 최종 사용자 경험을 망치지 않음
• [ ] 쓰기 중 그리기 스트림 노출 등을 방지하는 잠금
• [ ] 기존 후처리 솔루션이 충분히 성숙하지 않음

그건 그렇고, 지난 주에 최종 사용자로부터 받은 주관적인 피드백에서 나는 그림 품질이 (정기적으로 반복되는 서명자에 의해) "명확하게 개선됨"으로 즉시 파악되었음을 알 수 있습니다. 뼈에 더 많은 고기를 얻을 수 있는지 볼 수 있지만 비교를 위해 실제 서명을 여기에서 노출할 수는 없습니다.

내가 말할 수 있는 것은 대부분의 사람들이 지금 당신이 그들에게 얼마나 많은 말을 하는지에 상관없이 엄청나게 느리고 작게 쓴다는 것입니다. ;) 또한 장치(Surface Pro)가 주요 원인으로 의심됩니다. 어느 시점에서 멋진 새 펜 중 하나와 함께 iPad를 사용하면 그것에 대해 더 많은 통찰력을 얻을 수 있습니다.

@szimek 이 다른 예는 즉석에서 경로를 단순화했습니다 (나는 그렇게 생각합니다)
이 영상을 보세요 https://www.youtube.com/watch?v=H79iUsai6uc
소스 -> https://github.com/eur00t/Effective-Curve-Fitting
캔버스 크기 조정으로 망막에 훨씬 더 나은 효과를 얻습니다.
<canvas width="1000" height="200" style="width: 500px; height: 100px;"/>

@fa-at-pulsit 감사합니다! 나는 iMessage 앱으로 조금 더 플레이했고 (아마도 내 초고속 iPhone 5 덕분에) 사후 처리도 즉석에서 수행하지만 매우 미묘하고 거의 눈에 띄지 않습니다.

먼저 몇 가지 버그 수정이 포함된 새 버전을 출시해야 하지만, 서로 너무 가까운 선택적 건너뛰기 지점이 있는 새 버전을 출시하려고 시도한 다음 사후 처리를 즉시 살펴봅니다. 약속.

그래서 생산 1.5개월 만에 이번 PR을 통해 품질이 많이 향상되었다고 자신있게 말할 수 있습니다. 수십 명이 계속해서 서명을 했고 이전 서명과 비교하면 훨씬 좋아 보입니다.

먼저 몇 가지 버그 수정이 포함된 새 버전을 출시해야 하지만 서로 너무 가까운 선택적 건너뛰기 지점이 있는 새 버전을 출시하려고 합니다.

안녕! 이전 버전과의 호환성이 필요합니까? 아니면 이 커밋 그대로인가요?

편집: 이 커밋 을 통해 이미 병합되었습니까? 참으로 감사합니다!!

그리기 속도를 향상시키는 방법이 있습니까?