如何实现10个随机x和y坐标，相差150 [英] How to achieve 10 random x and y co-ordinates with difference of 150

问题描述

我是html5和JavaScript的新手，首先对不起，如果我问愚蠢的问题，但我真的需要这个。



我有一个画布，我想插入10图像在不同的位置。所以我创建了一个数组来存储坐标，并且我已经编写了逻辑来查找新的位置，并且至少有150个差异。我知道有很多错误。但我找不到位置。帮助我，谢谢。

I am new to html5 and JavaScript, First sorry if i ask silly question but i really need this.

I have one canvas and I want to insert 10 images at different location. So I created one array to store the co-ordinates, and I have written logic to find new location which is new to and have atleast difference of 150. I know there are many mistakes. but i cant find the locations. Help me, Thank you.

<canvas id = "canvas" height = "100%" width = "100%"></canvas>

这是我的剧本

Here is my script

var objectArray = new Array();
var canvas = document.getElementById("canvas");

 while (objectArray.length < 10)
        {
            xpos = Math.floor(Math.random() * (canvas.width-100)+100);
            ypos = Math.floor(Math.random() * (canvas.height-100)+100);
            if (objectArray.length > 0)
            {
                for (var i = 0; i < objectArray.length; i++)
                {
                    if
                        (
                        (xpos > (objectArray[i].coX + 150)) || (xpos + 150 < objectArray[i].coX)
                                                            &&
                        (ypos > (objectArray[i].coY + 150)) || (ypos + 150 < objectArray[i].coY)

                        )
                    {
                        objectArray.push({ coX: Math.abs(xpos), coY: Math.abs(ypos)});
                    }
                }
            }
            else
            {
                objectArray.push({ coX: Math.abs(xpos), coY: Math.abs(ypos)});
            }
        }

推荐答案

代码有几个问题：



- 为什么你得到100和画布最大边缘之间的随机x和y坐标？你有目的地避开顶部和左边100像素吗？



- 只要新点距离任何一个其他点。它可能就在其中一个之上。



- 添加到阵列后你没有退出循环，所以你会多次添加相同的点。



- 根据画布的大小，您将很快用完新点的可能位置（一旦修复逻辑）。你可能最终得到一个无限循环。



- 为什么你取一个保证大于100的数字的绝对值？



这是一个有效的修订版（参见 http://jsfiddle.net/cD6uC/ 3 / [ ^ ]）



我意识到你不能将画布的大小视为百分比，所以我使用了窗口尺寸。而且，要求X和Y值各自超过150，这似乎有点奇怪。假设你真的意味着点之间的距离超过150，我改变了使用毕达哥拉斯定理的逻辑。

There are several problems with the code:

- Why are you getting random x and y coordinates between 100 and the maximum edge of the canvas? Are you purposefully avoiding the top and left 100 pixels?

- Your logic will add to the array as long as the new point is more than 150 away from any one other point. It could be right on top of one of the others.

- You are not exiting the loop after adding to the array, so you will add the same point many times.

- Depending on the size of the canvas, you will quickly run out of possible places for the new points (once you fix the logic). You could end up with an endless loop.

- Why do you take the absolute value of a number that''s guaranteed to be greater than 100?

Here is a revision that works (see http://jsfiddle.net/cD6uC/3/[^])

I realized that you can''t size a canvas as percentages, so I used the window dimensions. Also, it seemed a little weird to require the X and Y values each to be more than 150 different. Assuming you really meant for the distance between points to be more than 150, I changed the logic to use the Pythagorean theorem.

var objectArray = new Array();
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var data = document.getElementById('data');
var baddata = document.getElementById('baddata');

canvas.width  = window.innerWidth - 50;
canvas.height = window.innerHeight - 50;

while (objectArray.length < 10) {
    var addToArray = true;
    var xpos = Math.floor(Math.random() * canvas.width);
    var ypos = Math.floor(Math.random() * canvas.height);

    if (objectArray.length > 0) {
        for (var i = 0; i < objectArray.length; i++) {
            var distance = Math.sqrt(Math.pow(Math.abs(xpos - objectArray[i].coX), 2) + Math.pow(Math.abs(ypos - objectArray[i].coY), 2));
            if (distance < 150) {
                addToArray = false;
                baddata.innerHTML += '(' + xpos + ',' + ypos + ') only ' + Math.round(distance).toString() + ' from (' + objectArray[i].coX + ',' + objectArray[i].coY + ')<br>';
                break;
            }
        }
    }

    if (addToArray) {
        objectArray.push({ coX: xpos, coY: ypos });
        ctx.fillRect(xpos,ypos,2,2);
        data.innerHTML += '(' + xpos + ',' + ypos + ')<br>';
    }
}

这篇关于如何实现10个随机x和y坐标，相差150的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！