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

[Alyona Rodina]

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]

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

[Samuel ASENSI]

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. 

To view this discussion on the web visit https://groups.google.com/d/msgid/paperjs/9ef41986-ac25-466f-b234-01808677396cn%40googlegroups.com.

--

    Samuel ASENSI

[Alyona Rodina]

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]

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]

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);
}

To view this discussion on the web visit https://groups.google.com/d/msgid/paperjs/94e001f5-e9d1-41d7-8e95-38d66c88d153n%40googlegroups.com.

--

    Samuel ASENSI

[Alyona Rodina]

Thank you 🙏 so much!!!