时间戳

首页 > 解决方案 > 通过鼠标单击加载图像

javascript - 通过鼠标单击加载图像

问题描述

我正在尝试为画布上的每次鼠标单击加载一个带有 p5.js 的 .png 文件。为此，我有以下 HTML 文件

<html>
    <head>
      <meta charset="UTF-8">
      <script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>
      <script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.dom.min.js"></script>
      <script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.sound.min.js"></script>
      <script language="javascript" type="text/javascript" src="sketch.js"></script>
      <script language="javascript" type="text/javascript" src="PictureFlower.js"></script>
    </head>

    <body>
    </body>
</html>

以下代码来自场景的 sketch.js 文件：

'use strict';

var inc = 0.1;
//scale
var scl = 10;
var cols, rows;

var zoff = 0;

var fr;
var flowers = [];

var actRandomSeed = 0;
var img;

function preload() {
   img = loadImage('data/rose.png');
}

function setup() {
   createCanvas(800, 800);

   //flowfield = new Array(cols * rows);
   cols = floor(width / scl);
   rows = floor(height / scl);
   //background(51);
   fr = createP('');
   stroke(0, 128);
}

function draw() {
   background(255);
   //Flow field
   var yoff = 0;
   for (var y = 0; y < rows; y++) {
       var xoff = 0;
       for (var x = 0; x < cols; x++) {
           var index = x + y * cols;
           var angle = noise(xoff, yoff, zoff) * TWO_PI * 4;
           var vec = p5.Vector.fromAngle(angle);

           xoff += inc;
           stroke(0);
           push();
           translate(x * scl, y * scl);
           rotate(vec.heading());
           line(0, 0, scl, 0);

           pop();
       }
       yoff += inc;
       zoff += 0.0004;
   }
   fr.html(floor(frameRate()));
}

function mouseIsPressed() {
   b = new PictureFlower(mouseX, mouseY, img)
}

下面的函数是PictureFlower.js，这里用到了Picture：

function PictureFlower(x, y, img){
   this.x = x;
   this.y = y;
   this.img = img;

    this.display = function(){
        image(this.img, this.x, this.y);
    }
}

问题是，如果我加载图片，帧率就会下降，并且每次点击都没有图片。

我希望你能帮助我。

标签： javascriptprocessingp5.js

解决方案

推荐阅读