Почему нельзя перетащить прямоугольник на холст с помощью XOR globalCompositeOperation?

Question

Я создал много прямоугольников на холсте.Теперь я собираюсь перетащить одного из них на холст. Как это сделать?Я нахожу решение: очистить холст и перерисовать его снова.Да, это работает.Но если есть 10 000 прямоугольников, мне нужно много времени, чтобы перерисовать их.Я программист на C ++.Я знаю, как реализовать эту функцию, используя XOR.Я нашел решение Java на , как рисовать прямоугольник на Java-апплете, используя событие перетаскивания мышью .Почему Canvas XOR не работает так, как я хочу?Есть ли другие способы реализовать мой идеал?спасибо.

Answer 1

Вы можете создать скрытое изображение, содержащее исходное изображение холста (перед перетаскиванием), а затем перерисовать его с помощью сохраненного изображения, поэтому для каждого перемещения выполняется только одна операция рисования.

//canvas = your canvas element
//Save the image before drag
var img = new Image();
img.src = canvas.toDataURL();

//On drag, redraw the saved image
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(img, 0, 0);

jsFiddle .

---

Или, если вы знаете ширину и высоту прямоугольника, вы можете перерисовать только ту область, где прямоугольник был раньше:

//Store the rectangle's coordinates
var rectCoords = {x: 0, y: 0};
//The rectangle's size
var rectSize = {width: 50, height: 50};
//Create a canvas element
var savedCanvas = document.createElement("canvas");
savedCanvas.width = canvas.width + rectSize.width;
savedCanvas.height = canvas.height + rectSize.height;
var ctxSaved = savedCanvas.getContext("2d");

Перед перетаскиванием:

//Draw the entire canvas onto the saved canvas
ctxSaved.drawImage(canvas, 0, 0);
//Store your coordinates for the redraw
rectCoords.x = "Your coordinate";
rectCoords.y = "Your coordinate";

Когда вам нужно перерисовать прямоугольник, вам просто нужно сделать:

//Draw original image only in the area where the rectangle was drawn
ctx.drawImage(savedCanvas, rectCoords.x, rectCoords.y, rectSize.width, rectSize.height,
rectCoords.x, rectCoords.y, rectSize.width, rectSize.height);
//Store your coordinates for the next redraw
rectCoords.x = "Your coordinate";
rectCoords.y = "Your coordinate";

Пожалуйста, смотрите jsFiddle для рабочего демо.

Примечание: это не будет работать, если у вас есть изображения, нарисованные на холсте из другого домена, из-за проблем безопасности.

Answer 2

Я бы не стал дурачиться с XOR, чтобы заставить его работать, это не очень подходит, потому что «до» и «после» чертежа включают в себя прямоугольник, который вы хотите переместить.

ВНачните в том же духе, посмотрите мои учебники по этому вопросу .

Answer 3

Нет способа, как управлять только одним элементом в Canvas. Когда вы рисуете что-то на холст, API просто пишет «пиксели» на холст и забывает обо всем.