vue3-scale-ruler/lib/hooks/useCanvas.js

"use strict";const r=require("vue");class u{constructor(i,e,s=!0){this.option={width:0,height:0,scale:1,ratio:window.devicePixelRatio||1,startX:0,startY:0,thick:20,step:50,longLineColor:"red",shortLineColor:"#fff",fontColor:"#fff"},this.h=!0,this.longLineColor="red",this.shortLineColor="#fff",this.fontColor="#fff",this.step=50,this.domId="",this.start=r.ref(0),this.end=r.ref(0),this.h=s,this.domId=e,this.option=Object.assign(this.option,i),this.otherInit(),this.init()}get canvasRef(){return this.mainRef.querySelector("canvas")}get mainRef(){return document.getElementById(this.domId)}get width(){var i;return(i=this.mainRect)==null?void 0:i.width}get height(){var i;return(i=this.mainRect)==null?void 0:i.height}get _start(){return this.h?this.option.startX:this.option.startY}get _endX(){return this.option.startX+(this.width-this.option.thick)/this.option.scale}get _endY(){return this.option.startY+(this.height-this.option.thick)/this.option.scale}get _end(){return this.h?this._endX:this._endY}otherInit(){var i,e,s;this.step=this.option.step||this.step,this.longLineColor=((i=this.option)==null?void 0:i.longLineColor)||"red",this.shortLineColor=((e=this.option)==null?void 0:e.shortLineColor)||"#fff",this.fontColor=((s=this.option)==null?void 0:s.fontColor)||"#fff"}init(){this.onMounted(),this.onUnmounted()}onMounted(){r.onMounted(()=>{this.initSceen(),window.addEventListener("resize",this.resize.bind(this))})}resize(){r.nextTick(()=>{this.initSceen()})}initSceen(){var i;if(this.mainRef){this.mainRect=(i=this.mainRef)==null?void 0:i.getBoundingClientRect();const e=((this.h?this.width:this.height)-this.option.thick)*this.option.ratio,s=this.option.thick*this.option.ratio;this.canvasRef.width=this.h?e:s,this.canvasRef.height=this.h?s:e,this.canvasCtx=this.canvasRef.getContext("2d"),this.drawRuler()}}onUnmounted(){r.onUnmounted(()=>{})}getStepByScale(){const i=[1,2,5,10,25,50,100,250,500,1e3,2500,5e3],e=50/this.option.scale;for(let s=0,o=i.length;s<o;s++)if(i[s]>=e)return i[s];return i[0]}getClosestVal(i,e,s){const o=Math[s](i/e),t=e*o,n=e*(o+1);return i-t<=n-i?t:n}calcDrawParams(){this.step=this.getStepByScale(),this.start.value=this._start,this.end.value=this._end;const i=this.getClosestVal(this.start.value,this.step,"floor"),e=this.getClosestVal(this.end.value,this.step,"ceil");return{start:i,end:e}}drawRuler(){const i=this.calcDrawParams(),e=i.end,s=this.h;let o=i.start;const t=this.canvasCtx;t.clearRect(0,0,t.canvas.width,t.canvas.height),t.textAlign="center",t.lineWidth=1.5;let n=this.step/10;for(n<3&&(n=this.step/3,n=this.step/n),t.strokeStyle=this.shortLineColor,t.fillStyle=this.fontColor;o<=e;){const h=(o-this._start)*this.option.scale;t.beginPath(),t.save(),t.strokeStyle=this.longLineColor,t.scale(this.option.ratio,this.option.ratio),t.moveTo(s?h:0,s?0:h),t.lineTo(s?h:10,s?10:h),t.stroke(),t.restore(),t.closePath();for(let l=1;l<10;l++){const a=h-l*n*this.option.scale;t.beginPath(),t.save(),t.scale(this.option.ratio,this.option.ratio),t.moveTo(s?a:0,s?0:a),t.lineTo(s?a:5,s?5:a),t.stroke(),t.restore(),t.closePath()}t.save(),t.scale(this.option.ratio,this.option.ratio);const f=t.measureText(String(o)).width,d=this.option.thick-2,p=h+f/2;t.font="10px Arial",s?t.fillText(String(o),p,d):(t.translate(d,p),t.rotate(-Math.PI/2),t.fillText(String(o),0,0)),t.restore(),o+=this.step}}draw(i){this.option=Object.assign(this.option,i),this.otherInit(),this.drawRuler()}}const g=(c,i,e)=>new u(c,i,e);module.exports=g;