Lenaisten/advent22
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

account for SVG aspect ratio

Browse source
This commit is contained in:
Jörn-Michael Miehe 2023-01-24 23:11:49 +00:00
parent a977b9b11c
commit 9431673eee
1 changed files with 25 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
ui/src/components/rects/RectText.vue
View file

@ -1,7 +1,8 @@
<template>
<text
:x="rectangle.left + 0.5 * rectangle.width"
:y="rectangle.top + 0.5 * rectangle.height"
:x="Math.round(parent_aspect_ratio * rect_middle.x)"
:y="Math.round(rect_middle.y)"
:style="`transform: scaleX(${1 / parent_aspect_ratio})`"
text-anchor="middle"
dominant-baseline="middle"
>
@ -11,7 +12,7 @@
<script lang="ts">
import { Vue, Options } from "vue-class-component";
import { Rectangle } from "./rectangles";
import { Rectangle, Vector2D } from "./rectangles";
@Options({
props: {
@ -22,6 +23,26 @@ import { Rectangle } from "./rectangles";
export default class RectText extends Vue {
private rectangle!: Rectangle;
private text!: string;
private refreshKey = 0;
private get rect_middle(): Vector2D {
return this.rectangle.origin.plus(this.rectangle.size.scale(0.5));
}
private get parent_aspect_ratio(): number {
this.refreshKey; // read it just to force recompute on change
if (!(this.$el instanceof Element) || this.$el.parentElement === null) {
return 1;
}
const parent = this.$el.parentElement;
return parent.clientWidth / parent.clientHeight;
}
public mounted() {
this.refreshKey++;
}
}
</script>
@ -30,7 +51,6 @@ text {
fill: red;
font-weight: bold;
font-size: 40px;
font-stretch: condensed;
font-size: 50px;
}
</style>