个人中心
gpt4 book ai didi

javascript - 通过 css 对象的 X 轴确定偏移，javascript

转载 作者：行者123 更新时间：2023-11-28 04:10:41 24 4
gpt4 key购买 nike

我正在尝试绘制类似 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 轴的 Angular ，所有线都向右移动了一点。超过 Angular - X 轴的未知偏移越多。

JPEG example

最佳答案

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

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

    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");

它的作用是确定每一步要增加多少 Angular 。这是根据圆是 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 的倍数)。

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

关于javascript - 通过 css 对象的 X 轴确定偏移，javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42736925/

24 4 0
文章推荐： css - C1 CMS - 恢复 CSS 文件
文章推荐： c++ - 在 C++ 中，当重新分配一个对象时，为什么构造函数在析构函数之前触发？
文章推荐： c++ - "define"函数返回类型前
文章推荐： html - 如何使用 CSS 在两个框之间包含垂直线
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com