각도 있는 손그림

짐 암스트롱 2019년 12월

나는 방학 동안 재미있는 일을 하고 싶어서 2010년 초에 만든 Flex Freehand 갤러리에서 가변 폭의 필획을 이식하기로 결정했다. 이 필획은 사실상 유구한 역사를 가지고 있으며 1983년까지 거슬러 올라갈 수 있다. 연습으로서 나는 기하학 대학원 과정을 계산하는 조교로 파견되었다.강사의 회사는 최근에 매우 비싼 태블릿PC를 얻었다.이 시스템은 이미 전자적으로 표시된 도면을 스캔하거나 로드할 수 있으며 고정된 너비의 획을 사용하여 주석을 손으로 그릴 수 있습니다.코치는 가변폭(속도 관련) 스트로크를 제안했는데 이것은 많은 실험실 연습의 기초가 될 것이다.나의 일은 Fortran 언어로 그의 생각을 실현하는 것이다. (그래, 이제 너는 나의 나이를 비웃어도 된다.)물론, 우리가 대학에서 사용하는 텍 그래픽 디스플레이는 펜 좌표 서열을 입력할 능력이 없기 때문에, 우리는 반드시 x 좌표와 y 좌표 진열로 그것들을 시뮬레이션해야 한다.이제 너는 정말 나의 나이를 비웃을 수 있어!
이 코드가 ActionScript로 변환되어 Flash 프로젝트에 사용될 때, 나는 그것에 약간의 활력을 불어넣은 후에 Flex 기반의 그래픽 라이브러리로 정식으로 변했다.이제 Typescript로 변환되고 Angular 속성 명령으로 패키지화됩니다.이 명령은 용기 (주로 DIV) 에 스케치 능력을 주입할 수 있도록 합니다.
물론, 우리가 시작하기 전에, 우호적인 커뮤니티 브라우저를 이GitHub에 가리키면, 프로젝트에서 사용할 코드를 얻을 수 있습니다.
4theAlgorithmist/AngularFreehandDrawinggithub에 있습니다.일반 도메인 이름 형식

획을 긋다

획은 일반적으로 세 가지 다른 동작으로 구성되어 있으며, 첫 번째 동작은 마우스를 처음 눌렀을 때 실행된다.두 번째는 마우스를 이동하는 동안 계속 실행됩니다.마지막 동작은 마우스를 위로 이동할 때 실행됩니다.
마우스가 떨어지는 동작은 주로 장부에 기재하는 것이다.마우스를 처음 누르면 드로잉 환경에 적합한 컨테이너를 생성하고 관련된 모든 계산 변수를 초기화합니다.본문에 첨부된 코드는 캔버스에 그려집니다(PixiJS 사용).만약 적당한 흥미가 있다면, 나는 캔버스나 SVG에서 같은 필획을 그리는 방법을 보여주고, 실행할 때 Angular의DI시스템을 사용하여 제작 계약을 충족시키는 것을 기쁘게 발표할 것이다.
마우스 이동 동작은 좀 복잡해야 한다.매끄러움은 마우스 좌표 시퀀스에 적용되어 도면의 일부 디더링을 평균적으로 제거합니다.초기 너비는 마우스 속도에 따라 확장되거나 축소되는 획에 적용됩니다.현재 알고리즘은 상반된 조건을 강제로 실행하기 위해 코드를 수정할 수 있지만, 더 높은 마우스 속도로 획 폭을 늘립니다.코드에 획 너비의 최소 한도값이 규정되어 있다.
획은 첫 번째 획의 끝과 끝으로 나뉘어 있습니다.둘 사이에 일련의 2차 베지어 곡선을 사용하여 획의 반대쪽 모서리를 그립니다.획의 각 면은 본질적으로 C-1 연속성을 가진 2차 스플라인입니다. 이것은 스플라인이 각 연결점의 좌표값과 1단계 도수의 크기와 일치한다는 것을 의미합니다.가장 최근에 매끄러운 세그먼트의 방향을 사용하여 각 스플라인이 통과하는 점을 결정하여 가변 너비 기준에 따라 반대 방향으로 수직으로 투영합니다.
매끄러움을 사용하고 매끄러움은 대기 계산이므로 현재 마우스 위치 이후에 매끄러움 획 계산이 실행됩니다.뾰족한 끝은 가장 가까운 둥근 점에서 현재 마우스 점까지 확장되어 여러 선과 원으로 그려집니다.
그렇다면 이런 세부 사항은 어떻게 작동합니까?음, 마치... 이런 것들, 이런 것들, 수학 이런 것들, 이런 것들, API.자, 우리 끝났어.
이제 Angular 개발자가 되면 속성 명령에 익숙해집니다.5분 동안 프레젠테이션에 대해 높은 수준의 회고를 하면, 너는 사의화법 명령을 응용 프로그램에 넣을 수 있다.
더 자세한 해구를 좋아하고 Angular를 사용하기 시작하면, 본고의 나머지 부분은 필획 알고리즘을 실현하는 데 사용되는 Typescript 코드를 Angular 속성 명령에 어떻게 포장하는지 토론할 것입니다.

