Есть ли способ в paper.js увеличить только часть холста вместо целого? - PullRequest
Новая
       32

Есть ли способ в paper.js увеличить только часть холста вместо целого?

0 голосов
/ 22 июня 2019

Я создаю Webtool с двумя разделами внутри холста:

  • Первый раздел предназначен для выбора путей.
  • второй раздел предназначен для размещения этих путей (написание с ними)

Я использую paper.js для всех функций внутри холста.Я сделал два слоя для разных разделов и переключался между ними, отслеживая положение мыши.

Теперь я хочу реализовать увеличение в первом разделе.Я видел, что объект просмотра в paper.js поставляется с функцией масштабирования.После некоторого поиска в Google я нашел это https://gist.github.com/ryascl/4c1fd9e2d5d0030ba429 решение для простого увеличения.

Теперь моя проблема;если я использую этот масштаб, весь холст будет увеличен / уменьшен.Это не то, что мне нужно.Мне нужен зум только в первом разделе.Есть ли способ увеличить только определенную область или, возможно, определенный слой?

1 Ответ

3 голосов
/ 23 июня 2019

Я вижу 2 возможных решения этой проблемы:

решение 1

Вы можете напрямую масштабировать свои элементы, используя item.scale () вместо view.zoom .
Проблема, с которой вы можете столкнуться, состоит в том, что ваш слой непременно будет перекрываться, поэтому вы можете комбинировать этот подход с group.clipped , чтобы скрыть переполнение слоя.
Здесьэто эскиз , демонстрирующий это решение. 

// Draw a line materializing layers separation.
new Path.Line({
    from: view.bounds.topCenter,
    to: view.bounds.bottomCenter,
    strokeColor: 'black'
});

// Draw a rectangle that will be used to crop the layer.
var cropRectangle = new Path.Rectangle({
    from: view.bounds.toLeft,
    to: view.bounds.bottomCenter
});

// Draw a circle in the left part of the screen.
var circle = new Path.Circle({
    center: [view.bounds.leftCenter.x + view.center.x / 2, view.center.y],
    radius: 50,
    fillColor: 'orange'
});

// Create a group that will be used to pan/zoom left part.
var group = new Group([circle]);

// Create left part layer and crop it with the rectangle so that overflow is
// hidden.
var layer = new Layer([cropRectangle, group]);
layer.clipped = true;

// Directly manipulate the group when you want to pan/zoom.
group.translate(view.bounds.width / 4, 0);
group.scale(1.5);

// You can use the same architecture for the right part...

решение 2

Лично я бы выбрал другое решение, состоящее из управления двумя отдельными холстами и инициализации Paper.js накаждый из которых производит 2 различных PaperScope экземпляра.
Тогда вы сможете контролировать view.zoom для каждого из этих полотен.
Вот скрипка , демонстрирующая это решение. 

// Initialize paper scopes.
var scope1 = new paper.PaperScope();
scope1.setup(document.getElementById('canvas1'));

var scope2 = new paper.PaperScope();
scope2.setup(document.getElementById('canvas2'));

// Draw a circle on left canvas.
new paper.Path.Circle({
    center: scope1.view.center,
    radius: 50,
    fillColor: 'orange',
    parent: scope1.project.activeLayer
});

// Draw a circle on right canvas.
new paper.Path.Circle({
    center: scope2.view.center,
    radius: 50,
    fillColor: 'blue',
    parent: scope2.project.activeLayer
});

// Zoom in left canvas.
scope1.view.zoom = 2;

// Zoom out right canvas.
scope2.view.zoom = 0.5;
...