时间戳

首页 > 解决方案 > 使 PGraphic 对象成为光标

cursor - 使 PGraphic 对象成为光标

问题描述

这是我的问题的后续：使光标成为自绘图像。

我有一个绘画应用程序。最新的工作版本可以在这里找到：https ://knowledgeablekangaroo.github.io/paint-a-picture-backup/ ，代码可以在F12 > Sources > paint-a-picture.js中找到。

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

按照我的编程方式，“油漆区域”内的任何地方（控制中心上方和托盘下方）都会涂抹 -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 对象。重点是显示橡皮擦，而这显示了我在上面的 pGraphic 中绘制的橡皮擦。

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

研究

这最能描述我的问题

标签： cursorprocessing.jspgraphics

解决方案

将图形存储在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);
}

推荐阅读