代码之家 › 专栏 › 技术社区 › Marvin

使PGraphic对象成为光标

pgraphics processing.js cursor

1

Marvin · 技术社区 · 7 年前

Make the cursor a self-drawn image .

我有一个绘画应用程序。最新的工作版本可以在这里找到: https://knowledgeablekangaroo.github.io/paint-a-picture-backup/ F12>来源>油漆-a-图片.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()

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

1 回复 | 直到 6 年前

1

0

Kevin Workman 7 年前

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