Я пытаюсь использовать paper.js в webapp, но мне не удалось заставить его работать с несколькими холстами. Это подобно областям, которые смешиваются между холстами, поэтому, когда я намереваюсь рисовать на холсте 1, он появляется на холсте 2.
В каждом представлении я инициализирую документ следующим образом:
this.mypaper = new paper.PaperScope();
this.mypaper.setup($("myCanvasId")[0]);
Когда я создаю новые бумажные объекты, я использую то, что должно быть локальной областью:
var circle = new this.mypaper.Path.Circle(10, 10, 5);
Однако, когда я создаю круг в view1, он рисует его в view2.
Я много читал, но я до сих пор не нашел четкого объяснения того, как настраивать несколько бумаг или как изолировать представления друг от друга.
Кто-нибудь знает, как правильно использовать несколько холстов с paper.js?
EDIT: я создал jsFiddle, чтобы проиллюстрировать проблему: http://jsfiddle.net/94RTX/1/
Я не работал с Paper.js широко, но кажется, что каждый вызов Path не использует PaperScope, из которого он обращается, но глобальный объект paper. Поэтому, если вы перезаписываете paper на нужный PaperScope перед каждым экземпляром, он должен работать.
Я действительно решаю это немного по-другому:
var scope1 = new paper.PaperScope();
var scope2 = new paper.PaperScope();
Когда я хочу рисовать в области 1:
scope1.activate();
// now I draw
Аналогично, когда я хочу рисовать в области видимости 2
scope2.activate();
// now I draw
Используйте массивы для разделения ваших документов.
this.mypapers = []
var mypaper = new paper.PaperScope();
mypaper.setup($("myCanvasId")[0]);
mypapers.push(mypaper);
mypaper = new paper.PaperScope();
mypaper.setup($("myCanvasId")[1]);
mypapers.push(mypaper);
var circle = new this.mypapers[0].Path.Circle(10,10,5);
var circle2 = new this.mypapers[1].Path.Circle(10,10,10);
EDIT: я обновил скрипт js: http://jsfiddle.net/94RTX/3/
По-видимому, каждая установка стирает предыдущую, поэтому решение должно сделать это в следующем порядке:
setup canvas 1-> draw canvas 1 -> setup canvas 2 -> draw canvas 2
Я думаю, что нашел решение: я расширил скрипт от @freejosh, чтобы также работать с обратными вызовами (например, изменить размер): трюк заключается в повторной выборке правильной области внутри функции обратного вызова:
http://jsfiddle.net/rassoh/mx9n3vsf/7/
var mypapers = [];
initPaper(0, $("#canvas1")[0]);
initPaper(1, $("#canvas2")[0]);
function initPaper(id, canvasElement) {
var mousePosition = new paper.Point(0,0);
mypapers[id] = new paper.PaperScope();
paper = mypapers[id];
paper.setup(canvasElement);
var myCircle;
createCircle = function() {
if( "undefined" !== typeof myCircle) {
myCircle.remove();
}
// this function is called on resize, so we have to re-fetch the scope!
paper = mypapers[id];
myCircle = new paper.Path.Circle(30, 30, 20);
var lightRed = new paper.Color(1, 0.5, 0.5);
var lightBlue = new paper.Color(0.5, 0.5, 1);
myCircle.style = {
fillColor: id === 0 ? lightRed : lightBlue,
strokeColor: "black"
};
}
createCircle();
var tool = new paper.Tool();
tool.onMouseMove = function(event) {
mousePosition = event.lastPoint;
};
paper.view.onFrame = function() {
if( "undefined" === typeof myCircle) {
return;
}
var dist = mousePosition.subtract( myCircle.position );
dist = dist.divide( 3 );
myCircle.position = myCircle.position.add( dist );
};
paper.view.onResize = function() {
createCircle();
};
}
$(window).resize(function() {
var width = $(".container").width() / 2;
var height = $(".container").height();
// this automatically triggeres paper onResize event registered above
mypapers[0].view.viewSize = new paper.Size( width, height );
mypapers[1].view.viewSize = new paper.Size( width, height );
});
Обратите внимание, что я также включил простое взаимодействие с кругами, чтобы проверить там правильное поведение.
Чтобы более точно управлять тем, с каким бумажным ящиком вы добавляете элементы, вы можете рассмотреть возможность установки опции insertItems на false.
var paper1 = new paper.PaperScope();
paper1.setup(canvasElement);
paper1.settings.insertItems = false;
Таким образом, при создании новых элементов бумаги они автоматически не добавляются к бумаге. Таким образом, независимо от того, в какой области был создан ваш бумажный элемент, вы все равно решили добавить его в одну или другую бумагу. Например, теоретически вы можете:
// create a second scope
var paper2 = new paper.PaperScope();
// create a circle in the first scope
var myCircle = new paper1.Path.Circle(new paper1.Point(100, 70), 50);
myCircle.fillColor = 'black';
// add that circle to the second scope paper
paper2.project.activeLayer.addChild(myCircle);