Make thickness of clock hands configuable

This commit is contained in:
syuilo 2021-07-19 23:31:27 +09:00
parent f142ed91fb
commit 756b8a2a29
2 changed files with 27 additions and 6 deletions

View File

@ -5,7 +5,8 @@
:cy="5 - (Math.cos(angle) * (5 - graduationsPadding))"
:r="i % 5 == 0 ? 0.125 : 0.05"
:fill="i % 5 == 0 ? majorGraduationColor : minorGraduationColor"
:key="i"/>
:key="i"
/>
<line
:x1="5 - (Math.sin(sAngle) * (sHandLengthRatio * handsTailLength))"
@ -13,7 +14,8 @@
:x2="5 + (Math.sin(sAngle) * ((sHandLengthRatio * 5) - handsPadding))"
:y2="5 - (Math.cos(sAngle) * ((sHandLengthRatio * 5) - handsPadding))"
:stroke="sHandColor"
stroke-width="0.05"/>
:stroke-width="thickness / 2"
/>
<line
:x1="5 - (Math.sin(mAngle) * (mHandLengthRatio * handsTailLength))"
@ -21,7 +23,8 @@
:x2="5 + (Math.sin(mAngle) * ((mHandLengthRatio * 5) - handsPadding))"
:y2="5 - (Math.cos(mAngle) * ((mHandLengthRatio * 5) - handsPadding))"
:stroke="mHandColor"
stroke-width="0.1"/>
:stroke-width="thickness"
/>
<line
:x1="5 - (Math.sin(hAngle) * (hHandLengthRatio * handsTailLength))"
@ -29,16 +32,23 @@
:x2="5 + (Math.sin(hAngle) * ((hHandLengthRatio * 5) - handsPadding))"
:y2="5 - (Math.cos(hAngle) * ((hHandLengthRatio * 5) - handsPadding))"
:stroke="hHandColor"
stroke-width="0.1"/>
:stroke-width="thickness"
/>
</svg>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import * as tinycolor from 'tinycolor2';
import * as os from '@client/os';
export default defineComponent({
props: {
thickness: {
type: Number,
default: 0.1
}
},
data() {
return {
now: new Date(),

View File

@ -1,7 +1,7 @@
<template>
<MkContainer :naked="props.transparent" :show-header="false">
<div class="vubelbmv">
<MkAnalogClock class="clock"/>
<MkAnalogClock class="clock" :thickness="props.thickness"/>
</div>
</MkContainer>
</template>
@ -20,6 +20,17 @@ const widget = define({
type: 'boolean',
default: false,
},
thickness: {
type: 'radio',
default: 0.1,
options: [{
value: 0.1, label: 'thin'
}, {
value: 0.2, label: 'medium'
}, {
value: 0.3, label: 'thick'
}]
}
})
});