Support percentage width / height values on the canvas

[Siyfion]

Would it not be nice to also be able to set the canvas height or width to a percentage value? I know this means that internally an event would need to take place on window resize to update the width and height, but is it not worth it?

canvas.setWidth('100%');
canvas.setHeight('80%');

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource.

[dennisideaonce]

Group everything -> done calculate % position of the group -> how? -->>> The position of objects changes a lot, the objects from the center of the drawing board are like -groupwidth/2 and +groupwidth/2 in the opposite direction

scale the group by ratio -> done apply for the same % position -->done Ungroup --> done

@asturur

[dennisideaonce]

https://stackoverflow.com/questions/67869806/calculate-position-of-the-group-in-fabric-js

Unable to position the group by percentage, the position of objects changes a lot, the objects in the center from the center of the drawing board are like -groupwidth/2 and +groupwidth/2 in the opposite direction

[av01d]

How about this solution? https://jsfiddle.net/av01d/9rt1awbx/

[kingschnulli]

@av01d this will not (un-)scale the controls, users will have a hard time using them like this.

[av01d]

@kingschnulli Good point, luckily fixable too. Here's the updated version that scales the controls: https://jsfiddle.net/av01d/9rt1awbx/

[nihaojob]

https://nihaojob.github.io/vue-fabric-editor/#/

This open source project implements zoom and percentage control, which can adapt to zoom according to the window.

这个开源项目实现了缩放和百分比控制的功能，可以根据窗口自适应缩放。

[crystalthoughts]

Hello - is there a stock solution to this now? I don't mind there being a discrepancy between buffer size and display size, so I presume using setDimensions with cssOnly will work ok. Is there anything to be aware of with this? I read somewhere that it only scales once (doesn't resize), but it appears to be working as per regular CSS.

(edited)

[asturur]

i think cssOnly would work ok with standard CSS. i don't think it works with things like objet-fit or similar

[asturur]

i would need to verify the opening post is satisfied and close this old issue