《TypeScript图形渲染实战：2D架构设计与实现》 —3.3.5 CSS盒模型对_viewportToCanvasC

3.3.5  CSS盒模型对_viewportToCanvasCoordinate的影响

　　在Application类中，坐标转换是在_viewportToCanvasCoordinate私有方法中完成的。在上一节鼠标单击测试中对canvas的margin设置为0px，并且没有设置border和padding属性。这些属性都属于CSS盒模型属性，那么如果设置这些属性，会不会对原本实现的_viewportToCanvasCoordinate函数有影响呢？

　　首先，设置canvas的margin为10px，并使后面章节实现的精灵系统Demo截图来看一下效果，效果如图3.13所示。

图3.13  设置margin后的测试效果

　　设置canvas的margin为10px，其boundingClientRect相对viewport的偏移坐标是[18 , 41]。其层次关系如图3.13所示。由三个节点组成，其中grid是整个背景节点，而rect节点是grid节点的子节点，circle节点是rect的子节点，也就是grid节点的孙节点。

　　当分别单击grid、rect和circle时，碰撞检测结果是正确的。这说明margin的设置并不影响_viewportToCanvasCoordinate方法。

　　接下来，看看border是否会影响_viewportToCanvasCoordinate方法。其CSS代码如下：

#canvas {

    margin : 10px ;  /*将canvas的margin设置为10px*/

    border : 80px solid ;

 }

　　根据上面的代码所示，将border设置为80px，默认情况下，border的颜色为黑色，来看一下运行后的效果，如图3.14所示。

　　如图3.14所示，当分别单击grid、rect和circle时，鼠标选中的都是Grid，碰撞检测结果是不正确的。由此可以得出结论，即border的设置影响_viewportToCanvasCoordinate方法。

　　这里还要注意一点：设置border为某个数值后，必须要标记为solid，否则border设置不会起作用。

　　以同样的方式设置了padding后，同border一样，会严重影响到_viewportToCanvas Coordinate方法。

图3.14  设置border后的测试效果