闲聊js12: 创建一个演示用的渲染库10(坐标轴绘制、空间变换及总结与展望)

本篇的目的是要了解:

  1. 坐标轴绘制
  2. 空间变换(space transformation)封装
  3. 下一步安排说明

今天涉及到空间变换(Space Transformation)的封装,具体数学细节不会在本篇中涉及(下一个主题是数学和动画,会重点了解矢量,矩阵,四元数,插值,变换,碰检,贝塞尔基矩阵,计算几何,投影几何等等等等....之类的数学概念和原理)。

1. 为了更好的演示以后的数学操作,先实现坐标系的绘制:

增加线条的绘制操作:

drawLine(x0, y0, x1, y1, style = 'red') {
        let ctx = this.context;
        ctx.save();
        ctx.strokeStyle = style;
        ctx.beginPath();
        ctx.moveTo(x0, y0);
        ctx.lineTo(x1, y1);
        ctx.stroke();
        ctx.restore();
    }

坐标轴绘制:

//dir = 'x'|'y'
    drawAxis(x, y, len, dir = 'x', space = 10, style = 'red') {
        if (dir == 'x')
            this.drawLine(x, y, x + len, y, style);
        else
            this.drawLine(x, y, x, y + len, style);

        let delta;
        let numTicks = len / space;
        let ctx = this.context;
        ctx.save();
        ctx.strokeStyle = style;
        for (let i = 1; i < numTicks; ++i) {

            ctx.beginPath();

            if (i % 5 === 0)
                delta = 10;
            else
                delta = 10 / 2;

            if (dir == 'x') {
                ctx.moveTo(x + i * space, y - delta);
                ctx.lineTo(x + i * space, y + delta);
                ctx.stroke();
            } else {
                context.moveTo(x - delta, y + i * space);
                context.lineTo(x + delta, y + i * space);
                context.stroke();
            }
        }
        ctx.restore();
    }

提供一个简便方法绘制x和y轴以及标尺

drawCoords(rect, space = 10, style = 'red') {
        this.drawAxis(rect.x, rect.y, rect.width, 'x', space, style);
        this.drawAxis(rect.x, rect.y, rect.height, 'y', space, style);
    }

我们来测试一下:

        render.clear();

        //网格
        render.drawGrid('white', 'black', 20, 20);

         //绘制整个canvas的坐标标尺
        render.drawAxis(0, 0, 800);
        render.drawAxis(0, 0, 600, 'y');
        
        //使用drawCoords方法绘制某个物体的坐标标尺
        let coords = [550, 225, 750, 225]; //线性 4个参数[x0,y0,x1,y1] 组成一条直线
        let g = render.createGradient(coords, colors);
        let rc = new Rect(550, 200, 200, 50);
        render.drawRect(rc, g);
        render.drawCoords(rc);
draw_axis_x_y_coord.png

2. 空间变换:

请区分tranform(To/By):

  • transformTo: 变换,相对与原点的offset(偏移)表示,canvas2d.setTransform表示To概念

  • transformBy: 变换,相对与上一个点的offset(偏移)表示,canvas2d.transform表示By概念

  • 更简单的方式描述:
    To 100: let x = 100;
    By 100: let x += 100;

  • 上述两个方法是2D 仿射变换的通用表示。

  • 目前只要知道2D 仿射变换(2D affine transformation):包含平移(Translation)、缩放(Scale)、翻转(Mirror/Flip)、旋转(Rotation)和错切(Skew/Shear)中的一个或多个或者全部的组合操作

canvas2d中的translate/rotate/scale方法是canvas2d.transform(By)的特殊表示

  • 最常用的变换操作是:translate/rotate/scale
  • By方式的操作,用术语表示为累积矩阵( Accumulate Matrix),累积上一次的结果。
  • 我们来封装或实现一些变换操作方法:

取消累积效果,让矩阵恢复到原始状态

resetTransform() {
        this.context.resetTransform();
}

translate/rotate/scale

   translate(dx, dy) {
        this.context.translate(dx, dy);
    }

    //绕default原点旋转
    //参数为角度而不是弧度表示
    rotate(degree) {
        let radian = BLFUtil.toRadian(degree);
        this.context.rotate(radian);
    }

   scale(sx, sy) {
        this.context.scale(sx, sy);
    }

由于default情况下,旋转和缩放是以原点为中心的,原点可能在左上角之类的,如果要以中心点进行旋转或缩放,就需要调整原点位置,因此增加rotateAt/scaleAt这两个便利的方法

    //绕任意点旋转
    rotateAt(dx, dy, degree) {
        this.context.translate(dx, dy);
        this.rotate(degree);
        this.context.translate(-dx, -dy);
    }
   //以任意点为中心缩放
   scaleAt(dx, dy, sx, sy) {
        this.context.translate(dx, dy);
        this.scale(sx, sy);
        this.context.translate(-dx, -dy);
    }

实现仿射变换中的mirror/flip操作:

    //true为水平反转,false为垂直反转
    //反转镜像只是scale的特殊形式
    mirror(horizontal = true) {
        if (horizontal == true)
            this.context.scale(-1, 1);
        else
            this.context.scale(1, -1);
    }

实现仿射变换中的skew/shear操作:

    //错切矩阵,输入为角度
    skew(x = 0, y = 0) {

        if (x == 0 && y == 0)
            return;

        let tanX = 0;
        let tanY = 0;

        if (x != 0)
            tanX = Math.tan(BLFUtil.toRadian(x));

        if (y != 0)
            tanY = Math.tan(BLFUtil.toRadian(y));

        //矩阵参数a,b,c,d,e,f
        //b决定Y轴倾斜程度,c决定X轴倾斜程度
        this.context.transform(1, tanY, tanX, 1, 0, 0);
    }

封装To/By的通用操作(必要时,需要直接操作矩阵中的行列值)

   transformTo(a, b, c, d, e, f) {
        this.context.setTransform(a, b, c, d, e, f);
    }
    
    //累积矩阵
    transformBy(a, b, c, d, e, f) {
        this.context.transform(a, b, c, d, e, f);
    }

关于用法和demo,会在后续的动画及数学篇章中进行演示。本篇就仅进行相关封装。

本篇是创建一个演示用的渲染库系列文章的最后一篇。

canvas2d的十一个分类:

  • 渲染状态的save/restore

  • 全局阴影

  • 全局alpha blend和像素合成操作(globalAlpha/globalCompositeOperation)

  • 样式(color/gradient/pattern)

  • 线条属性(lineWidth/lineCap/lineJoin/meterLimit)

  • 矩形操作(clearRect/strokeRect/fillRect)

  • 文本绘制

  • 路径绘制(除贝塞尔外,其他都有涉及)

  • 图像绘制

  • 图像像素操作(未涉及)

  • 空间变换

我们会看到,除了路径中的贝塞尔及图像像素操作外,其他基本都封装到了自定义的render中去了。

关于贝塞尔曲线及曲面,是一个很精彩的领域。在动画及数学篇中会详细说明,并且提供一些非常高效先进的算法来了解贝塞尔动画及造型艺术。

图像像素的处理,实际是图像学范畴。ps的滤镜效果就是逐像素处理的结果。比较有名的开源图像操作库是:opencv,提供大量预置操作,以及识别操作等等。

后面也会提供图像操作方面的知识。主要在webgl的gpu编程中体现。用js直接cpu进行像素操作,效率上折扣太大。

推荐阅读更多精彩内容