《TypeScript图形渲染实战：2D架构设计与实现》 —3.3.4 鼠标单击事件测试

3.3.4  鼠标单击事件测试

　　如图3.12所示，分别在canvas元素的左上角和右下角单击两次，输出了两次单击后的结果，通过输出结果可以了解以下几点：

* 在左上角处使用一个方块标记出原点，该原点就是viewport的原点。canvas . getBounding Rect ( )方法和evt . ClientX / ClientY都是相对该原点的偏移量。

* canvas . getBoundingRect ( )方法调用后，获得canvas相对viewport的偏移量为[8 , 31]，其尺寸是[300 , 300]。而当前鼠标指针相对viewport的偏移量是[9 , 32]，因此转换到相对canvas坐标系中表示为[1 , 1]（[9 - 8 , 32 - 31]），这是正确的。

* 在3.2.2节中，在CSS中明确地规定了canvas的margin为0px，但是我们会发现在Chrome浏览器中canvas仍旧与viewport之间有[8 , 8]个像素的偏移（如果去掉<div>元素及两个<button>子元素，y轴也是偏移8个像素）。

　从上面最后一条内容，又可以引申出两个问题，如下所述。

　　（1）为什么明确地设置了canvas的margin为0px，却仍然与viewport有8个像素的偏移？

　　关于这个问题，首先要说明的一点是，笔者在Chrome、Firefox、Opera、Safari、Edge，以及IE 11中测试了一下，发现canvas与viewport之间都是[8 , 8]像素的偏移。

　　其次在测试过程中发现，Microsoft公司的Edge和IE 11中MouseEvent . clientX / clientY返回的是浮点数，而其他浏览器都是整数。笔者查阅了MDN关于MouseEvent ClientXs属性的文档（https ://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/clientX），里面有相关说明：Originally, this property was defined as a long integer. The CSSOM View Module redefined it as a double float.（原本，ClientX这个属性被定义为长整型，而在CSSOM View Module中被重新定义为双精度浮点数），而Microsoft公司的实现显然是使用了双精度浮点数。

　　最后如果想取消canvas和viewport之间8个像素的偏移，可以输入如下代码:

body {

    background : #eeeeee ;

    margin : 0px ;

}

　　这也是笔者经过测试后找到的解决方案（笔者的CSS水平有限），不是canvas和viewport之间有8个像素的margin，而是body元素与viewport之间有8个像素的margin。当然还可以*选择器，选择所有的元素，使其margin都为0px，代码如下：

*  {

    margin : 0px ;

　}

　　（2）margin、border和padding等这些CSS盒模型属性对application的坐标变换私有方法_viewportToCanvasCoordinate是否有影响？

　　这个问题稍微有点复杂，使用已经实现的一个Demo来更好地理解盒模型与变换之间的关系，具体请看下一节的内容。