핸드 드로잉 명령

공간을 절약하기 위해 나는 지령의 요점을 소개할 것이다.세부 사항을 풀기 위해 원본 코드를 보십시오.
/src/app/drawing/freehand drawing.지령ts
명령 선택기는'맨손'으로 명령은 여러 가지 방식으로 적용할 수 있으며 포함된 상호작용에서 내부 상호작용이 없는 상호작용까지 다양하게 적용할 수 있다.몇 개의 매개 변수는 입력으로 제어할 수 있다.
주 프로그램 구성 요소 템플릿/src/app/app.구성 요소html에서 몇 가지 용례를 보여줬는데,

<!-- minimal usage
<div class="drawingContainer" freehand></div>
-->

<!-- caching control and begin/end stroke handlers
<div class="drawingContainer" freehand [cache]="cacheStrokes" (beginStroke)="onBeginStroke()" (endStroke)="onEndStroke()"></div>
-->

<!-- control some drawing properties -->
<div class="drawingContainer" freehand [fillColor]="'0xff0000'"></div>

컨테이너에 자유형 드로잉이 속성으로 적용됩니다(DIV일 가능성이 높습니다).명령어의 구조 함수는 컨테이너에 대한 참조를 가져오고 PixiJS 드로잉 환경을 초기화합니다.편의를 위해, 그림 그리기 환경은 이 실현 중의 지령과 밀접하게 결합된다.
입력을 정의하여 Angular OnChanges 인터페이스를 구현했습니다.ngOnChanges 메서드는 입력을 광적으로 검증합니다.상호작용을 열거나 닫으면 마우스 프로세서를 분배하거나 삭제합니다.
경고: HTML 컨테이너에 정의된 입력이 없으면 ngOnChanges가 호출되지 않습니다.모든 입력 값이 합리적인 기본값을 가지고 있는지 확인하십시오.
OnDestroy 인터페이스도 마우스 프로세서를 정의할 수 있기 때문에 가능합니다.만약 그렇다면 명령이 소각되었을 때 삭제해야 한다.
하나의 도형은 여러 개의 획을 포함할 수 있기 때문에, 이 명령의 실현은 각 획의 모든 용기를 저장할 것이다.필요한 경우 단일 획의 좌표를 캐시합니다.이것은 단일 획의 x와 y 좌표를 조회하는 것을 가능하게 한다.
이 명령은 완전한 외부 제어를 허용한다.예를 들어, 서버에서 원래 마우스 좌표(예: 이전에 저장된 획)를 로드한 다음 마우스 동작으로 동일한 좌표를 얻은 것처럼 API를 사용할 수 있습니다.이전에 그린 필획은 이런 방식으로 완전히 다시 그릴 수 있다.컨테이너에 비해 마우스 상호작용을 더 높은 수준에서 제어하는 것이 편리할 수 있습니다.이러한 이유로 이 명령은 획의 시작, 업데이트 및 종료를 위한 공통 API를 공개합니다.

public beginStrokeAt(x: number, y: number, index: number = -1): void
public updateStroke(x: number, y: number):void
public endStrokeAt(x: number, y: number): void

획도 삭제할 수 있고,

public eraseStroke(index: number): boolean

전체 획 세트를 지우고 새 획 세트에 대한 드로잉 영역을 제공할 수 있습니다.

public clear(): void

대부분의 작업 (수학) 은 업데이트 스트로크 () 방법에서 실행된다.그것은 실제적으로 매끄럽고 해석 기하학적이며, 일대 2차 곡선일 뿐이며, 끝에는 동적 첨단이 있다.내가 문장 첫머리에 언급한 바와 같이 그래픽 알고리즘을 나에게 돌리지 마라.텍사스대 알링턴 분교의 틴니 박사는 적어도 1983년으로 거슬러 올라갈 수 있다.
학점에 관해서는 Angular의 새로운 동적 그래픽 프로그램에서 학점을 얻는 것이 어떻습니까?코드를 잡고 복사하고 붙여넣으며 재미있는 휴가 코드를 즐겨보세요!
행운을 빕니다.

ng conf: 신뢰할 수 있는 웹 서밋에 참여

지역 사회 구성원과 지도자에게 신뢰할 수 있는 웹 응용 프로그램 구축, 고품질 코드 작성, 확장 가능한 체계 구조 선택, 효과적인 자동화 테스트를 만드는 가장 좋은 방법을 배울 수 있습니다.ngconf의 지원 아래 2021년 8월 26일과 27일의 신뢰할 수 있는 인터넷 정상 회의에 참가합니다.
https://reliablewebsummit.com/