KineticJS drawImage功能
我在我的网站上使用KineticJS库，为我正在制作的HTML5画布游戏添加一些功能。
我正在使用该库将大量图像绘制到画布上，但它并不像我希望的那样绘制图像。
我正在绘制的图像都存储在一个数组中，并且当前都被绘制到画布上。但是，它们都是在同一个位置上相互叠加的。这在理论上很好，因为用户可以在画布周围拖放图像，因此他们可以通过这样做来查看它们。然而，它并不是特别用户友好，因为我在画布上绘制了大约30张图像，因此用户必须单独移动它们以便能够同时看到它们并不是特别有用。
我使用的是我在本地保存的KineticJS库版本，因为我想对其提供的功能进行一两次更改。
我用来绘制图像的库中的函数如下所示：
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();
}
并且此函数将所有图像绘制在彼此之上，所有图像都在同一位置（画布的左上角）。
我想编辑这个函数，以创建一个位置的“网格”，在该位置将绘制数组中的图像。如果将多个图像绘制到同一网格单元格并不重要，但至少会有多个图像位于多个位置。
我曾尝试使用我编写的函数来执行此操作 - 我的函数在单独使用时起作用，但是当我尝试将其与库一起使用时，它却无效。所以，我想知道我是否可以编辑库中的drawImage函数，包括我编写的代码来创建'grid'布局来绘制图像。
我写的用于以网格布局绘制图像的函数如下所示：
function drawImage(imageObj) {
/* Create variables to select the array position randomly*/
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;
}
/* 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] = 40;
yPos[1] = 100;
yPos[2] = 160;
yPos[3] = 220;
yPos[4] = 280;
yPos[5] = 340;
yPos[6] = 400;
yPos[7] = 460;
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[randomXPosition()],
y: yPos[randomYPosition()],
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 */
});
// add cursor styling
canvasImage.on('mouseover', function() {
document.body.style.cursor = 'pointer';
});
canvasImage.on('mouseout', function() {
document.body.style.cursor = 'default';
});
imagesLayer.add(canvasImage);
}
此函数使用X和Y位置创建画布坐标的网格布局，然后在将X和Y坐标数组绘制到画布时将X和Y坐标数组中的随机元素分配给每个图像的X和Y值 - 确保每个图像在画布上绘制在我已确定的可能位置列表中的随机位置。
我想知道的是如何将我编写的函数提供的功能添加到库中的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]);
}
}
/* Create variables to select the array position randomly*/
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;
}
/* 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] = 40;
yPos[1] = 100;
yPos[2] = 160;
yPos[3] = 220;
yPos[4] = 280;
yPos[5] = 340;
yPos[6] = 400;
yPos[7] = 460;
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[randomXPosition()],
y: yPos[randomYPosition()],
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 */
});
// add cursor styling
canvasImage.on('mouseover', function() {
document.body.style.cursor = 'pointer';
});
canvasImage.on('mouseout', function() {
document.body.style.cursor = 'default';
});
imagesLayer.add(canvasImage);
context.restore();
}
但是在执行此操作后在浏览器中查看页面时，画布不再出现在页面上，并且我在控制台上遇到错误：“ReferenceError：imageObj未定义”在行image: imageObj,上。
我无法弄清楚为什么会这样，或者如何修复它。有没有人有任何建议？
编辑30/01/2013 @ 16:10
我已经尝试按照建议编辑代码，而drawImage函数现在看起来像这样：
drawImage: function() {
var context = arguments[0];
context.save();
var a = Array.prototype.slice.call(arguments);
/*Create the arrays to hold the grid coordinates I want to use */
/* Create variables to select the array position randomly*/
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;
}
/* 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] = 40;
yPos[1] = 100;
yPos[2] = 160;
yPos[3] = 220;
yPos[4] = 280;
yPos[5] = 340;
yPos[6] = 400;
yPos[7] = 460;
var canvasImage = new Kinetic.Image({
image: a[1],
width: 50,
height: 50,
x: xPos[randomXPosition()],
y: yPos[randomYPosition()],
draggable: true
});
canvasImage.on('mouseover', function(){/*Define any handlers I want*/});
imagesLayer.add(canvasImage);
}
然而，虽然现在显示画布，但图像不是 - 有一个正方形的“轮廓”，图像先前出现（当它们都被绘制到一个位置时），所以我认为是图像，但它们并没有显示为图像 - 只是一个正方形，它们仍然在同一个位置。
当我尝试在画布周围拖放方块时（假设它是一个图像），绘制到画布上的所有其他内容随着图像一起移动，并且它变得非常缓慢且无响应。
例如，这是我页面的屏幕截图：
我编辑代码的方式是否有问题？
1 个答案:
答案 0 :(得分：0)
您的错误是由于您所引用的javascript对象imageObj未在代码中的任何位置定义（您已显示）。
注意：
var canvasImage = new Kinetic.Image({
image: imageObj, // <--- imageObj needs to be created somewhere, it is expecting something like: var imageObj = new Image();
width: 50,
height: 50,
x: xPos[randomXPosition()],
y: yPos[randomYPosition()],
draggable: true
});
现在，为了修复： 您需要参考存储图像的位置;一个数组？
var canvasImage = new Kinetic.Image({
image: a[0],
width: 50,
height: 50,
x: xPos[randomXPosition()],
y: yPos[randomYPosition()],
draggable: true
});
新资料： 这是你的功能：
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]); //a[1] contains the image object reference
}
else {
context.drawImage(a[1], a[2], a[3], a[4], a[5], a[6], a[7], a[8], a[9]);
}
}
context.restore();
}
尝试：
drawImage: function() {
var context = arguments[0];
context.save();
var a = Array.prototype.slice.call(arguments);
var randomSpot = randomGridPosition();
var canvasImage = new Kinetic.Image({
image: a[1],
width: 50,
height: 50,
x: randomSpot.x,
y: randomSpot.y,
draggable: true
});
canvasImage.on('mouseover', function(){/*define any handlers you want*/};
layer.add(canvasImage); //or whatever your layer is called
}
随机网格位置：
function randomGridPosition(){ //10x10 grid
var width= .9*stage.getWidth()/10;
var height= .9*stage.getHeight()/10;
var randomX = Math.floor(10*Math.random()*width); //select random x position dependent on width
var randomY = Math.floor(10*Math.random()*height); //select random y position dependent on height
return {x: randomX, y: randomY};
}
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？