在处理中移动图像答案

【问题标题】：Move around an image in processing在处理中移动图像
【发布时间】：2015-05-08 17:45:26
【问题描述】：

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

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

这可能吗？怎么做？

【问题讨论】：

标签： processing

【解决方案1】：

这取决于你如何处理绘图。我建议使用 PImage 作为画布进行绘制，并使用另一个 PImage 来存储画笔的像素。 “画笔”可以是加载的图像，或者在草图开始时，您可以使用绘图命令制作画笔，然后使用 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;
}
//*/

&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.4/p5.min.js"&gt;&lt;/script&gt;

【讨论】：