cordova에서 스마트 폰 앱 개발 5

캔버스를 통합해보세요

cordova, ionic 및 html5로 앱 같은 앱 만들기

환경은 이런 느낌

C:\cordova_app>ionic info
[WARN] You are not in an Ionic project directory. Project context may be missing.

Ionic:

   Ionic CLI : 5.2.3

Utility:

   cordova-res : not installed
   native-run  : 0.2.7 (update available: 0.2.8)

System:

   NodeJS : v10.16.0
   npm    : 6.9.0
   OS     : Windows 10

이전 cordova에서 스마트 폰 앱 개발 2 에서 ionic 버전이 약간 올랐습니다.

paper

좌절했습니다.

전혀 움직이지 않는 원인도 깔끔하게

그림 그리기

갑자기 시원한 일을 시도하지 마십시오.

하나씩 통합하고 확인하는 것이 중요합니다 (계명

그래서

1. canvas 표시

2. 캔버스에 선 그리기

3. 에뮬레이터에서 확인

순서대로 구현

canvas 표시

새 블랭크로 애플리케이션 만들기

C:\cordova_app>ionic start helloCanvas

Let's pick the perfect starter template!

Starter templates are ready-to-go Ionic apps that come packed with everything you need to build your app. To bypass this
prompt next time, supply template, the second argument to ionic start.

? Starter template: blank
√ Preparing directory .\helloCanvas - done!
√ Downloading and extracting blank starter - done!

Installing dependencies may take several minutes.

  ──────────────────────────────────────────────────────────────────────────────

         Ionic Advisory, tailored solutions and expert services by Ionic

                             Go to market faster
                    Real-time troubleshooting and guidance
        Custom training, best practices, code and architecture reviews
      Customized strategies for every phase of the development lifecycle

               Learn more: https://ion.link/advisory

  ──────────────────────────────────────────────────────────────────────────────


> npm.cmd i

> [email protected] install C:\cordova_app\helloCanvas\node_modules\node-sass
> node scripts/install.js

Cached binary found at C:\Users\****\AppData\Roaming\npm-cache\node-sass\4.12.0\win32-x64-64_binding.node

> [email protected] postinstall C:\cordova_app\helloCanvas\node_modules\core-js
> node scripts/postinstall || echo "ignore"

Thank you for using core-js ( https://github.com/zloirock/core-js ) for polyfilling JavaScript standard library!

The project needs your help! Please consider supporting of core-js on Open Collective or Patreon:
> https://opencollective.com/core-js
> https://www.patreon.com/zloirock

Also, the author of core-js ( https://github.com/zloirock ) is looking for a good job -)


> [email protected] postinstall C:\cordova_app\helloCanvas\node_modules\node-sass
> node scripts/build.js

Binary found at C:\cordova_app\helloCanvas\node_modules\node-sass\vendor\win32-x64-64\binding.node
Testing binary
Binary is fine
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 1121 packages from 1051 contributors and audited 54002 packages in 35.548s
found 0 vulnerabilities

> git.exe init
Initialized empty Git repository in C:/cordova_app/helloCanvas/.git/
> git.exe add -A
> git.exe commit -m "Initial commit" --no-gpg-sign

*** Please tell me who you are.

Run

  git config --global user.email "[email protected]"
  git config --global user.name "Your Name"

to set your account's default identity.
Omit --global to set the identity only in this repository.

fatal: unable to auto-detect email address (got '****.(none)')
[WARN] Error encountered during commit. Disabling further git operations.

[INFO] Next Steps:

       - Go to your newly created project: cd .\helloCanvas
       - Run ionic serve within the app directory to see your app
       - Build features and components: https://ion.link/scaffolding-docs
       - Get Ionic DevApp for easy device testing: https://ion.link/devapp

캔버스 용 페이지를 페인트로 작성

C:\cordova_app\helloCanvas>ionic g
? What would you like to generate? page
? Name/path of page: paint
> ng.cmd generate page paint
CREATE src/app/paint/paint.module.ts (538 bytes)
CREATE src/app/paint/paint.page.html (124 bytes)
CREATE src/app/paint/paint.page.spec.ts (684 bytes)
CREATE src/app/paint/paint.page.ts (252 bytes)
CREATE src/app/paint/paint.page.scss (0 bytes)
UPDATE src/app/app-routing.module.ts (517 bytes)
[OK] Generated page!

html에 canvas 설치

paint.page.html

<div id="container" #container>
  <canvas id="canvas" #canvas></canvas>
</div>

빌드 오류가 발생하지 않았습니다.



표시 할 수 있을지도 모르기 때문에, canvas 에 배경색을 붙여 보자

paint.page.scss

#container {
  width: 100%;
  height: 100%;
}
#canvas {
  width: 90%;
  height: 90%;
  background-color: #EEEEEE;
}

캔버스 배치는 문제입니다.



캔버스에 선 그리기

선을 그리기 위해 캔버스에 클릭 및 이동 이벤트 등록

paint.page.html

<div id="container" #container>
  <canvas id="canvas" #canvas (touchstart)="drawing($event)" (touchmove)="moved($event)"></canvas>
</div>

스크립트측에는 canvas 의 요소와 이벤트를 기재한다

paint.page.ts

import { Component, OnInit, ElementRef, ViewChild, Renderer } from '@angular/core';


@Component({
  selector: 'app-paint',
  templateUrl: './paint.page.html',
  styleUrls: ['./paint.page.scss'],
})
export class PaintPage implements OnInit {

  @ViewChild('canvas') canvasEl : ElementRef;
  private _canvas : any;

  saveX: number;
  saveY: number;

  selectedColor = '#CC3333';

  constructor() { }

  ngOnInit() {
  }

  ionViewDidEnter() {
    this._canvas = this.canvasEl.nativeElement;
    this._canvas.width = 400;
    this._canvas.height = 400;
  }

  drawing(ev) {
    var canvasPosition = this._canvas.getBoundingClientRect();
    this.saveX = ev.touches[0].pageX - canvasPosition.x;
    this.saveY = ev.touches[0].pageY - canvasPosition.y;
  }

  moved(ev) {
    var canvasPosition = this._canvas.getBoundingClientRect();

    let ctx = this._canvas.getContext('2d');
    let currentX = ev.touches[0].pageX - canvasPosition.x;
    let currentY = ev.touches[0].pageY - canvasPosition.y;

    ctx.lineJoin = 'round';
    ctx.strokeStyle = this.selectedColor;
    ctx.lineWidth = 3;

    ctx.beginPath();
    ctx.moveTo(this.saveX, this.saveY);
    ctx.lineTo(currentX, currentY);
    ctx.closePath();

    ctx.stroke();

    this.saveX = currentX;
    this.saveY = currentY;
  }

}

크롬 개발자 도구를 시작하고 Toggle device toolbar를 선택합니다.

canvas에 선이 그려졌다.

※ 개발자 툴을 사용하지 않는 경우나, 다른 브라우저에서는 움직이지 않았다…

HTML5의 방법이 있습니까?



캔버스와 그리기 어긋남

그래서 선은 그렸지만 실제 포인터와 그리기 위치에 어긋남이 발생합니다.

Y 좌표가 커지는데 비례하여 점점 어긋남도 커지고 있다

이벤트에서 취득한 위치와 캔버스의 위치가 맞지 않습니까?

캔버스를 전체 화면에 표시하면 어긋남이 어떻게되는지 확인해 봅니다.

container와 canvas를 100%로 설정

paint.page.scss

#container {
  width: 100%;
  height: 100%;
}
#canvas {
  width: 100%;
  height: 100%;
  background-color: #EEEEEE;
}

container의 크기를 canvas로 설정

  @ViewChild('container') canvasContainerEl : ElementRef;
  private _container : any;

  ionViewDidEnter() {
    this._container = this.canvasContainerEl.nativeElement;
    this._canvas = this.canvasEl.nativeElement;
    this._canvas.width = this._container.clientWidth;
    this._canvas.height = this._container.clientHeight;
  }

어긋남 없이 선을 그릴 수 있게 되었다



에뮬레이터에서 확인

응용 프로그램으로 배포하면 브라우저처럼 URL에서 전환 할 수 없으므로 링크 만들기

home.page.html

  <div class="ion-padding">
    <a target="_blank" rel="noopener" href="../paint">CANVAS PAINT.</a>
  </div>

애플리케이션으로 에뮬레이터에 배치

C:\cordova_app\helloCanvas>ionic cordova run android --native-run

전환하여 캔버스의 정상 동작 확인



cordova에서 스마트 폰 앱 개발 6