36 lines
641 B
Vue
36 lines
641 B
Vue
|
<template>
|
||
|
|
<text
|
||
|
|
:x="rectangle.left + 0.5 * rectangle.width"
|
||
|
|
:y="rectangle.top + 0.5 * rectangle.height"
|
||
|
|
text-anchor="middle"
|
||
|
|
dominant-baseline="middle"
|
||
|
|
>
|
||
|
|
{{ text }}
|
||
|
|
</text>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script lang="ts">
|
||
|
|
import { Vue, Options } from "vue-class-component";
|
||
|
|
import { Rectangle } from "./rectangles";
|
||
|
|
|
||
|
|
@Options({
|
||
|
|
props: {
|
||
|
|
rectangle: Rectangle,
|
||
|
|
text: String,
|
||
|
|
},
|
||
|
|
})
|
||
|
|
export default class RectText extends Vue {
|
||
|
|
private rectangle!: Rectangle;
|
||
|
|
private text!: string;
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss" scoped>
|
||
|
|
text {
|
||
|
|
fill: red;
|
||
|
|
|
||
|
|
font-weight: bold;
|
||
|
|
font-size: 40px;
|
||
|
|
font-stretch: condensed;
|
||
|
|
}
|
||
|
|
</style>
|