Question

我正在尝试编写一小段javascript（p5.js），以便可以将图像从桌面拖到浏览器中。然后使用鼠标光标X＆Y可以使图像变形。以前，我只是通过简单地加载图像来使这段代码起作用，但是现在，我希望将其中包含一些交互元素，以便用户可以加载所需的任何图像并应用相同的效果。

var c;
var slice;
var sliceCount;
var sliceWidth;
var sliceWidthChecker;

function setup(){
var c = createCanvas(500,500);
background(51);
fill(255);
c.drop(gotFile);
}

function dropped() {
background(0);
}

function gotFile(file){
var img = createImg(file.data).hide();
image(img, 0, 0, 500, 500);
console.log(img)
noStroke();
stroke(0);
fill(255);
text(file.name, 20, 60);
text(file.size+' bytes', 20, 110);
}

function draw(){
/* setting the sliceWidth */
sliceWidth=windowWidth/12;

/* setting the how many slice on the canvas depending on the sliceWidth
*/
var maxSliceCount = windowWidth/sliceWidth;

/* this is trying to control, if the get pixel reads beyond the image,    
it goes back, but didn't work.*/
if (sliceWidth >= c.width) {
 sliceWidthChecker = sliceWidth - c.width;
 } else {
   sliceWidthChecker = sliceWidth;
 }        

/* drawing the slices */ 
for (sliceCount = 0; sliceCount < maxSliceCount; sliceCount++) {
/* sliceWidthChecker is trying to fix if get pixel reads beyond the        
image, didn't work, can be replace by simply "sliceWidth" */   
/* *0.5 after mouseX is to help if the mose move too much */
slice = c.get(mouseX*0.5+sliceCount*40, 0, sliceWidthChecker,    
c.height);
image(slice, sliceWidth*sliceCount, windowHeight/10, slice.width,     
slice.height);
}
}

Answer 1

您要在草图顶部声明一个变量c：

var c;

然后，您声明一个新变量，该变量在您的setup()函数中恰好具有相同的名称：

var c = createCanvas(500,500);

由于此处使用了var关键字，因此该变量与您在上面创建的变量不同！

然后，您使用原始的c变量：

if (sliceWidth >= c.width) {

但是请注意，从未为原始c变量赋值。这就是导致您出错的原因。

要解决此错误，您可以在初始化第二个var变量时简单地删除c关键字：

c = createCanvas(500,500);

此代码将原始c变量设置为canvas值。

此后，您的代码中还有其他错误，但这应该可以帮助您克服这一障碍。

TypeError：无法读取未定义的属性“ width”

1 个答案: