确定 css 个对象的 X 轴偏移，javascript

Question

我想画像 STAR 这样的东西 *。

https://jsfiddle.net/jsfiddlefcn/w7y86acz/7/

从中心 width / 2 和 height / 2 到 bx 和 by 周围的不同点。

var counter = 0;

function linedraw(ax, ay, bx, by) {
  var r = parseInt(Math.random() * 255);
  var g = parseInt(Math.random() * 255);
  var b = parseInt(Math.random() * 255);
  var a = 0.45;
  var caty = Math.abs(ay - by);
  var catx = Math.abs(ax - bx);
  counter++;
  /*
  $("<div id='catx" + counter + "'>").css({ // optional.
    "height": '2px',
    "background": 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')',
    "width": catx,
    "position": "absolute",
    "top": by,
    "left": Math.min(ax, bx),
    // "transform": "rotate("+rotation+"deg)"
  }).appendTo("#body");
  $("<div id='caty" + counter + "'>").css({ // optional.
    "height": '2px',
    "background": 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')',
    "width": caty,
    "position": "absolute",
    "top": Math.min(ay, by) + caty / 2,
    "left": bx - caty / 2,
    "transform": "rotate(90deg)"
  }).appendTo("#body");*/
  var width = Math.sqrt(Math.pow(catx, 2) + Math.pow(caty, 2));
  var atan = Math.atan( (ay-by) / (ax - bx) );
  //var acos = Math.acos(caty / width);
  //var asin = Math.asin(catx / width);
  var rotation = atan * 360 / ( 2 * Math.PI );
  //var rotation = acos * 360 / ( 2 * Math.PI );
  //var rotation = asin * 360 / ( 2 * Math.PI );
  var Y = Math.min(ay, by) + caty / 2;
  var X = Math.min(ax, bx);
  $("<div id='diagonal_" + counter + "'>").css({ // Main Line
    "height": '2px',
    "background": 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')',
    "width": width,
    "position": "absolute",
    "top": Y,
    "left": X,
    "transform": "rotate(" + rotation + "deg)"
  }).appendTo("#body");
}

var height = 500;
var width = 500;
var step = 30;
for (var x = 0; x < width; x += step) {
  for (var y = 0; y < height; y += step) {
    linedraw(width / 2, height / 2, x, y);
  }
}

rotation 和 Y - 正确！

需要确定X轴偏移。

变量

"left": X,

所有线条都向右移动了一点，具体取决于与 X 轴的角度。超过角度 - X 轴的未知偏移越多。

JPEG example

Answer 1

由于您使用的是变换，因此您无需进行任何奇怪的数学运算。唯一的挑战是弄清楚如何设置角度以匹配您的增量。

例如，我用以下代码片段替换了你的线图代码的后半部分：

    var maxX = ax * 2;
    var angleX = bx / maxX * 360;
    $("<div id='diagonal_" + counter + "'>").css({
        "height": '2px',
        "background": 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')',
        "width": 150,
        "position": "absolute",
        "top": 250 - 150 / 2,
        "left": 250 - 150 / 2,
        "transform": "rotate(" + angleX + "deg)"
    }).appendTo("#body");

它的作用是确定每一步要增加多少角度。这是根据圆是 360 度的知识计算出来的。然后你只要把它插入你新的 div 的 css 就可以得到一颗星。

您将需要调整中心的位置以及每行的长度，但毕竟这是您的任务，不想为您做所有事情:-)...

这是一些工作代码：

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>

<div id="body"></div>

<script>
    $(document).ready(function() {
        var counter = 0;

        function linedraw(ax, ay, bx, by) {
            var r = parseInt(Math.random() * 255);
            var g = parseInt(Math.random() * 255);
            var b = parseInt(Math.random() * 255);
            var a = 0.45;
            var caty = Math.abs(ay - by);
            var catx = Math.abs(ax - bx);
            counter++;
            $("<div id='catx" + counter + "'>").css({ // good.
                "height": '2px',
                "background": 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')',
                "width": catx,
                "position": "absolute",
                "top": by,
                "left": Math.min(ax, bx),
                // "transform": "rotate("+rotation+"deg)"
            }).appendTo("#body");
            $("<div id='caty" + counter + "'>").css({ // good.
                "height": '2px',
                "background": 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')',
                "width": caty,
                "position": "absolute",
                "top": Math.min(ay, by) + caty / 2,
                "left": bx - caty / 2,
                "transform": "rotate(90deg)"
            }).appendTo("#body");
            var maxX = ax * 2;
            var angleX = bx / maxX * 360;
            $("<div id='diagonal_" + counter + "'>").css({
                "height": '2px',
                "background": 'rgba(' + r + ',' + g + ',' + b + ',' + a + ')',
                "width": 150,
                "position": "absolute",
                "top": 250 - 150 / 2,
                "left": 250 - 150 / 2,
                "transform": "rotate(" + angleX + "deg)"
            }).appendTo("#body");
        }

        var height = 500;
        var width = 500;
        var step = 30;
        for (var x = 0; x < width; x += step) {
            for (var y = 0; y < height; y += step) {
                linedraw(width / 2, height / 2, x, y);
            }
        }
    });
</script>
</body>
</html>

其他一些评论：

如果您要逐步增加，那么我会确保以整步而不是部分的方式达到目标。因此，将您的高度和宽度提高到 510（30 的倍数）或将步长更改为 25（因为 500 是 25 的倍数）。

我还会考虑将您正在做的三件事分成不同的功能 - 一个用于垂直线，一个用于水平线，一个用于星形（对角线）。

Answer 2

感谢来自ru.whosebug.com

的@TicTacVengria

右移是这样计算的：

if (bx > ax)
  var X = ax - width/2 + catx/2;
  else
  var X = ax - width/2 - catx/2;

确定 css 个对象的 X 轴偏移，javascript

Determinate shift by X-axis of css objects, javascript

javascript

css

math

geometry

drawing