在处理过程中移动图像

Question

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

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

这可能吗？怎么样？

Answer 1

这取决于你如何处理绘图。 我建议使用PImage作为绘制画布，使用另一个PImage来存储画笔的像素。 'brush'可以是加载的图像，或者在草图的开头可以使用绘图命令制作画笔，然后使用get()将它们存储为PImage。

您需要清除所有内容，因为您想要绘制光标，但是您也将绘制画布，并且只有在按下鼠标（或某些特定于设备的方法）时才会存储“画笔笔划”。 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);
}

请注意，您需要在草图的数据文件夹中添加图像。

您可以尝试here：

你可以运行一个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>