56 lines
No EOL
1.2 KiB
Vue
56 lines
No EOL
1.2 KiB
Vue
<template>
|
|
<text
|
|
: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"
|
|
>
|
|
{{ text }}
|
|
</text>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Vue, Options } from "vue-class-component";
|
|
import { Rectangle, Vector2D } from "./rectangles";
|
|
|
|
@Options({
|
|
props: {
|
|
rectangle: Rectangle,
|
|
text: String,
|
|
},
|
|
})
|
|
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>
|
|
|
|
<style lang="scss" scoped>
|
|
text {
|
|
fill: red;
|
|
|
|
font-weight: bold;
|
|
font-size: 50px;
|
|
}
|
|
</style> |