Question

说我有4个x / y坐标数组

[{x: 10, y: 5}, {x:10, y:15}, {x:20, y:10}, {x:20, y:20}]

是否有一种构造HTML元素的方法，以便四个角中的每一个都对数组中的坐标进行数学运算？

我知道使用画布是可行的，但是我正在努力找出如何使用HTML元素来做到这一点。

该数组将始终包含4组坐标。最终的形状可以旋转或倾斜，但始终是可以通过CSS转换实现的“有效”形状。

Answer 1

假设您以原始矩形的[topLeft, bottomLeft, topRight, BottomRight]形式获得它，可以尝试像这样重新创建它：

const obj1 = [{x: 10, y: 5}, {x:10, y:15}, {x:20, y:10}, {x:20, y:20}];
const obj2 = [{x: 40, y: 80}, {x: 10, y: 160}, {x: 120, y: 80}, {x: 90, y: 160}];
const obj3 = [{x: 200, y: 30}, {x: 150, y: 80}, {x: 250, y: 80}, {x: 200, y: 130}];

function render(obj) {
  const skewX = obj[1].x - obj[0].x;
  const skewY = obj[2].y - obj[0].y;
  let translateX = Math.min(...obj.map(t => t.x));
  let translateY = Math.min(...obj.map(t => t.y));
  if(skewX<0) translateX -= skewX;
  if(skewY<0) translateY -= skewY;
  const scaleX = Math.abs(obj[0].x - obj[2].x);
  const scaleY = Math.abs(obj[0].y - obj[1].y);
  const el = document.createElement('div');
  el.style.width = '1px';
  el.style.height = '1px';
  el.style.backgroundColor = 'blue';
  el.style.transformOrigin = 'top left';
  el.style.transform = `matrix(${scaleX}, ${skewY}, ${skewX}, ${scaleY}, ${translateX}, ${translateY})`;
  document.body.appendChild(el);
}

render(obj1);
render(obj2);
render(obj3);

但是，我建议您不要将形状存储为其顶点 ，而是 作为其转换矩阵。（当然可以）

Answer 2

如果您只是尝试不使用画布来绘制形状，则可以通过转换对象中的坐标来绘制SVG形状。

如果要变形div，最好的想法是使用CSS transform：matrix，但是您需要弄清楚如何将每个角坐标的x / y转换为缩放/倾斜/翻译参数。

如果不变形div，而只是创建一个常规的矩形，则应该能够将x / y坐标转换为top；剩下;宽度;高度; CSS属性。

Answer 3

不，不。 HTML是树状结构的DOM。虽然，您可以使用带有position: absolute（对html绝对）和top: y; left: x的DOM，但是从我的角度来看，这样做没有任何好处。

有没有一种方法可以使用坐标数组来创建HTML元素？

3 个答案: