When resizing dots and path are separate after resizing them to the paper.view.center

53 views
Skip to first unread message

Alyona Rodina

unread,
Dec 7, 2021, 9:06:41 AM12/7/21
to Paper.js
Good day, 

Could you please help with resizing? assigning dots and path to the paper.view.center on resizing, separate. Is there are a way for them to be together when path and circles have different points but the circles lie on the path. 

Thank you for your help!!!!
Alyona

Samuel ASENSI

unread,
Dec 8, 2021, 3:28:01 AM12/8/21
to pap...@googlegroups.com
Hi,

This is not very clear what you are trying to do.
Could you maybe post an image illustrating your goal ?

--
You received this message because you are subscribed to the Google Groups "Paper.js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to paperjs+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/paperjs/e9cf1b16-9354-46cd-a997-7a8feb7aba22n%40googlegroups.com.


--
    Samuel ASENSI
Message has been deleted

Samuel ASENSI

unread,
Dec 8, 2021, 9:36:18 AM12/8/21
to pap...@googlegroups.com
I think that I get what you mean.
The key thing in order to preserve the relative positions, is to use the same scale center for the path and the other shapes when scaling up or down.
Here's a sketch hopefully demonstrating a possible solution.

const circle = new Path.Circle({
    center: view.center,
    radius: 50,
    strokeColor: 'orange',
    strokeWidth: 10
});

const dotsOnCircle = [0.2, 0.5, 0.6].map((t) => new Path.Circle({
    center: circle.getPointAt(t * circle.length),
    radius: 4,
    fillColor: 'blue'
}));

function scale(amount) {
    circle.scale(amount);
    dotsOnCircle.forEach((it) => it.scale(amount, circle.position));
}

scale(5);


Le mer. 8 déc. 2021 à 15:26, Alyona Rodina <alyona...@instrument.com> a écrit :
Hi, thank you for your response! 
Please see it in the attachment. 
when I assign the path onResize to the path.position= paper.view.center and the objects on it that lies on the path object.position=paper.view.center they are separate.
Only for example after interaction together - they became as the whole and already do not separate on resizing and work very nice. It seems as if they have slightly different view.centers. 
IMG_2421.jpg


--
    Samuel ASENSI

Alyona Rodina

unread,
Dec 8, 2021, 9:53:03 AM12/8/21
to Paper.js
Thank you! This is for zooming in/out. But meant resizing the browser. I need the path to change the center position on resizing the browser. But maybe if we add onResize the scaling and view.center together it will work? Let me try 

Alyona Rodina

unread,
Dec 8, 2021, 10:19:47 AM12/8/21
to Paper.js
Here if we resize the browser the circle is good but the dots stay the same. They have to move together. 

let circle = new Path.Circle({

    center: view.center,
    radius: 50,
    strokeColor: 'orange',
    strokeWidth: 10
});

const dotsOnCircle = [0.2, 0.5, 0.6].map((t) => new Path.Circle({
    center: circle.getPointAt(t * circle.length),
    radius: 4,
    fillColor: 'blue'
}));

function scale(amount) {
    circle.scale(amount);
    dotsOnCircle.forEach((it) => it.scale(amount, circle.position));
}

scale(5)
function onResize(event) {
        circle.position = view.center;      

Samuel ASENSI

unread,
Dec 9, 2021, 3:03:53 AM12/9/21
to pap...@googlegroups.com
This could be a solution:

let circle = new Path.Circle({
    center: view.center,
    radius: 50,
    strokeColor: 'orange',
    strokeWidth: 10
});

const dotsOnCircle = [0.2, 0.5, 0.6].map((t) => new Path.Circle({
    center: circle.getPointAt(t * circle.length),
    radius: 4,
    fillColor: 'blue'
}));

function scale(amount) {
    circle.scale(amount);
    dotsOnCircle.forEach((it) => it.scale(amount, circle.position));
}

scale(5);

function onResize(event) {
    const delta = view.center - circle.position
    circle.position += delta;
    dotsOnCircle.forEach((it) => it.position += delta);
}




--
    Samuel ASENSI

Alyona Rodina

unread,
Dec 9, 2021, 8:48:33 AM12/9/21
to Paper.js
Thank you 🙏 so much!!!
Reply all
Reply to author
Forward
0 new messages