在处理中的图像周围移动

Question

是否可以在不清除整个背景的情况下移动图像（或图像对象）？

我希望创建一个允许用户使用鼠标以外的设备“绘画”的应用程序。我希望有一个光标来跟随用户使用输入设备的移动，而不必清除已经绘制的图片。

这可能吗？又如何呢？

Answer 1

这取决于你如何处理绘画。
我建议使用 PImage 作为画布进行绘制，并使用另一个 PImage 来存储画笔的像素。 “画笔”可以是加载的图像，或者在草图开始时，您可以使用绘图命令制作画笔，然后使用 get().

您将需要清除所有内容，因为您想要绘制光标，但您也将绘制画布，并且仅当按下鼠标（或某些设备特定方法）时，您才会使用 copy() 或 blend() 函数（取决于您的画笔 PNG - 有或没有透明度等）

下面是一个快速草图来说明这一点：

PImage canvas;
PImage brush;

void setup(){
  size(800,800);
  stroke(128);
  smooth();
  canvas = createImage(width,height,ARGB);
  brush = loadImage("brush.png");
}

void draw(){
  background(255);
  image(canvas,0,0);
  //draw cursor
  line(mouseX-5,mouseY-5,mouseX+5,mouseY+5);
  line(mouseX+5,mouseY-5,mouseX-5,mouseY+5);
  //blend brush pixels into canvas if mouse is pressed
  if(mousePressed) canvas.blend(brush, 0, 0, brush.width, brush.width, (int)(mouseX-brush.width*.5), (int)(mouseY-brush.height*.5), brush.width, brush.width,MULTIPLY);
}

请注意，您需要将图像放入草图的数据文件夹中。

您可以在此处尝试：

您可以运行以下 javascript 版本：

var canvas;
var brush;

function setup(){
  createCanvas(800,800);
  stroke(128);strokeWeight(3);
  smooth();
  canvas = createImage(width,height);
  brush = getGradientImg(64,64,random(360),random(100),85);
}

function draw(){
  background(255);
  image(canvas,0,0);
  //draw cursor
  line(mouseX-5,mouseY-5,mouseX+5,mouseY+5);
  line(mouseX+5,mouseY-5,mouseX-5,mouseY+5);
  //blend brush pixels into canvas if mouse is pressed
  if(isMousePressed) canvas.blend(brush, 0, 0, brush.width, brush.width, (int)(mouseX-brush.width*.5), (int)(mouseY-brush.height*.5), brush.width, brush.width,MULTIPLY);
  //image(brush,mouseX,mouseY);
}
//*
function getGradientImg(w,h,hue,satMax,brightness){
  push();//isolate drawing styles such as color Mode
    colorMode(HSB,360,100,100);
    var gradient = createImage(w,h);//create an image with an alpha channel
    var np = w * h;//total number of pixels
    var np4 = np*4;
    var cx = floor(gradient.width * 0.5);//center on x
    var cy = floor(gradient.height * 0.5);//center on y
    gradient.loadPixels();
    for(var i = 0 ; i < np4; i+=4){//for each pixel
      var id4 = floor(i * .25);
      var x = id4%gradient.width;//compute x from pixel index
      var y = floor(id4/gradient.width);//compute y from pixel index
      var d = dist(x,y,cx,cy);//compute distance from centre to current pixel
      //map the saturation and transparency based on the distance to centre
      gradient.pixels[i]   = hue;
      gradient.pixels[i+1] = map(d,0,cx,satMax,0);
      gradient.pixels[i+2] = brightness;
      gradient.pixels[i+3] = map(d,0,cx,255,0);
    }
    gradient.updatePixels();//finally update all the pixels
  pop();
  console.log(gradient);
  return gradient;
}
//*/

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.4/p5.min.js"></script>