使 PGraphic 对象成为光标

Question

这是我的问题的后续：。

我有一个画图应用程序。可以在此处找到最新的工作版本：https://knowledgeablekangaroo.github.io/paint-a-picture-backup/，其中的代码可以在 F12 > Sources > paint-a-picture.js.[=19= 中找到]

用户可以选择颜色、设置背景、设置厚度、形状和不透明度。还有一个橡皮擦功能。我希望有更好的用户体验，所以我试图在下面画橡皮擦作为光标。如果光标不起作用，我需要一些不会弄脏的东西。

按照我的编程方式，“绘画区域”（控制中心上方和调色板下方）内的任何地方都会涂抹 - background() 在绘图之外。

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();

我使用 createGraphics() 函数创建了一个 PGraphics 对象。重点是显示橡皮擦，而This shows the eraser I have drawn in the pGraphic above.

在 drawBrush() 函数中，我将其设为图像。

    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);
    }
};

研究

This best describes my problem

Answer 1

将图形存储在 pg 变量中后，您可以使用 image() 函数绘制它：

image(pg, mouseX, mouseY);

这里有一个小例子来说明我在说什么：

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);
}

使 PGraphic 对象成为光标

Make PGraphic Object the cursor

cursor

processing.js

pgraphics

研究