【HTML5 Canvas】计算元件/显示对象经过Matrix变换后在上级/舞台上的bounds(边界矩形rect)

如上图所示,这样的一个简单矩形,边界矩形是(x:-28, y:-35, width:152, height:128),这是在这个元件/显示对象自己的坐标空间的范围。

那么把这个放到父元件(舞台)中,再做一定变换。如下图所示,白色区域就是舞台,蓝色矩形中的白色十字架标记,就是世界坐标的(0,0)点。蓝色矩形的原点和世界坐标的原点对应,也就是说蓝色矩阵的坐标为(0,0)。

在舞台这个世界坐标系中,边界区域又是什么呢?我们的目标就是计算下图中的红色区域。

其实算法,很简单,在放到舞台之前,在蓝色矩形自己的局部坐标系中,边界是(x:-28, y:-35, width:152, height:128)。

那么,蓝色矩形4个顶点原来的坐标是可以轻易找到的:(-28,-35)、(152-28,-35)、(152,128)、(-28,128-35)。

矩形旋转了-60度,其实这个变换,可以具体转化为一个Matrix矩阵变换。通过自己计算或者利用Flash等辅助,可以知道Matrix如下:

Matrix (a=0.4999847412109375, b=-0.865966796875, c=0.86602783203125, d=0.500030517578125, tx=-44.3, ty=6.8)

最后,计算出每个顶点经过Matrix变换后的新坐标,再通过这4个新坐标,算出上下左右的边框位置。

什么?怎么计算这个Matrix?好吧,先插播一下Matrix的计算。

首先,当然你得有一个Matrix类,可以参考任意语言的Matrix2D,其实都一样的。abcd和tx、ty,6个属性。

然后Matrix中实现rotate、translate等方法。

最后,简单2句,就可以算出:

        var matrix = new Matrix2D();
        matrix.rotate(-60*Math.PI/180);

回到正题,先把Matrix和rect的计算,封装一下:

    p._transformBounds = function (bounds, matrix) {
        if(bounds.x || bounds.y){
            matrix.append(1,0,0,1,bounds.x,bounds.y);
        }

        var lt = {x:0, y:0};
        var rt = {x:bounds.width, y:0};
        var lb = {x:0, y:bounds.height};
        var rb = {x:bounds.width, y:bounds.height};

        lt = transformPoint(matrix, lt);
        rt = transformPoint(matrix, rt);
        lb = transformPoint(matrix, lb);
        rb = transformPoint(matrix, rb);

        var minX = Math.min(lt.x, rt.x, lb.x, rb.x);
        var minY = Math.min(lt.y, rt.y, lb.y, rb.y);
        var maxX = Math.max(lt.x, rt.x, lb.x, rb.x);
        var maxY = Math.max(lt.y, rt.y, lb.y, rb.y);

        function transformPoint(m, p) {
            return {x: m.a * p.x + m.c * p.y + m.tx, y: m.b * p.x + m.d * p.y + m.ty};
        }

        return new Rectangle(minX, minY, maxX - minX, maxY - minY);
    };

这里做了一个变化,如果bounds(也就是边框Rect)有x/y偏移,就把这个偏移转加到Matrix上,把rect简化为(0,0,width,height),这样有利于简化计算。

关键点是transformPoint函数,理解这个线性代数计算就能理解整个2D平面的算法。

其实,由于rect的x、y被简化为0,那么上述算法还可以优化,把函数拆开。最终变成:

    p._transformBounds = function(bounds, matrix) {
        var x = bounds.x, y = bounds.y, width = bounds.width, height = bounds.height;
        var mtx = new Matrix2D();
        mtx.appendMatrix(matrix);
        if (x || y) { mtx.append(1,0,0,1,x,y); }

        var x_a = width*mtx.a, x_b = width*mtx.b;
        var y_c = height*mtx.c, y_d = height*mtx.d;
        var tx = mtx.tx, ty = mtx.ty;

        var minX = tx, maxX = tx, minY = ty, maxY = ty;

        if ((x = x_a + tx) < minX) { minX = x; } else if (x > maxX) { maxX = x; }
        if ((x = x_a + y_c + tx) < minX) { minX = x; } else if (x > maxX) { maxX = x; }
        if ((x = y_c + tx) < minX) { minX = x; } else if (x > maxX) { maxX = x; }

        if ((y = x_b + ty) < minY) { minY = y; } else if (y > maxY) { maxY = y; }
        if ((y = x_b + y_d + ty) < minY) { minY = y; } else if (y > maxY) { maxY = y; }
        if ((y = y_d + ty) < minY) { minY = y; } else if (y > maxY) { maxY = y; }

        return new Rectangle(minX, minY, maxX-minX, maxY-minY);
    };

两个函数看起来相差很大,但如果大家有心思慢慢计算一下,会发现其实是一样的。

那么,整个计算的过程如下:

    p.test = function () {
        var bounds = new Rectangle(-28, -35, 152, 128);
        var matrix = new Matrix2D();
        matrix.rotate(-60*Math.PI/180);
        var t = this._transformBounds(bounds, matrix);
        console.log(t);
    };

得到

Rectangle {x: -44.31088913245536, y: -124.88715006927039, width: 186.85125168440817, height: 195.6358613752347, initialize: function…}

大功告成。。。

说了一大堆废话,可能大家不理解这种计算意义何在,其实这种边框计算有很多用途,例如脏区重绘、碰撞检测。虽然一般来说,游戏框架都会给你封装好,但在某些情况下,还是不得不自己重新做一遍,这是Kenko在尝试做Flash转Canvas+脏区重绘的工作。

该项目名为Fanvas,现已加入2014年度腾讯6个公司级开源项目,相信不久将来大家会看到这个项目的开源。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏一个会写诗的程序员的博客

java.base.jmod

/Library/Java/JavaVirtualMachines/jdk-9.jdk/Contents/Home/jmods$ jmod list java....

1112
来自专栏码匠的流水账

java9系列(五)Stack-Walking API

java9新增这个类的目的是提供一个标准API用于访问当前线程栈,之前只有Throwable::getStackTrace、Thread::getStackTr...

421
来自专栏吴伟祥

Apache POI总结 原

Apache POI  是用Java编写的免费开源的跨平台的 Java API,Apache POI提供API给Java程式对Microsoft Office格...

761
来自专栏前端儿

Web 前端颜色值--字体--使用,整理整理

颜色值 CSS 颜色使用组合了红绿蓝颜色值 (RGB) 的十六进制 (hex) 表示法进行定义。对光源进行设置的最低值可以是 0(十六进制 00)。最高值是 2...

2312
来自专栏我和未来有约会

silverlight beta 2 将在本周末发布.

太开心了,刚刚收到微软silverlight.net的邮件.  确定了 将在本周末发布beta2. 以下是部分邮件内容 引用: There are some...

1976
来自专栏码匠的流水账

聊聊HystrixThreadPool

hystrix-core-1.5.12-sources.jar!/com/netflix/hystrix/HystrixThreadPool.java

781
来自专栏WOLFRAM

向日葵中的数学之美

1833
来自专栏c#开发者

Processing Binary Documents Through BizTalk Via Web Services[转]

Published 21 July 06 08:24 AM | rseroter Just finishing up a two-week BizTalk P...

3374
来自专栏余生开发

echarts太阳分布图-饼图来回穿梭

var dom = document.getElementById("container");

1202
来自专栏Petrichor的专栏

Dataset 列表:机器学习研究

In computer vision, face images have been used extensively to develop face recog...

1521

扫码关注云+社区