잡담 js4: 프레젠테이션용 렌더링 라이브러리 만들기 2 (es6 버전)

본 편의 우리의 목적은 다음과 같다.

렌더링 상태 및 올가미 사용

벡터 도형 및 문자의 스트로크 / fill 세트

es6 super 키워드 사용법

코드는 다음과 같습니다.

Render 클래스

"use strict";

class BLFRender {
    constructor(ctx) {
        this.context = ctx;
    }

    drawGrid(backcolor, color, stepx, stepy) {
        context = this.context;
        
        context.save()

        context.strokeStyle = color;
        context.fillStyle = backcolor;
        context.lineWidth = 0.5;
        context.fillRect(0, 0, context.canvas.width, context.canvas.height);

        context.beginPath();
        for (var i = stepx + 0.5; i < context.canvas.width; i += stepx) {
            context.moveTo(i, 0);
            context.lineTo(i, context.canvas.height);
        }
        context.stroke();

        context.beginPath();
        for (var i = stepy + 0.5; i < context.canvas.height; i += stepy) {
            context.moveTo(0, i);
            context.lineTo(context.canvas.width, i);
        }
        context.stroke();

        context.restore();
    }

    drawText(x, y, color, str) {
        context = this.context;

        context.save();

        context.fillStyle = color;
        context.fillText(str, x, y);

        //context.strokeStyle = color;
        //context.strokeText(str, x, y);

        context.restore();
    }
}

    /*
       fill/stroke        ,             
  */
    drawText(x, y, color, str) {
        context = this.context;

        context.save();

        context.fillStyle = color;
        context.fillText(str, x, y);

        //context.strokeStyle = color;
        //context.strokeText(str, x, y);

        context.restore();
    }
}

렌더링 상태 소켓 사용법: (draw 시작 함수에서)

always: 전: 그리기 전에save()를 하고 현재 렌더링 상태를 저장합니다.후: 그림 그리기 후restor (), 렌더링 상태를 최근의save () 상태로 복원합니다:save/restore에 있는 코드에서 렌더링 상태를 임의로 설정하여 그림 그리기 제출

why: 모든renderAPI(예를 들어gl/dx/gdi/skia/cairo/quartz 등)는 상태기를 바탕으로 모든renderAPI를 렌더링하여 제출할 때 현재 설정된 렌더링 상태를 사용합니다.save/restore를 실행하지 않고 다음 그림을 그릴 때 지난번 렌더링 상태를 지속하여 렌더링 상태를 제어하기 어렵습니다.

save/restore는 끼워서 사용할 수 있지만 반드시 짝을 지어야 한다(실제로 canvas2d 내부에 Stack 창고가 있음):

  save
      save    
          save       
          restore     
       restore 
  restore

RenderState에 기록되는 렌더링 상태는 무엇입니까?이 클래스에서 현재 사용되고 있는 렌더링 상태 속성은 다음과 같습니다: stroke Style fill Style line Width 다른 사용되지 않은 렌더링 상태는default 상태입니다. 코드가 갈수록 많아지면서 모든 렌더링 상태와 초기화 값을 알 수 있습니다. 이 점은 매우 중요합니다.

벡터 도형 (문자도 벡터) 그리기 루트는 두 부분을 포함합니다: 스케치 (stroke) 와 (fill)

stroke  strokeStyle         ,  【  /   】           
fill  fillStyle     【  】        
     style   color? 
     style     【color】，   【  】,【   】   

Sprite 기본 클래스

class BLFSprite {
    constructor() {
        this.typeName = "BASE";
    }

    render(render) {
        render.drawGrid('white', 'black', 10, 10);
    }
}

RectSprite 하위 클래스

class BLFRectSprite extends BLFSprite {
    constructor() {
        //super([          ])
        super();

        //this            super()    ok！！！！
        this.typeName = "RECT";
    }

    render(render) {
        //          
        super.render(render);

        //rect            
        render.drawText(10, 10, 'red', "                     ");
    }
}

es6의 super 키워드에 대한 전제 사항은 다음과 같습니다.

하나의 전제:

        extends       super   

두 가지 용도:

   1.       ：
           super([          ]),            super()
           this            super()    ok！！！！
   2.        :
                              super      super()  ，  ！