在處理中移動圖像

Question

是否可以在不清除整個背景的情況下移動圖像（或圖像對象）？

我想創建一個應用程序，允許用戶使用不是鼠標的設備「繪製」。我希望有一個光標用輸入設備跟隨用戶的移動，而不必清除已經繪製的圖片。

這可能嗎？如何？

Answer 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; 
 
} 
 
//*/

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