Сделать PGraphic Object курсором - PullRequest
Новая
       32

Сделать PGraphic Object курсором

0 голосов
/ 16 сентября 2018

Это продолжение моего вопроса: Сделать курсор нарисованным самостоятельно .

У меня есть приложение для рисования картинок.Последнюю рабочую версию можно найти здесь: 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() я делаю это изображение.Eraser

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

Исследования

Это лучше всего описывает мою проблему

1 Ответ

0 голосов
/ 16 сентября 2018

После сохранения графики в переменной 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);
}
...