타입스크립트(typescript) 베지어 곡선 만들기 Bezier Curves

visualkhh@gmail.com

 

import {AfterViewInit, Component, ElementRef, HostListener, OnInit, Renderer2, ViewChild} from '@angular/core';
import {Observable} from 'rxjs/Observable';
import {interval} from 'rxjs-compat/observable/interval';
import {range} from 'rxjs-compat/observable/range';
import 'rxjs-compat/add/operator/delay';
import 'rxjs-compat/add/operator/take';
import {PointVector} from '../lib-typescript/com/khh/math/PointVector';
import {RandomUtil} from '../lib-typescript/com/khh/random/RandomUtil';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, AfterViewInit {
  @ViewChild('canvas') public canvasElementRef: ElementRef;
  private canvas: HTMLCanvasElement;
  private context: CanvasRenderingContext2D | null;
  @HostListener('window:resize', ['$event'])
  onResize(event) {
    this.canvas.width = window.innerWidth;
    this.canvas.height = window.innerHeight;
    this.canvas.dispatchEvent(new Event('resize'));
  }

  ngAfterViewInit(): void {
  }

  ngOnInit(): void {
    this.canvas = this.canvasElementRef.nativeElement;
    this.canvas.width = window.innerWidth;
    this.canvas.height = window.innerHeight;
    this.context = this.canvas.getContext('2d');
    this.run();
  }
  run () {
    
    const start = new PointVector(RandomUtil.random(10, window.innerWidth), RandomUtil.random(10, window.innerHeight));
    const center = new PointVector(RandomUtil.random(10, window.innerWidth), RandomUtil.random(10, window.innerHeight));
    const end = new PointVector(RandomUtil.random(10, window.innerWidth), RandomUtil.random(10, window.innerHeight));
    const lastEnd = new PointVector(RandomUtil.random(10, window.innerWidth), RandomUtil.random(10, window.innerHeight));


    this.context.beginPath();
    this.context.arc(start.x, start.y, 10, 0, 2 * Math.PI);
    this.context.stroke();
    this.context.beginPath();
    this.context.arc(center.x, center.y, 10, 0, 2 * Math.PI);
    this.context.stroke();
    this.context.beginPath();
    this.context.arc(end.x, end.y, 10, 0, 2 * Math.PI);
    this.context.stroke();
    this.context.beginPath();
    this.context.arc(lastEnd.x, lastEnd.y, 10, 0, 2 * Math.PI);
    this.context.stroke();


    const frame = 50;
    const sD = new PointVector((start.x - center.x) / frame, (start.y - center.y) / frame);
    const cD = new PointVector((center.x - end.x) / frame, (center.y - end.y) / frame);
    const eD = new PointVector((end.x - lastEnd.x) / frame, (end.y - lastEnd.y) / frame);
    const leD = new PointVector(lastEnd.x / frame, lastEnd.y / frame);


    interval(10).take(frame).subscribe(it => {
      start.sub(sD);
      center.sub(cD);
      end.sub(eD);
      this.context.beginPath();
      this.context.arc(start.x, start.y, 5, 0, 2 * Math.PI);
      this.context.stroke();
      
      this.context.beginPath();
      this.context.arc(center.x, center.y, 5, 0, 2 * Math.PI);
      this.context.stroke();
      
      this.context.beginPath();
      this.context.arc(end.x, end.y, 5, 0, 2 * Math.PI);
      this.context.stroke();

      const cnt = it + 1;

      const dD = new PointVector(((start.x - center.x) / frame) * cnt, ((start.y - center.y) / frame) * cnt);
      const ddd = new PointVector(start.x - dD.x, start.y - dD.y);


      const ldD = new PointVector(((center.x - end.x) / frame) * cnt, ((center.y - end.y) / frame) * cnt);
      const lddd = new PointVector(center.x - ldD.x, center.y - ldD.y);

      const gdD = new PointVector(((ddd.x - lddd.x) / frame) * cnt, ((ddd.y - lddd.y) / frame) * cnt);
      const gddd = new PointVector(ddd.x - gdD.x, ddd.y - gdD.y);
      this.context.beginPath();
      this.context.arc(gddd.x, gddd.y, 3, 0, 2 * Math.PI);
      this.context.stroke();
      this.context.beginPath();
      this.context.moveTo(start.x,  start.y);
      this.context.lineTo(center.x,  center.y);
      this.context.stroke();
      this.context.beginPath();
      this.context.moveTo(center.x,  center.y);
      this.context.lineTo(end.x,  end.y);
      this.context.stroke();
    });
  }
}