Как присвоить значение радиуса для динамически созданного круга в paper.js

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


javascript graphics paperjs
person Jeni    schedule 18.12.2014    source источник
comment
on mousedown регистрирует точку, в которой была нажата мышь. На mouseup запишите точку, в которой была мышь. Математика становится довольно простой, чтобы найти прямую линию между этими двумя точками, которая является радиусом вашего круга.   -  person nicholaswmin    schedule 21.12.2014
comment
спасибо .. я понял @ Николас   -  person Jeni    schedule 24.12.2014

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете рассчитать расстояние между нижней точкой мыши и текущим положением мыши.

Затем используйте это расстояние в качестве радиуса вашего круга.

Вот код, который делает именно это:

function onMouseDrag(event) {
    var trackingCircle = new Path.Circle({
        position: event.downPoint, 
        radius: event.downPoint.subtract(event.point).length,
        dashArray: [2, 2],
        strokeColor: 'red'
    })

    trackingCircle.removeOn({
        drag: true,
        down: true,
        up:true
    })
}

function onMouseUp(event) {
    var circle = new Path.Circle({
        position: event.downPoint, 
        radius: event.downPoint.subtract(event.point).length,
        strokeColor: 'black'
    })
}

and here's the actual Эскиз (нажмите и перетащите на холсте).

person nicholaswmin    schedule 24.12.2014