问题
This is a follow-up of my question: Make the cursor a self-drawn image.
I have a paint a picture application. The latest working version can be found here: https://knowledgeablekangaroo.github.io/paint-a-picture-backup/, where the code can be found in F12 > Sources > paint-a-picture.js.
The user can choose a color, set the background, set the thickness, shape, and opacity. There is also an eraser functionality. I want there to be a better user experience, so I am trying to draw the eraser below as the cursor. If the cursor doesn't work, I need something that doesn't smear.
The way I have programmed it, anywhere inside the "paint area" (above control center and below pallete) will smear - the background()
is outside the draw.
var pg = createGraphics(pgDimensions.w, pgDimensions.h, JAVA2D);
pg.beginDraw();
pg.fill(255, 200, 255);
pg.strokeWeight(2);
pg.rect(0, 0, pgDimensions.w, pgDimensions.h);
pg.fill(0);
pg.textAlign(CENTER, CENTER);
pg.text("ERASER", pgDimensions.w / 2, pgDimensions.h / 2);
pg.endDraw();
I used the createGraphics()
function to create a PGraphics Object. The point is to show the eraser while This shows the eraser I have drawn in the pGraphic above.
In the drawBrush()
function, I make this an image.
var drawBrush = function() {
fill(currentColor);
noStroke();
shapes.forEach(function (element, index) {
if (pshape == index) {
element.brush();
}
});
if (C === bgColor) {
image(pg, mouseX - pgDimensions.w / 2, mouseY - pgDimensions.h / 2);
}
};
Research
This best describes my problem
回答1:
After you have a graphics stored in your pg
variable, you can draw that using the image()
function:
image(pg, mouseX, mouseY);
Here's a small example that demonstrates what I'm talking about:
var pg;
function setup() {
createCanvas(400, 400);
pg = createGraphics(100, 100);
pg.ellipse(50, 50, 100, 100);
}
function draw() {
background(220);
image(pg, mouseX, mouseY);
}
来源:https://stackoverflow.com/questions/52349987/make-pgraphic-object-the-cursor