感谢xingwu同志美化的图片
—————————————下面是原文,图片太丑删掉了,看上面的就可以了————————————————————————————————
注:文字推导过程UI 坐标系的Y方向是相反的,上图W、H是菱形宽高,所以最后要除以2,下面的推导菱形宽、高是2W,2H
如图,屏幕坐标系用红色表示,逻辑坐标系用蓝色表示。逻辑坐标系记作 X, Y, 屏幕(UI)坐标系记作UX, UY
菱形宽度为 2W 像素,高度 2H 像素
推导过程
从屏幕坐标系到逻辑坐标系:
如果一个菱形逻辑坐标(X, Y), 那么右侧的菱形逻辑坐标是(X+1, Y-1)
同理,它下边的菱形坐标是(X+1, Y+1)
UI坐标 (UX, UY) 转逻辑坐标(X, Y),UX和UY都对X有影响,UX和UY都对Y也有影响。
清晰起见,X分成两部分分开算,Y也分开算
X1 = UX / w (UX对X有加的影响)
X2 = UY / h (UY也对X有加的影响)
X = X1 + X2 = UX / w + UY / h
再看Y
Y1 = - UX / w (注意负号,UX增加,Y减少)
Y2 = UY / h (UY增加,Y增加)
Y = Y1 + Y2 = - UX / w + UY / h
这样UI坐标转逻辑坐标就完成了。
上面两个结果联立求UX, UY,最简单的二元一次方程
UX = (X - Y) * w / 2
UY = (X+Y) * h / 2
逻辑转UI也完成。
注:只要两个坐标系原点重叠,那么就不需要偏移,简化了问题。