我有一个图像数组,我想在特定位置(即使用"网格"类型布局)绘制到HTML5画布上。
我有一个名为 drawImage(imageObj)
的函数,它目前将数组中的所有图像绘制到画布上的随机位置。但是,我希望能够预先确定应该绘制图像的设定数量的位置,然后随机选择在这些设置位置中的哪个位置绘制哪个图像(如果将多个图像绘制到同一位置并不重要)。
我的drawImage(imageObj)
函数目前如下所示:
function drawImage(imageObj) {
var canvasImage = new Kinetic.Image({
image: imageObj,
width: 50,
height: 50,
/* puts the images in random locations on the canvas */
x: stage.getWidth() / 20*Math.floor(Math.random()*20),
y: stage.getHeight() / 15*Math.floor(Math.random()*8+2),
draggable: true
});
// add cursor styling
canvasImage.on('mouseover', function() {
document.body.style.cursor = 'pointer';
});
canvasImage.on('mouseout', function() {
document.body.style.cursor = 'default';
});
imagesLayer.add(canvasImage);
}
我尝试稍微更改函数以创建位置的"网格",然后将每个图像绘制到网格中的随机"单元格"中:
function drawImage(imageObj) {
/* Create arrays of X & Y coordinates, and select the array elements randomly for use as
coordinates at which to draw the images*/
var xPos = new Array();
xPos[0] = 10;
xPos[1] = 70;
xPos[2] = 130;
xPos[3] = 190;
xPos[4] = 250;
xPos[5] = 310;
xPos[6] = 370;
xPos[7] = 430;
xPos[8] = 490;
xPos[9] = 550;
xPos[10] = 610;
xPos[11] = 670;
xPos[12] = 730;
xPos[13] = 790;
xPos[14] = 850;
xPos[15] = 910;
var yPos = new Array();
yPos[0] = 10;
yPos[1] = 70;
yPos[2] = 130;
yPos[3] = 190;
yPos[4] = 250;
yPos[5] = 310;
yPos[6] = 370;
yPos[7] = 430;
var canvasImage = new Kinetic.Image({
image: imageObj,
width: 50,
height: 50,
/* Now select a random X & Y position from the arrays to draw the images to */
x: xPos(getRandomXPosition),
y: yPos(getRandomYPosition),
draggable: true
/* puts the images in random locations on the canvas
x: stage.getWidth() / 20*Math.floor(Math.random()*20),
y: stage.getHeight() / 15*Math.floor(Math.random()*8+2),
draggable: true */
});
我原以为台词
x: xPos(getRandomXPosition),
y: yPos(getRandomYPosition),
将正在绘制到画布的图像的 x 和 y 坐标设置为我的"网格"中的随机"单元格",该单元格由 xPos
和yPos
数组的随机元素设置为要绘制的图像的 x 和 y 值。
但是,当我在浏览器中查看我的页面时,我收到一个控制台错误,指出"xPos 不是函数"
x: xPos(getRandomXPosition),
我不知道为什么会这样 - 有人有任何想法吗?我想我会在行上遇到同样的错误
y: yPos(getRandomYPosition),
出于同样的原因。
我知道 xPos 不是一个函数 - 它是一个数组,我只是尝试在位置"getRandomXPosition"检索数组元素。
我认为这可能是因为"getRandomXPosition"本身不是一个整数,它是一个函数,所以我尝试通过将这些函数定义行更改为:
var randomXPosition = function getRandomXPosition(minX, maxX){
return Math.floor(Math.random()*(maxX - minX +1)) +minX;
}
var randomYPosition = function getRandomYPosition(minY, maxY){
return Math.floor(Math.random()*(maxY - minY +1)) +minY;
}
然后更新我使用它们的位置,以便我现在将变量作为参数而不是函数传递:
x: xPos(randomXPosition),
y: yPos(randomYPosition),
draggable: true
但是,在浏览器中查看页面时,我仍然收到控制台错误,指出"xPos 不是函数"
x: xPos(randomXPosition),
我不知道为什么会这样 - 任何人都可以指出我正确的方向吗?可能还值得一提的是,我正在使用kineticJS库使图像在绘制到画布时"可拖动" - 只是为了更完整地了解我的代码。
任何建议将不胜感激!
已编辑 28/01/2013 @ 18:05
好的,我想我知道为什么图像都绘制在左上角 - 正在调用的drawImage
函数是来自 KineticJS 库的函数,而不是我自己的函数。我正在使用保存在本地的库的副本,因为有关库提供的功能,我更改了一些内容。将创建位置数组并从这些位置中选择随机元素的代码复制到库中的 drawImage 函数中是否有意义?
已编辑 29/01/2013 @ 23:15
是的,我已经看了一下kineticJS库中的drawImage函数(我正在使用库的本地副本),它看起来像这样:
drawImage: function() {
var context = arguments[0];
context.save();
var a = Array.prototype.slice.call(arguments);
if(a.length === 6 || a.length === 10) {
if(a.length === 6) {
context.drawImage(a[1], a[2], a[3], a[4], a[5]);
}
else {
context.drawImage(a[1], a[2], a[3], a[4], a[5], a[6], a[7], a[8], a[9]);
}
}
context.restore();
}
我不确定我是否完全理解这里的所有代码......什么是线
var a = Array.prototype.slice.call(arguments);
行为?我以前从未见过这个"切片"功能...
谁能指出我将如何编辑此函数以包含我编写的代码,以便通过从坐标数组中随机选择坐标来将所有图像绘制到不同的位置?大概,我应该能够将此代码复制并粘贴到函数中,但我不确定我应该将其放在函数中的哪个位置......有什么建议吗?
xPos 是一个数组,所以你需要使用数组格式来获取它的元素,比如 xPos[key],而randomXPosition是一个函数,你需要执行它来获取它的返回值,就像randomXPosition()一样。
总之,
X: xPos[randomXPosition()],
好吧,要访问数组中的某个索引,您必须使用 [] not (),如下所示:
xPos[randomXPosition] // if randomXPosition = 1, then this gives you the value at xPos[1].
xPos(randomXPosition) // <-- this is a function call, what it is expecting is something like:
function xPos(number){
var value = number * Math.random();
return value; //return some value maybe?
};