CODEWITHSUNDEEP
javascriptgraphicspaperjs
Jeni
Jeni

Reputation: 430

How to assign the radius value for the dynamically created circle in paper.js

I want to draw a circle like in paint, if the mousedown means it takes the point and if dragging the mouse means the radius of the circle should be increased accordingly, can anyone help me

Upvotes: 1

Views: 1525

Answers (1)

nicholaswmin
nicholaswmin

Reputation: 22999

You can calculate the distance between the mouse downpoint and the current mouse position.

Then use that distance as the radius of your circle.

Here's some code that does just that:

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 Sketch, (click-and-drag on the canvas).

Upvotes: 1

Related Questions