Как изменить только ширину пути (прямоугольник, круг) при перетаскивании мышью с помощью paper.js

Я застрял на изменении размера только ширины элемента на холсте с помощью paper.js. Я сделал следующие способы изменения размера, но это приводит к изменению размера как левой, так и правой сторон от центра прямоугольника/круга.

function onMouseDrag(event){

(selectedItem.bounds.contains(event.point)) ?
selectedItem.scale(0.9871668311944719,1) : selectedItem.scale(1.013, 1);
}

приведенный выше код изменяет размеры в обоих направлениях x.

Помогите мне изменить ширину только в одном направлении.

Благодарность,

сурибабу.


html5-canvas paperjs
person surbob    schedule 28.02.2013    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Вы можете центрировать операцию масштабирования в любой точке, используя форму:

scale(hor, ver, point)

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

function onMouseDrag(event){

(selectedItem.bounds.contains(event.point)) ?
selectedItem.scale(0.9871668311944719, 1, selectedItem.bounds.left) : selectedItem.scale(1.013, 1, selectedItem.bounds.left);
}
person Alex Blackwood    schedule 28.02.2013

arrow_upward
0
arrow_downward

Я не уверен, что вы имеете в виду под масштабом только по ширине. Если вы хотите иметь более толстый путь, вместо этого изменение strokeWidth может сделать то, что вы хотите.

Если вам интересно, почему масштабированный путь расширяется в обоих направлениях по оси x, вы можете проверить расположение локального центра пути. Если некоторые узлы пути имеют отрицательные координаты относительно этого локального центра, масштабирование их с положительным значением еще больше уменьшает их координаты.

Возможно, вам следует нормализовать все вершины, то есть переместить их напрямую, чтобы наименьшее значение x и y всех вершин было равно 0.

Привет и удачи

person philipp    schedule 28.02.2013

arrow_upward
0
arrow_downward

Попробуй это:

function onMouseDown(e) {
    var cx = e.point.x;
    var cy = e.point.y;
    var rectangle = new Rectangle(e.point, new Size(1,1));
    path = new Path.Ellipse(rectangle);
    path.strokeColor = 'red';       
}

function onMouseDrag(e) {
    path.remove();
    var x = Math.min(e.point.x, cx),
        y = Math.min(e.point.y, cy),
        w = Math.abs(e.point.x -cx),
        h = Math.abs(e.point.y -cy);
    var rectangle = new Rectangle(x,y,w,h);
    path = new Path.Ellipse(rectangle);
    path.strokeColor = 'red'
}
person radha    schedule 03.09.2013