Paint something into Stencil (Preview) component

[ehernandezColegium]

Hey @Norserium! Me again 😄

I'm willing with a requeriment that I saw in another web, and it looks good and interesting to reproduce with vue-advanced-cropper. We are working in a "template" or "guide" in aras people will able to adjust their avatar photo exactly in the same position where guide is using the Circle Stencil component and its preview component.

I have started to read this docs section to accomplish it, but I stuck in this part.

Some hints to do it? I want to make a component apart for reusability reason and enable/disable the feature via props.

[Norserium]

@ehernandezColegium, hello! Why did you stuck? The creating of a stencil is pretty straightforward. There is the sandbox for that example.

[ehernandezColegium]

Hey @Norserium!

Until now, I was able to do this. I was trying to do the ovals into Stencil Preview component (into the tag itself as a default slot), but look like itself doesn't accept default slots.

I fixed Stencil component too to avoid drag, and I painted ovals but with tricky (and messy) css. Responsiveness is awkward too, so it might be nice if you mind any help about how to I can continue here.

I noted a z-index issue at moment to paint hr tag for vertical and horizontal lines. I know I have some lack of knowledge about css, but maybe with your kindly info about components under hood I could continue with guides into Preview component.

Thanks in advanced.

[Norserium]

@ehernandezColegium what's behavior you want to get? Could you provide the example of the stencil with the desired behavior? I don't see any handlers on your image above.

I was trying to do the ovals into Stencil Preview component (into the tag itself as a default slot), but look like itself doesn't accept default slots.

Yes. It doesn't.

[Norserium]

@ehernandezColegium, currently, I don't see that there are cropper specific issues. There are plenty of ways to implement your example by the code. For example, you can use percentages instead of absolute values.

[ehernandezColegium]

@Norserium yeah, I mean, I was using percentages values, but because no reason It doesn't work properly. I was wondering about this in terms of Mobile support.

About handlers, I have got rid of it because we need Preview component was fixed and only image could be draggable. That why if you're hovering Preview, cursor changing vs hovering background image; it is small change in the style computed property.

Looking your example (pretty nice, dude), I was mind about how do you know the exact percentage for each element. Do you use some "equation" for that or It was just a manual calc?

Thanks in advanced.

[Norserium]

Looking your example (pretty nice, dude), I was mind about how do you know the exact percentage for each element. Do you use some "equation" for that or It was just a manual calc?

It was just fast manual calculations. The basis is the width of the circle in your example. All other dimensions are calculated relative to its size.

For example:

relative_width_of_eye = width_of_eye / width_of_circle

Where width_of_eye and width_of_circle are the widths in pixels of the corresponding items on your example image.

[ehernandezColegium]

Wow, good one there! I'm not have that assumption level of things, minus for css implementation.

I don't know if it would be hard, but it might nice a Stencil Preview component slot to paint with css thing into it, just for easy coding. But anyway, like previous example, astonishing work dude, thanks you again!!

[Norserium]

@ehernandezColegium, you are welcome!

I don't know if it would be hard, but it might nice a Stencil Preview component slot to paint with css thing into it, just for easy coding

I don't get the idea. Could you explain what do you mean by "paint with css thing into it"?

[ehernandezColegium]

Hey @Norserium!

Yeah, I mean, a slot where preview component works like you have solved example above.

[Norserium]

@ehernandezColegium, I will think about it, but currently I suppose, that the creating of a custom stencil is the most flexible and obvious way to solve such tasks.