NativeScript에서 터치하는 곳에 ●(원형)을 그리는 프로그램을 써 보십시오.
AbsoluteLayout 등을 사용해도 되지만, 이번에는 특별히 NativeScript 표준에서 지원되지 않는 Android SurfaceView를 사용해 설치했다.Android에서만 실행됩니다.
원주민 안드로이드 API를 NativeScript에서 부르는 샘플로도 참고하십시오.
참조)
https://docs.nativescript.org/runtimes/android/generator/extend-class-interface

컨디션

NativeScript 3.1 + Angular 4
안드로이드 7.1에서 동작 확인

완성 화면

사전 준비

TypeScript의 유형 정의 파일을 넣습니다.
IDE에서 안드로이드의 API를 보완하고 검사하는 것이 효과적이며 개발이 순조롭게 진행되고 있습니다.npm i tns-platform-declarations --save-dev

HTML

우선, 이 위젯을 HTML에 설정 <Placeholder> 합니다.
component.html

<Placeholder (creatingView)="creatingView($event)">

보기를 만들 이벤트 처리 프로그램을creatingView 이벤트에 연결합니다.

TypeScript

이제 구성 요소의 Type Script를 살펴보겠습니다.
먼저 SurfaceView의 MySurfaceView 클래스를 상속합니다.
component.ts

/**
 * カスタムSurfaceView
 */
class MySurfaceView extends android.view.SurfaceView {

  constructor(context: android.content.Context) {
    super(context);
    // to transform the Android native class to a JavaScript object
    return global.__native(this);
  }

핵심은 구조기 사용return global.__native(this);이다.
new의 반환값으로 JavaScript의 객체가 아닌 로컬 Java의 객체를 가져올 수 있습니다.
component.ts

  init(){
    var self = this;
    let holder = this.getHolder();

    holder.addCallback( new android.view.SurfaceHolder.Callback({

      surfaceCreated(holder: android.view.SurfaceHolder){
        self.drawCircle(100, 100);
        console.log('surface Created');
      },

      surfaceChanged(){},

      surfaceDestroyed(holder: android.view.SurfaceHolder){}

    }) );

    this.setOnTouchListener( new android.view.View.OnTouchListener({
      onTouch(v: android.view.View, ev: android.view.MotionEvent){
        if( ev.getAction() == android.view.MotionEvent.ACTION_DOWN ){
          self.drawCircle(ev.getX() , ev.getY() );
        }
        return true;
      }
    } ) );

    console.log('init');
  }

그 다음으로 구조기로 초기화를 실시한 후 init 방법이라고 불린다.
SurfaceHolder의 콜백 및 터치 이벤트 보기
OnTouchListener를 바인딩했습니다.
SurfaceHolder.Callback은 인터페이스이지만 new를 통해
익명 함수로 즉시 실례화하다.아주 편리하군요!
surfaceCreated、surfaceChanged、surfaceDestroyed
반드시 실행해야 할 사건 방법들입니다.
아래의 문서는 간단하고 이해하기 쉽다.
http://qiita.com/croquette0212/items/24dc2b6de3730e831aab
component.ts

  drawCircle(x: number, y: number){
    let holder = this.getHolder();
    let c = holder.lockCanvas();
    c.drawColor( new Color("#000000").android );
    let p = new android.graphics.Paint();
    p.setStyle( android.graphics.Paint.Style.FILL );
    p.setColor( new Color("#FF0000").android );
    c.drawCircle(x, y, 50, p);
    holder.unlockCanvasAndPost(c);
  }

}

drawCircle 방법은 매개변수에서 얻은 좌표에 빨간색 원을 그리는 방법입니다.
다음 페이지를 참조하였습니다.
http://donsuka-kk.hatenablog.com/entry/20121114/1352870204
이렇게 해서 나는 MySurfaceView의 준비를 마쳤다.
이제 화면에 SurfaceView가 연결됩니다.
component.ts

export class Component {

  creatingView(args: any) {
    args.view = new MySurfaceView(args.context);
    console.log('creatingView done');
  }
}

내 SurfaceView 인스턴스뷰에 연결하면 완성됩니다.
구축하고 운행해 보세요!
터치하면 터치한 곳에 붉은 원을 그립니다.

느낌: 대단하다

SurfaceView의 프로그램 설계는 처음이지만 NativeScript에서SurfaceView에 대한 묘사부터 터치 이벤트 처리까지 완성되었다.가장 시간이 걸리는 곳은 NativeScript에서 자바의 SurfaceView 클래스를 Extend하여 TypeScript의 브리지 인터페이스에 설치하는 곳이다
이번에 나는 많은 관건을 알았으니 다음에는 걱정할 필요가 없다.
SurfaceView의 조작 자체는 일부 거리와 골목에서 안드로이드를 대상으로 하는 개발 자료를 보았는데 대체적으로 그렇게 Type Script로 쉽게 실현되어 매우 감동적이었다.
Java로 작성해야 하는 안드로이드 API의 경우 TypeScript에서 속성 액세스, 메소드 호출, 클래스 상속이 정말 수월합니다.나는 매우 감동했다.