[发明专利]一种经三维转换后的跟踪点的投影位置计算方法及系统

说明书

本发明涉及图像处理技术领域，具体为一种经三维转换后的跟踪点的投影位置计算方法及系统。用于解决图形经三维变换后，无法确定被跟踪点的投影位置的问题。此种基于矩阵运算的三维图形投影位置计算方法包括：构建世界坐标系和屏幕坐标系，在世界坐标系中建立图形；确定自身坐标系的原点和坐标轴的轴向量在世界坐标系中的坐标、以及被跟踪点在世界坐标系中的坐标；计算自身坐标系的被跟踪点的坐标；计算被跟踪点在自身坐标系的坐标；将图形进行三维转换，并记录在矩阵数组中；将被跟踪点的自身坐标系的坐标转换为世界坐标系的坐标，再转换为屏幕坐标系的坐标。通过上述技术方案，以实现准确找到被跟踪点的投影位置及解耦不同图形模块的技术效果。

技术领域

本发明涉及图像处理技术领域，更具体地，涉及一种经三维转换后的跟踪点的投影位置计算方法及系统。

背景技术

在数据可视化产品中，常常会涉及到三维层面的图形数据展示的场景，而前端体系提供了css和css3的transform配置，可以方便快捷的配置出一个带有模拟真实透视效果三维变化。而经过变换后的图形上的点，无论是页面上的空间的绝对定位还是投影到屏幕的屏幕坐标，都和原本的位置发生了变化；虽同时存在自身坐标系、世界坐标系和屏幕坐标系三个坐标系，但css与css3每次的转换都是以图形自身建立坐标系计算的，而css与css3体系的图形自身坐标系并不提供变换后的点所对应的这三种坐标系中任何一个坐标系下的坐标，因此无法直接获取经过三维转换后的图形上的点的坐标，给实践场景中需要定位经过三维转换后的图形上的点的坐标带来极大的困难，无法实现所需要的技术效果。

本技术方案应用于计算机前端开发，当前端界面中的图形经过三维转换后，获取图形上的跟踪点在屏幕上的投影位置。适用于所有使用标准css和css3作为样式变换的前端领域，具体涉及领域为所有需要跟踪并得到经过三维变换后图形上的某个点的位置坐标的场景，如世界地图上的某个点，在世界地图经过平移斜切倾斜后所在的实际屏幕位置，或是玻璃珠上的水滴，在玻璃珠经过css变换后，对应的实际位置坐标等。本技术方案的实现基于javaScript es6语言提供的数学计算方法、css与css3提供的三维转换方法、三维透视原理和几何计算原理。

世界坐标系是系统的绝对坐标系，在没有建立用户坐标系之前画面上所有点的坐标都是以该坐标系的原点来确定各自的位置的。世界坐标系定义为:带有小圆的圆心为原点ow，xw轴水平向右，yw轴向下，zw由右手法则确定，v′n为实时图中对应的统计特征向量；系统的绝对坐标系也称为世界坐标系，在没有建立用户坐标系之前画面上所有点的坐标都是以该坐标系的原点来确定各自的位置的；设一个基准坐标系Xw—Yw—Zw称为世界坐标系(xw，yw，zw)为空间点P在世界坐标系下的坐标(u，v)为P点在图像直角坐标系下的坐标。

屏幕坐标系是手机屏幕或者电脑屏幕的一个坐标系。屏幕坐标是以像素来定义的，屏幕左下角为原点(0，0)，右上角为(Screen.width，Screen.height)，width是屏幕的宽度，height是屏幕的高度，Z值是摄像机世界坐标取反，并且以相机的世界单位来衡量的。屏幕坐标和相机之间满足：Screen.width＝Camera.main.pixelWidth和Screen.height＝Camera.main.pixelHeight这两个条件。鼠标的位置坐标属于屏幕坐标，通过Input.mousePosition获取鼠标的屏幕坐标。

自身坐标系是基于计算机图形自身所建立的三维直角坐标系，当计算机图形进行三维变换时，自身坐标跟随之进行相应的变换。