相关疑难解决方法(0)

我刚刚在React Native中构建了一个相对复杂的图像编辑UI.

该体验旨在与Instagram非常相似,并具有双指缩放,平移和旋转功能.

转换存储为数据,例如:

transformation: {
  bottomBoundary: 1989,
  leftBoundary: 410,
  rightBoundary: 1634,
  topBoundary: 765,
  rotation: 0,
},

其中topBoundary和bottomBoundary都是偏离图像顶部的偏移,leftBoundary并且rightBoundary都是图像左侧的偏移.

旋转时,因为React Native使用对象的中心作为变换原点,所以当处于90°或270°方向时,图像需要偏移,这样它们仍然可以"粘"到顶部/左角并且可以偏移:

calculateRotationOffset.js

export default function (width, height) {
  const transform = [
    { rotate: `${this.rotation}deg` },
  ]

  /*
    RN rotates around centre point, so we need to
    manually offset the rotation to stick the image
    to the top left corner so that our offsets will
    work.
  */
  if (this.rotation === 90) {
    transform.push( …

总是阻碍我做3D编程的一件事是无法理解数学是如何工作的.我可以使用方法和函数在编程流程中使用数学,然后它对我来说都是清晰和合乎逻辑的,但在数学符号中,我无法从它做出正面或反面.

我一直在阅读网站,观看研究所试图解释这个问题的视频,但他们都使用数学符号,我只是迷失在其中,我的思想不会将其转化为可理解的东西.我可能有缺陷.

另外,只是使用某人的代码不是我的兴趣,我想了解它背后的机制,逻辑.我很乐意使用其他人的代码,但我真的想了解它是如何工作的.

这个问题

你能用简单的术语向我解释没有数学符号,只是编程符号/函数/伪代码,如何沿所有3轴实现矩阵变换？

理想情况下我想要的是编写方法/对象的材料/理解,我可以在其中定义3个轴的角度,类似于glRotate,以旋转我所拥有的四边形/三角形的集合.(我正在尝试编写立方体形状的3D旋转而无需访问OpenGL函数来为我执行此操作,因为每次在显示列表中发生更改时,都会在一次绘制调用中完成.)

我做了什么？

我试图制作一个90度的变换函数来获得数学的悬念,但是在制作一个理论上最简单的矩阵时却完全失败了.你可以在http://jsfiddle.net/bLfg0tj8/5/看到我失败的尝试.

Vec3 = function(x,y,z) {
    this.x = x;
    this.y = y;
    this.z = z;
}
Matrix = function Matrix() {
    this.matrixPoints = new Array();    
    this.rotationPoint = new Vec3(0,0,0);
    this.rotationAngle = 90;
}
Matrix.prototype.addVector = function(vector) {
    this.matrixPoints.push(vector);
}
Matrix.prototype.setRotationPoint = function(vector) {
    this.rotationPoint = vector; 
}
Matrix.prototype.setRotationAngle = function(angle) {
    this.rotationAngle = angle;
}
Matrix.prototype.populate = function() {
    translateToOrigin =     [[1,0,0-this.rotationPoint.x],
                                  [0,1,0-this.rotationPoint.y],
                                  [0,0,0-this.rotationPoint.z]];
    rotationMatrix =         [[0,-1,0],
                                  [0,1,0],
                                  [0,0,1]];
    translateEnd …