В основном я хочу создать новый путь с холстом globalCompositeOperation, установленным на «назначение-выход». Это возможно? Если да, то как?
Я заметил, что у Item есть свойство blendMode: http://paperjs.org/reference/item#blendmode, но попытка разных значений не дает желаемого эффекта.
В свете вашего недавнего комментария вам нужно будет создать слои, как описано здесь:
http://paperjs.org/tutorials/project-items/project-hierarchy/#removing-items-and-children
а затем вы можете добавить свои пути к слою и сделать что-то вроде этого:
//add image to project as background
// ... your code here ...
var secondLayer = new Layer();
Всякий раз, когда вы создаете новый слой, он становится активным слоем проекта, и тогда вы можете рисовать поверх второго слоя все, что хотите.
если вам нужна простая кнопка «отменить», вы можете сделать:
function onMouseDown(event) {
if (window.mode == "drawing") {
myPath = new Path();
myPath.strokeColor = 'black';
}
else if (window.mode == "undo") {
myPath.opacity = '0'; //this makes the last path used completely see through
// or myPath.remove(); // this removes the path.
//if you're intent on something that writes and erases, you could do
}
}
Но то, что вы ищете, выглядит примерно так:
function onMouseDrag(event) {
if (window.mode == "drawing") {
myPath.add(event.point);
}
else if (window.mode == "erasing") {
myPath.removeSegment(0);
}
}
это стирает сегменты пути от начала до конца. Для полной функциональности вам нужно что-то, что идентифицирует путь при щелчке (layer.getChildren()? затем выберите дочерний элемент). Затем, используя точку при перемещении мыши, вам нужно определить индекс сегмента и удалить его с пути, используя .removeSegment(index).
http://paperjs.org/reference/path#removesegment-index
Что ж, простым решением было бы просто создать белый путь. http://jsfiddle.net/D8vMG/11/
function onMouseDown(event) {
if (window.mode == "drawing") {
myPath = new Path();
myPath.strokeColor = 'black';
}
else if (window.mode == "erasing") {
myPath = new Path();
myPath.strokeColor = 'white';
myPath.strokeWidth = 10;
}
}
