2 lines
16 KiB
JavaScript
Executable File
2 lines
16 KiB
JavaScript
Executable File
import{I as t,o as e,c as o,w as i,a as s,q as r,u as l,F as a,J as c,i as n,x as d,d as h,E as x,H as C,h as w,j as g,k as u,l as y,m as f,p as b,t as p,v as B,K as k,y as m,z as E,A as v}from"./index-fea56fdb.js";import{N as X}from"./index.5516e273.js";import{_ as Y}from"./_plugin-vue_export-helper.1b428a4d.js";/* empty css */const D=Y({name:"canvas",components:{color:Y(t({props:{colorShow:{type:Boolean,default:()=>!1}},data:()=>({colorArr:[{color:"#7f2a3f",index:"01"},{color:"#e24187",index:"03"},{color:"#f5305d",index:"04"},{color:"#de4156",index:"05"},{color:"#fe42cd",index:"06"},{color:"#f48b9a",index:"07"},{color:"#ec8191",index:"08"},{color:"#f9aeb5",index:"09"},{color:"#f21d5f",index:"10"},{color:"#cc3739",index:"11"},{color:"#dd5047",index:"12"},{color:"#e24187",index:"13"},{color:"#fa6449",index:"14"},{color:"#e8495b",index:"15"},{color:"#fb7162",index:"16"},{color:"#f6afd1",index:"17"},{color:"#fbb6b9",index:"18"},{color:"#db6f27",index:"21"},{color:"#ed702e",index:"22"},{color:"#f99627",index:"23"},{color:"#eb8926",index:"24"},{color:"#edc3aa",index:"25"},{color:"#e1d8cf",index:"26"},{color:"#deebc5",index:"27"},{color:"#fccdc7",index:"28"},{color:"#dbbdd2",index:"29"},{color:"#e8a321",index:"31"},{color:"#db6f27",index:"32"},{color:"#edb74b",index:"33"},{color:"#e8b741",index:"34"},{color:"#fef052",index:"35"},{color:"#ffd684",index:"36"},{color:"#e2d958",index:"37"},{color:"#e2e5d0",index:"38"},{color:"#ba9431",index:"41"},{color:"#797f5d",index:"42"},{color:"#536d50",index:"43"},{color:"#d8b53f",index:"44"},{color:"#d4c172",index:"45"},{color:"#32b75c",index:"46"},{color:"#90D15B",index:"47"},{color:"#c5d52a",index:"48"},{color:"#e8e098",index:"49"},{color:"#1b6661",index:"50"},{color:"#3b4f4d",index:"51"},{color:"#336559",index:"52"},{color:"#01776e",index:"53"},{color:"#2e7662",index:"54"},{color:"#439877",index:"55"},{color:"#0ba066",index:"56"},{color:"#318488",index:"57"},{color:"#6fd3c9",index:"58"},{color:"#b9d3ac",index:"59"},{color:"#0e898e",index:"61"},{color:"#317194",index:"62"},{color:"#029bc7",index:"63"},{color:"#2a8ec9",index:"64"},{color:"#57c9d3",index:"65"},{color:"#65b3df",index:"67"},{color:"#8bd0d7",index:"68"},{color:"#4B4881",index:"69"},{color:"#77A1CB",index:"70"},{color:"#3051BB",index:"71"},{color:"#2E41A7",index:"72"},{color:"#704CAE",index:"73"},{color:"#385BD1",index:"74"},{color:"#E0DFED",index:"75"},{color:"#A6BDE9",index:"76"},{color:"#B3B9DD",index:"77"},{color:"#7942A8",index:"81"},{color:"#8F52BA",index:"82"},{color:"#9680C0",index:"83"},{color:"#CD82BB",index:"84"},{color:"#8E2A80",index:"85"},{color:"#E24CB0",index:"86"},{color:"#CC2A75",index:"87"},{color:"#ED89D2",index:"88"},{color:"#F562B6",index:"89"},{color:"#8B3B32",index:"91"},{color:"#593A35",index:"92"},{color:"#7A3C2D",index:"93"},{color:"#7D2E21",index:"94"},{color:"#935A47",index:"95"},{color:"#A05047",index:"96"},{color:"#E39476",index:"97"},{color:"#4E3F3C",index:"98"},{color:"#5A4939",index:"99"},{color:"#EDE8EC",index:"100"},{color:"#C0813A",index:"101"},{color:"#77432E",index:"102"},{color:"#C17748",index:"103"},{color:"#C7AC39",index:"104"},{color:"#DBA179",index:"107"},{color:"#D8D3D0",index:"109"},{color:"#091A22",index:"120"},{color:"#CA3A32",index:"121"},{color:"#FAAB60",index:"122"},{color:"#CADEAD",index:"123"},{color:"#C7D858",index:"124"},{color:"#F264D0",index:"125"},{color:"#F77ADC",index:"126"},{color:"#FAE7D9",index:"131"},{color:"#E6D9D1",index:"132"},{color:"#EBCDB1",index:"133"},{color:"#E2DCCC",index:"134"},{color:"#FAD9D2",index:"135"},{color:"#E1C2BD",index:"136"},{color:"#E5BBCF",index:"137"},{color:"#F7BACC",index:"138"},{color:"#E9CBC1",index:"139"},{color:"#EBB89F",index:"140"},{color:"#E6D09E",index:"141"},{color:"#E2B78D",index:"142"},{color:"#D1E4EB",index:"143"},{color:"#B9D9EE",index:"144"},{color:"#CFD0E2",index:"145"},{color:"#CECFF0",index:"146"},{color:"#D6C3E3",index:"147"},{color:"#E3F0C5",index:"163"},{color:"#DAD792",index:"164"},{color:"#D4D4BC",index:"166"},{color:"#C0D0AB",index:"167"},{color:"#D7C6A8",index:"169"},{color:"#D9E9E8",index:"171"},{color:"#B4E0C7",index:"172"},{color:"#D6E2BA",index:"173"},{color:"#E3E5D0",index:"174"},{color:"#C1D39A",index:"175"},{color:"#AFE4E6",index:"178"},{color:"#92DDE2",index:"179"},{color:"#DBE0E6",index:"182"},{color:"#8FBFF0",index:"183"},{color:"#9DCDE1",index:"185"},{color:"#BBC4BF",index:"196"},{color:"#E484A9",index:"198"},{color:"#BBC4BF",index:"GG3"},{color:"#494A4C",index:"CG9"},{color:"#C2CEDA",index:"BG1"},{color:"#C1C3D3",index:"BG3"},{color:"#8696A3",index:"BG5"},{color:"#646A76",index:"BG7"},{color:"#415361",index:"BG9"},{color:"#DFDEE3",index:"WG.5"},{color:"#CBC6CC",index:"WG1"},{color:"#B6B0B2",index:"WG2"},{color:"#C5BBBA",index:"WG3"},{color:"#958A92",index:"WG4"},{color:"#837477",index:"WG5"},{color:"#8A7E7E",index:"WG6"},{color:"#4D4342",index:"WG9"}]}),methods:{colorPickAction(t){this.$emit("colorPickTap",t)}}}),[["render",function(t,w,g,u,y,f){const b=C,p=n;return e(),o(p,{class:c(["color",{"color-show":t.colorShow}])},{default:i((()=>[s(p,{class:"color-section"},{default:i((()=>[(e(!0),r(a,null,l(t.colorArr,((r,l)=>(e(),o(p,{onClick:e=>t.colorPickAction(r),style:d({backgroundColor:r.color}),key:l,class:"color-item"},{default:i((()=>[s(b,{class:"color-title"},{default:i((()=>[h(x(r.index),1)])),_:2},1024)])),_:2},1032,["onClick","style"])))),128))])),_:1})])),_:1},8,["class"])}],["__scopeId","data-v-1db48067"]]),NavBar:X},data:()=>({colorShow:!1,drawContext:null,historyList:[],startX:0,startY:0,lastX:0,lastY:0,mode:"pen",currentColor:"#000",bgColor:"#fff",lineWidth:4,lastRect:{},lastCircle:{},tools:[{title:"清空",key:"clear",url:"../../static/img/color.png",activeUrl:"../../static/img/color.png"},{title:"橡皮",key:"eraser",url:"../../static/img/eraser.png"},{title:"颜色",key:"color",url:"../../static/img/color.png"},{title:"画笔",key:"pen",url:"../../static/img/pen.png"}],toolsShow:!0,isLandScape:!1,aspectRatio:1}),props:{showSave:{type:Boolean,default:!0},drawImage:{type:String,default:""},saveImageType:{type:String,default:"1"},isUnderBkg:{type:Boolean,default:!1}},mounted(t){this.drawContext=w("drawCanvas",this),this.initBoard()},methods:{colorShowHandel(){this.colorShow=!this.colorShow},chooseTools(t){console.log(t),this.isEraserActive=!1,this.colorShow=!1,"back"!=t.key?"clear"!=t.key?("pen"==t.key&&(console.log("asdasdadsadasda"),this.currentColor="#000",this.drawContext.strokeStyle=this.currentColor),"eraser"==t.key&&(this.drawContext.strokeStyle=this.bgColor,this.isEraserActive=!0),"color"==t.key&&this.colorShowHandel(),"download"!=t.key?(this.mode=t.key,this.tools.forEach(((e,o)=>{e.active=!1,t.key==e.key&&(e.active=!0)}))):this.downloadHandle()):this.clearBoard():this.backHandle()},showTools(){this.toolsShow=!this.toolsShow},penWidthChange(t){this.lineWidth=t.detail.value,this.drawContext.setLineWidth(this.lineWidth)},penBegin(t,e){this.begin=!0,this.drawContext.beginPath(),this.startX=t,this.startY=e,this.drawContext.moveTo(this.startX,this.startY),this.drawPen(t,e)},drawPen(t,e){this.drawContext.moveTo(this.startX,this.startY),this.drawContext.lineTo(t,e),this.drawContext.stroke(),this.startX=t,this.startY=e},lineBegin(t,e){this.begin=!0,this.startX=t,this.startY=e},lineDraw(t,e){this.drawContext.beginPath(),this.drawContext.moveTo(this.startX,this.startY),this.drawContext.lineTo(t,e),this.drawContext.stroke(),this.drawContext.draw(!0)},lineEnd(){this.drawContext.closePath(),this.begin=!1},rectFillBegin(t,e){this.begin=!0,this.drawContext.beginPath(),this.startX=t,this.startY=e},rectBegin(t,e){this.begin=!0,this.drawContext.beginPath(),this.startX=t,this.startY=e},circleFillBegin(t,e){this.begin=!0,this.drawContext.beginPath(),this.startX=t,this.startY=e},circleBegin(t,e){this.begin=!0,this.drawContext.beginPath(),this.startX=t,this.startY=e},drawRectFill(t,e,o=!0){let i=t-this.startX?t-this.startX:this.startX-t,s=e-this.startY?e-this.startY:this.startY-e;this.drawContext.rect(this.startX,this.startY,i,s),this.drawContext.setFillStyle(this.currentColor),this.drawContext.fill(),this.draw(o)},drawRect(t,e,o=!0){let i={};i.X=this.startX<=t?this.startX:t,i.Y=this.startY<=e?this.startY:e,this.startX>=t&&this.startX,this.startY>=e&&this.startY,i.Y,i.X;let s=t-this.startX?t-this.startX:this.startX-t,r=e-this.startY?e-this.startY:this.startY-e;this.drawContext.rect(this.startX,this.startY,s,r),this.drawContext.setStrokeStyle(this.currentColor),this.drawContext.stroke(),this.draw(o),this.lastRect={x:this.startX,y:this.startY,width:Math.abs(s),height:Math.abs(r),pointLT:i},this.clearLastRect()},clearLastRect(){this.drawContext.clearRect(this.lastRect.pointLT.X+this.lineWidth/2,this.lastRect.pointLT.Y+this.lineWidth/2,this.lastRect.width-this.lineWidth,this.lastRect.height-this.lineWidth)},clearLastCircle(t,e,o,i){var s=1;!function t(e,o,r){var l=r-s,a=Math.sqrt(r*r-l*l),c=e-l,n=o-a,d=2*l,h=2*a;s<=r&&(i.clearRect(c,n,d,h),s+=1,t(e,o,r))}(t,e,o)},drawCircleFill(t,e,o=!0){let i={},s={},r={};i.X=this.startX<=t?this.startX:t,i.Y=this.startY<=e?this.startY:e,s.X=this.startX>=t?this.startX:t,s.Y=this.startY>=e?this.startY:e,r.X=(s.X+i.X)/2,r.Y=(s.Y+i.Y)/2;let l=s.X-i.X,a=s.Y-i.Y,c=Math.sqrt(l*l+a*a)/2;this.drawContext.arc(r.X,r.Y,c,0,2*Math.PI),this.drawContext.setFillStyle(this.currentColor),this.drawContext.fill(),this.draw(o)},drawCircle(t,e,o=!0){let i={},s={},r={};i.X=this.startX<=t?this.startX:t,i.Y=this.startY<=e?this.startY:e,s.X=this.startX>=t?this.startX:t,s.Y=this.startY>=e?this.startY:e,r.X=(s.X+i.X)/2,r.Y=(s.Y+i.Y)/2;let l=s.X-i.X,a=s.Y-i.Y,c=Math.sqrt(l*l+a*a)/2;this.drawContext.arc(r.X,r.Y,c,0,2*Math.PI),this.drawContext.stroke(),this.drawContext.beginPath(),this.drawContext.arc(r.X,r.Y,c-this.lineWidth/2,0,2*Math.PI),this.drawContext.setFillStyle(this.bgColor),this.drawContext.fill(),this.draw(o),this.clearLastCircle(r.X,r.Y,c-this.lineWidth/2,this.drawContext)},touchStart(t){let{x:e,y:o}=t.touches[0];switch(console.log("开始touch"),this.mode){case"pen":case"eraser":this.penBegin(e,o);break;case"line":this.lineBegin(e,o);break;case"rect":this.rectBegin(e,o);break;case"circle":this.circleBegin(e,o);break;case"rect-fill":this.rectFillBegin(e,o);break;case"circle-fill":this.circleFillBegin(e,o)}this.historyList.push({style:{color:this.currentColor,width:this.lineWidth},coordinates:[{type:t.type,mode:this.mode,x:t.touches[0].x,y:t.touches[0].y}]})},touchMove(t){let{x:e,y:o}=t.touches[0];switch(this.lastX=e,this.lastY=o,console.log("touch移动"),this.mode){case"pen":case"eraser":this.drawPen(e,o),this.draw(!0);break;case"line":return void this.draw(!0);case"rect":this.drawRect(e,o);break;case"circle":this.drawCircle(e,o);break;case"rect-fill":this.drawRectFill(e,o);break;case"circle-fill":this.drawCircleFill(e,o)}this.historyList[this.historyList.length-1].coordinates.push({type:t.type,mode:this.mode,x:e,y:o})},touchEnd(t){let{x:e,y:o}=t.changedTouches[0];switch(console.log("touch结束"),this.mode){case"pen":this.lineEnd();break;case"eraser":this.drawContext.setFillStyle(this.currentColor),this.lineEnd();break;case"line":this.historyList[this.historyList.length-1].coordinates.push({type:t.type,mode:this.mode,x:e,y:o}),this.lineDraw(e,o),this.lineEnd();break;case"rect":this.drawRect(e,o,!0);break;case"circle":this.drawCircle(e,o);break;case"rect-fill":this.drawRectFill(e,o);break;case"circle-fill":this.drawCircleFill(e,o)}},backHandle(){this.drawContext.draw(),this.historyList.pop(),this.drawHistory()},drawHistory(){this.historyList.forEach(((t,e)=>{this.drawContext.beginPath(),this.drawContext.setLineCap("round"),this.drawContext.setStrokeStyle(t.style.color),this.drawContext.setLineWidth(t.style.width),t.coordinates.forEach((t=>{"touchstart"==t.type?this.switchModeToLine(t.mode,1,t.x,t.y):this.switchModeToLine(t.mode,2,t.x,t.y)})),this.drawContext.stroke()})),this.drawContext.draw(!0)},switchModeToLine(t,e,o,i){this.drawContext.setFillStyle(this.currentColor),"pen"==t?"1"==e?this.drawContext.moveTo(o,i):this.drawContext.lineTo(o,i):"eraser"==t?(this.drawContext.setFillStyle(this.bgColor),"1"==e?(this.startX=o,this.startY=i):this.lineDraw(o,i,!0)):"line"==t?"1"==e?(this.startX=o,this.startY=i):this.lineDraw(o,i,!0):"rect"==t?"1"==e?(this.startX=o,this.startY=i):this.drawRect(o,i,!0):"circle"==t?"1"==e?(this.startX=o,this.startY=i):this.drawCircle(o,i,!0):"rect-fill"==t?"1"==e?(this.startX=o,this.startY=i):this.drawRectFill(o,i,!0):"circle-fill"==t&&("1"==e?(this.startX=o,this.startY=i):this.drawCircleFill(o,i,!0))},colorPickTapHandler(t){console.log("我点击的颜色:"+JSON.stringify(t)),this.colorShow=!1,this.tools.forEach((t=>{t.active=!1,"pen"===t.key&&(this.mode="pen",t.active=!0)})),this.currentColor=t.color,this.drawContext.strokeStyle=t.color},downloadHandle(){let t=this;1!=this.saveImageType&&3!=this.saveImageType||this.saveImage(),2!=this.saveImageType&&3!=this.saveImageType||g({canvasId:"drawCanvas",success:function(e){console.log("回调参数:"+JSON.stringify(e)),u({filePath:e.tempFilePath,success:function(e){console.log("成功回调参数:"+JSON.stringify(e)),t.$emit("dowmloadSuc",JSON.stringify(e))},fail:function(e){console.log("失败回调参数:"+JSON.stringify(e)),t.$emit("dowmloadErr",JSON.stringify(e))}})}},this)},saveImage(){let t=this;this.isUnderBkg?t.saveImageUrl():g({canvasId:"drawCanvas",success:function(e){console.log(e),t.$emit("saveImage",e.tempFilePath)}},this)},saveImageUrl(){const t=y().in(this);let e=this;t.select(".canvas-box").boundingClientRect((t=>{this.drawContext.setFillStyle(this.bgColor),this.drawContext.fillRect(0,0,t.width,t.height),this.drawContext.fill(),this.drawContext.drawImage(this.drawImage,0,0,t.width,t.height),this.drawContext.draw(),this.drawHistory(),g({canvasId:"drawCanvas",success:function(t){e.$emit("saveImage",t.tempFilePath)}},this)})).exec()},fillBackground(){y().in(this).select(".canvas-box").boundingClientRect((t=>{this.drawContext.setFillStyle(this.bgColor),this.drawContext.fillRect(0,0,t.width,t.height),this.drawContext.fill(),this.drawImage&&!this.isUnderBkg&&this.drawContext.drawImage(this.drawImage,0,0,t.width,t.height),this.drawContext.draw()})).exec()},draw(t=!1,e){this.drawContext.draw(t,(()=>{e&&"function"==typeof e&&e()}))},setBoardMode(t){this.tools.forEach((e=>{e.active=!1,e.key==t&&(e.active=!0,this.mode=t)}))},clearBoard(){this.historyList=[],this.drawContext.draw()},async initBoard(){const t=f();t.screenWidth>t.screenHeight?this.isLandScape=!0:this.isLandScape=!1,console.log(this.isLandScape);let e=(await b({src:this.drawImage}))[1]||{};console.log(e),this.aspectRatio=e.width/e.height,this.isUnderBkg?this.bgColor="rgba(0,0,0,0)":this.bgColor="rgb(255,255,255)",this.drawContext.setLineCap("round"),this.drawContext.strokeStyle=this.currentColor,this.drawContext.setLineWidth(this.lineWidth),this.$nextTick((()=>{this.fillBackground()}))}}},[["render",function(t,c,w,g,u,y){const f=p("NavBar"),b=n,X=k,Y=v,D=m,S=C,A=E,F=p("color");return e(),r(a,null,[s(f,{background:"#11182b"}),s(b,{class:"content"},{default:i((()=>[s(b,{class:"pen-box"},{default:i((()=>[s(b,{class:"pen",style:d({backgroundColor:u.currentColor,height:u.lineWidth+"px"})},null,8,["style"]),s(X,{min:"1",max:"20",value:u.lineWidth,"block-size":"20",activeColor:"#84f876",class:"pen-slider",onChange:y.penWidthChange},null,8,["value","onChange"]),s(b,{class:"pen-txt"},{default:i((()=>[h(x(u.lineWidth)+"px",1)])),_:1})])),_:1}),u.toolsShow?(e(),o(b,{key:0,class:"tools-box"},{default:i((()=>[s(b,{class:"tools"},{default:i((()=>[(e(!0),r(a,null,l(u.tools,((t,r)=>(e(),o(b,{class:"tools-item",key:r},{default:i((()=>["share"==t.key?(e(),o(D,{key:0,"open-type":"share",style:{"background-color":"rgba(0,0,0,0)",padding:"0","border-radius":"none","line-height":"0","border-color":"rgba(0,0,0,0)"}},{default:i((()=>[s(Y,{class:"tools-icon",src:t.active?t.activeUrl:t.url,mode:"aspectFit"},null,8,["src"])])),_:2},1024)):(e(),o(Y,{key:1,onClick:e=>y.chooseTools(t),src:t.active?t.activeUrl:t.url,class:"tools-icon"},null,8,["onClick","src"])),s(S,null,{default:i((()=>[h(x(t.title),1)])),_:2},1024)])),_:2},1024)))),128))])),_:1})])),_:1})):B("",!0),s(b,{class:"canvas-box",style:d({aspectRatio:u.aspectRatio})},{default:i((()=>[s(A,{class:"board-canvas","canvas-id":"drawCanvas","disable-scroll":"true",onTouchstart:y.touchStart,onTouchmove:y.touchMove,onTouchend:y.touchEnd},null,8,["onTouchstart","onTouchmove","onTouchend"])])),_:1},8,["style"]),s(F,{colorShow:u.colorShow,onColorPickTap:y.colorPickTapHandler},null,8,["colorShow","onColorPickTap"]),w.showSave?(e(),o(b,{key:1,class:"btn-box"},{default:i((()=>[s(D,{type:"primary",onClick:y.saveImage},{default:i((()=>[h("保存")])),_:1},8,["onClick"])])),_:1})):B("",!0)])),_:1})],64)}],["__scopeId","data-v-51e76c4d"]]);export{D as default};
|