cione-comp-lib
Version:
`$ yarn add cione-comp-lib` 或者 `$ npm i cione-comp-lib -S`
375 lines (374 loc) • 11.7 kB
JavaScript
import { defineComponent, ref, watch, onMounted, onUnmounted, toRefs, nextTick, openBlock, createElementBlock, normalizeStyle, createElementVNode } from "vue";
import "./index.vue_vue_type_style_index_0_scoped_true_lang.mjs";
import _export_sfc from "../../_virtual/plugin-vue_export-helper.mjs";
const _sfc_main = defineComponent({
name: "CoClockStd",
props: {
width: {
type: String
},
height: {
type: String
},
gradientColor1: {
type: String,
default: "rgba(3,48,58,1)"
},
gradientColor2: {
type: String,
default: "rgba(0,0,0,1)"
},
scaleColor: {
type: String,
default: "rgba(127,255,212,1)"
},
scaleNumColor: {
type: String,
default: "rgba(127,255,212,1)"
},
scaleNumSize: {
type: Number,
default: 30
},
secColor: {
type: String,
default: "rgba(175,238,238,1)"
},
minColor: {
type: String,
default: "rgba(32,178,170,1)"
},
houColor: {
type: String,
default: "rgba(135,206,250,1)"
},
secCircleColor: {
type: String,
default: "rgba(135,206,250,1)"
},
minCircleColor: {
type: String,
default: "rgba(32,178,170,1)"
},
houCircleColor: {
type: String,
default: "rgba(175,238,238,1)"
},
isDate: {
type: Boolean,
default: true
},
dateColor: {
type: String,
default: "rgba(127,255,212,1)"
},
dateSize: {
type: Number,
default: 25
}
},
setup(props) {
const clockDom = ref();
const clockDomW = ref();
const clockDomR = ref();
const canvas = ref();
const ctx = ref();
const ctxBack = ref();
const numBack = ref();
var milliseconds = 0;
var minutes = 0;
var hour = 0;
var date = "";
const timeInterval = ref();
const init = () => {
nextTick(() => {
clockDomW.value = clockDom.value.offsetWidth;
clockDomR.value = clockDom.value.offsetWidth / 2;
canvas.value.width = clockDomW.value;
canvas.value.height = clockDomW.value;
ctx.value = canvas.value.getContext("2d");
ctx.value.strokeStyle = "#7FFFD4";
ctx.value.lineWidth = 3;
ctx.value.shadowBlur = 5;
ctx.value.shadowColor = "#7FFFD4";
ctxBack.value = canvas.value.getContext("2d");
numBack.value = canvas.value.getContext("2d");
ctxBack.value.lineWidth = 1;
ctxBack.value.shadowBlur = 0;
ctxBack.value.shadowColor = "#F0F8FF";
timeInterval.value = setInterval(pageInit, 50);
});
};
const pageInit = () => {
showTime();
showBack();
drawSecPin();
drawMinPin();
drawHouPin();
setPoint();
setNum();
};
const setNum = () => {
numBack.value.save();
numBack.value.translate(clockDomR.value, clockDomR.value);
numBack.value.beginPath();
numBack.value.fillStyle = props.scaleNumColor;
numBack.value.font = `${props.scaleNumSize}px Helvetica`;
for (var i = 0; i < 60; i++) {
if (i % 5 == 0) {
numBack.value.lineWidth = 5;
var xPoint = Math.sin(i * 6 * 2 * Math.PI / 360) * (clockDomR.value - 55);
var yPoint = -Math.cos(i * 6 * 2 * Math.PI / 360) * (clockDomR.value - 55);
numBack.value.fillText(
i == 0 ? 12 : i / 5,
i == 0 ? 0 : xPoint,
i == 0 ? -(clockDomR.value - 65) : i <= 30 ? yPoint + 5 : yPoint + 5
);
}
}
numBack.value.stroke();
numBack.value.closePath();
numBack.value.restore();
};
const drawSecPin = () => {
ctxBack.value.save();
ctxBack.value.translate(clockDomR.value, clockDomR.value);
ctxBack.value.rotate(milliseconds / 60 * 2 * Math.PI);
ctxBack.value.beginPath();
ctxBack.value.strokeStyle = props.secColor;
ctxBack.value.lineWidth = 1;
ctxBack.value.lineJoin = "bevel";
ctxBack.value.miterLimit = 10;
ctxBack.value.moveTo(0, 30);
ctxBack.value.lineTo(3, -(clockDomR.value - 70));
ctxBack.value.lineTo(13, -(clockDomR.value - 80));
ctxBack.value.lineTo(0, -(clockDomR.value - 45));
ctxBack.value.lineTo(-13, -(clockDomR.value - 80));
ctxBack.value.lineTo(-3, -(clockDomR.value - 70));
ctxBack.value.lineTo(0, 30);
ctxBack.value.stroke();
ctxBack.value.closePath();
ctxBack.value.restore();
};
const drawMinPin = () => {
ctxBack.value.save();
ctxBack.value.translate(clockDomR.value, clockDomR.value);
ctxBack.value.rotate(minutes * 6 * Math.PI / 180);
ctxBack.value.beginPath();
ctxBack.value.strokeStyle = props.minColor;
ctxBack.value.lineWidth = 1;
ctxBack.value.lineJoin = "bevel";
ctxBack.value.miterLimit = 10;
ctxBack.value.moveTo(0, 20);
ctxBack.value.lineTo(3, -(clockDomR.value - 110));
ctxBack.value.lineTo(10, -(clockDomR.value - 120));
ctxBack.value.lineTo(0, -(clockDomR.value - 85));
ctxBack.value.lineTo(-10, -(clockDomR.value - 120));
ctxBack.value.lineTo(-3, -(clockDomR.value - 110));
ctxBack.value.lineTo(0, 20);
ctxBack.value.stroke();
ctxBack.value.closePath();
ctxBack.value.restore();
};
const drawHouPin = () => {
ctxBack.value.save();
ctxBack.value.translate(clockDomR.value, clockDomR.value);
ctxBack.value.rotate(hour * 30 * Math.PI / 180);
ctxBack.value.beginPath();
ctxBack.value.strokeStyle = props.houColor;
ctxBack.value.lineWidth = 1;
ctxBack.value.lineJoin = "bevel";
ctxBack.value.miterLimit = 10;
ctxBack.value.moveTo(0, 20);
ctxBack.value.lineTo(3, -(clockDomR.value - 150));
ctxBack.value.lineTo(10, -(clockDomR.value - 160));
ctxBack.value.lineTo(0, -(clockDomR.value - 110));
ctxBack.value.lineTo(-10, -(clockDomR.value - 160));
ctxBack.value.lineTo(-3, -(clockDomR.value - 150));
ctxBack.value.lineTo(0, 20);
ctxBack.value.stroke();
ctxBack.value.closePath();
ctxBack.value.restore();
};
const setPoint = () => {
ctxBack.value.beginPath();
ctxBack.value.arc(clockDomR.value, clockDomR.value, 3, 0, 2 * Math.PI);
ctxBack.value.stroke();
};
const showBack = () => {
for (var i = 0; i < 60; i++) {
ctxBack.value.save();
ctxBack.value.translate(clockDomR.value, clockDomR.value);
ctxBack.value.rotate(i / 60 * 2 * Math.PI);
ctxBack.value.beginPath();
ctxBack.value.strokeStyle = props.scaleColor;
ctxBack.value.moveTo(0, -clockDomR.value);
ctxBack.value.lineWidth = i % 5 == 0 ? 5 : 2;
ctxBack.value.lineTo(0, -(clockDomR.value - 20));
ctxBack.value.stroke();
ctxBack.value.closePath();
ctxBack.value.restore();
}
ctxBack.value.beginPath();
ctxBack.value.arc(clockDomR.value, clockDomR.value, 0, 0, 2 * Math.PI);
ctxBack.value.stroke();
};
const degToRad = (degree) => {
var result;
var factor = Math.PI / 180;
if (degree == 0) {
result = 270 * factor;
} else {
result = degree * factor;
}
return result;
};
const showTime = () => {
var now = new Date();
var today = now.toLocaleDateString();
var time = now.toLocaleTimeString();
var day = now.getDay();
var hrs = now.getHours();
var min = now.getMinutes();
var sec = now.getSeconds();
var mil = now.getMilliseconds();
var smoothsec = sec + mil / 1e3;
var smoothmin = min + smoothsec / 60;
var hours = hrs + smoothmin / 60;
milliseconds = smoothsec;
minutes = smoothmin;
hour = hours;
switch (day) {
case 1:
date = "\u4E00";
break;
case 2:
date = "\u4E8C";
break;
case 3:
date = "\u4E09";
break;
case 4:
date = "\u56DB";
break;
case 5:
date = "\u4E94";
break;
case 6:
date = "\u516D";
break;
case 0:
date = "\u65E5";
break;
}
var gradient = ctx.value.createRadialGradient(
clockDomR.value,
clockDomR.value,
5,
clockDomR.value,
clockDomR.value,
300
);
gradient.addColorStop(0, props.gradientColor1);
gradient.addColorStop(1, props.gradientColor2);
ctx.value.fillStyle = gradient;
ctx.value.fillRect(0, 0, clockDomW.value, clockDomW.value);
ctx.value.beginPath();
ctx.value.strokeStyle = props.houCircleColor;
ctx.value.arc(
clockDomR.value,
clockDomR.value,
clockDomR.value - 35,
degToRad(0),
degToRad(hours * 30 - 90)
);
ctx.value.stroke();
ctx.value.beginPath();
ctx.value.strokeStyle = props.minCircleColor;
ctx.value.arc(
clockDomR.value,
clockDomR.value,
clockDomR.value - 30,
degToRad(0),
degToRad(smoothmin * 6 - 90)
);
ctx.value.stroke();
ctx.value.beginPath();
ctx.value.strokeStyle = props.secCircleColor;
ctx.value.arc(
clockDomR.value,
clockDomR.value,
clockDomR.value - 25,
degToRad(0),
degToRad(smoothsec * 6 - 90)
);
ctx.value.stroke();
ctx.value.beginPath();
if (props.isDate) {
ctx.value.font = `${props.dateSize}px Helvetica Bold`;
ctx.value.fillStyle = props.dateColor;
ctx.value.textAlign = "center";
ctx.value.fillText(today + "/\u661F\u671F" + date, clockDomR.value, clockDomR.value - 20);
ctx.value.font = `${props.dateSize - 2}px Helvetica Bold`;
ctx.value.fillStyle = props.dateColor;
ctx.value.textAlign = "center";
ctx.value.fillText(time, clockDomR.value, clockDomR.value + 30);
ctx.value.beginPath();
}
ctx.value.arc(clockDomR.value, clockDomR.value, clockDomR.value, 0, 2 * Math.PI);
ctx.value.strokeStyle = props.scaleColor;
ctx.value.stroke();
};
const RESET_VIEW = () => {
if (ctx.value) {
ctx.value.clearRect(0, 0, clockDomW.value, clockDomW.value);
ctxBack.value.clearRect(0, 0, clockDomW.value, clockDomW.value);
numBack.value.clearRect(0, 0, clockDomW.value, clockDomW.value);
clearInterval(timeInterval.value);
init();
}
};
watch(
() => props,
() => {
if (ctx.value) {
ctx.value.clearRect(0, 0, clockDomW.value, clockDomW.value);
ctxBack.value.clearRect(0, 0, clockDomW.value, clockDomW.value);
numBack.value.clearRect(0, 0, clockDomW.value, clockDomW.value);
}
clearInterval(timeInterval.value);
init();
},
{ deep: true }
);
onMounted(() => {
init();
});
onUnmounted(() => {
clearInterval(timeInterval.value);
});
return {
clockDom,
canvas,
RESET_VIEW,
...toRefs(props)
};
}
});
const _hoisted_1 = {
ref: "canvas",
id: "canvas",
width: "500",
height: "500"
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("div", {
class: "co-clock-std",
style: normalizeStyle({ width: _ctx.width || "100%", height: _ctx.height || "100%" }),
ref: "clockDom"
}, [
createElementVNode("canvas", _hoisted_1, null, 512)
], 4);
}
var CoClockStd = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-73308118"]]);
export { CoClockStd as default };