时间戳

首页 > 解决方案 > 有没有办法使用坐标数组创建 HTML 元素？

javascript - 有没有办法使用坐标数组创建 HTML 元素？

问题描述

假设我有一个包含 4 个 x/y 坐标的数组

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

有没有办法构造一个 HTML 元素，以便四个角中的每一个都计算数组中的坐标？

我知道使用画布可以做到这一点，但我正在努力研究如何使用 HTML 元素来做到这一点。

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

标签： javascripthtmlcss

解决方案

假设您以原始矩形的形式获得它[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);

但是，我建议您不要将形状存储为其顶点，而是将其存储为变换矩阵。（如果可能的话，当然）

推荐阅读