This commit is contained in:
syuilo 2018-05-30 04:07:23 +09:00
parent 248acaee75
commit fa56a44d85

View file

@ -1,12 +1,10 @@
<template> <template>
<svg class="mk-analog-clock" viewBox="0 0 10 10" preserveAspectRatio="none"> <svg class="mk-analog-clock" viewBox="0 0 10 10" preserveAspectRatio="none">
<line v-for="angle, i in graduations" <circle v-for="angle, i in graduations"
:x1="5 + (Math.sin(angle) * (5 - graduationsPadding))" :cx="5 + (Math.sin(angle) * (5 - graduationsPadding))"
:y1="5 - (Math.cos(angle) * (5 - graduationsPadding))" :cy="5 - (Math.cos(angle) * (5 - graduationsPadding))"
:x2="5 + (Math.sin(angle) * ((5 - graduationsPadding) - (i % 5 == 0 ? longGraduationLength : shortGraduationLength)))" :r="i % 5 == 0 ? 0.125 : 0.05"
:y2="5 - (Math.cos(angle) * ((5 - graduationsPadding) - (i % 5 == 0 ? longGraduationLength : shortGraduationLength)))" :fill="i % 5 == 0 ? majorGraduationColor : minorGraduationColor"/>
:stroke="i % 5 == 0 ? longGraduationColor : shortGraduationColor"
stroke-width="0.05"/>
<line <line
:x1="5 - (Math.sin(sAngle) * (sHandLengthRatio * handsTailLength))" :x1="5 - (Math.sin(sAngle) * (sHandLengthRatio * handsTailLength))"
@ -43,14 +41,13 @@ export default Vue.extend({
default: false default: false
} }
}, },
data() { data() {
return { return {
now: new Date(), now: new Date(),
clock: null, clock: null,
graduationsPadding: 0.5, graduationsPadding: 0.5,
longGraduationLength: 0.3,
shortGraduationLength: 0.15,
handsPadding: 1, handsPadding: 1,
handsTailLength: 0.7, handsTailLength: 0.7,
hHandLengthRatio: 0.75, hHandLengthRatio: 0.75,
@ -58,11 +55,12 @@ export default Vue.extend({
sHandLengthRatio: 1 sHandLengthRatio: 1
}; };
}, },
computed: { computed: {
longGraduationColor(): string { majorGraduationColor(): string {
return this.dark ? 'rgba(255, 255, 255, 0.3)' : 'rgba(0, 0, 0, 0.3)'; return this.dark ? 'rgba(255, 255, 255, 0.3)' : 'rgba(0, 0, 0, 0.3)';
}, },
shortGraduationColor(): string { minorGraduationColor(): string {
return this.dark ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)'; return this.dark ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
}, },
@ -106,12 +104,15 @@ export default Vue.extend({
return angles; return angles;
} }
}, },
mounted() { mounted() {
this.clock = setInterval(this.tick, 1000); this.clock = setInterval(this.tick, 1000);
}, },
beforeDestroy() { beforeDestroy() {
clearInterval(this.clock); clearInterval(this.clock);
}, },
methods: { methods: {
tick() { tick() {
this.now = new Date(); this.now = new Date();