From f9c972846dfdaca529cb08630739cbb3975185ea Mon Sep 17 00:00:00 2001 From: Airnan Date: Sun, 14 Apr 2024 19:27:44 +0800 Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E7=94=BB=E7=AC=94=E7=B2=97?= =?UTF-8?q?=E7=BB=86=E3=80=81=E6=A9=A1=E7=9A=AE=E7=B2=97=E7=BB=86=E3=80=81?= =?UTF-8?q?=E7=94=BB=E7=AC=94=E9=A2=9C=E8=89=B2=E8=B0=83=E8=8A=82=E3=80=81?= =?UTF-8?q?=E6=B8=85=E7=A9=BA=E7=94=BB=E5=B8=83=E5=8A=9F=E8=83=BD=EF=BC=8C?= =?UTF-8?q?=E5=8F=AF=E8=83=BD=E5=AD=98=E5=9C=A8=E9=80=BB=E8=BE=91=E4=B8=8A?= =?UTF-8?q?=E7=9A=84=E4=B8=8D=E5=90=88=E7=90=86=EF=BC=8C=E5=90=8E=E7=BB=AD?= =?UTF-8?q?=E5=86=8D=E5=AE=8C=E5=96=84=E7=BB=86=E8=8A=82?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/main/java/cn/airnan/dg/entity/Room.java | 2 +- src/main/resources/static/css/game.css | 151 +++++++++++------- src/main/resources/static/css/main.css | 15 ++ src/main/resources/static/icon/iconfont.ttf | Bin 0 -> 3172 bytes src/main/resources/static/icon/iconfont.woff | Bin 0 -> 2224 bytes src/main/resources/static/icon/iconfont.woff2 | Bin 0 -> 1712 bytes src/main/resources/static/index.html | 94 +++++++---- src/main/resources/static/js/draw.js | 136 +++++++++++++++- 8 files changed, 302 insertions(+), 96 deletions(-) create mode 100644 src/main/resources/static/icon/iconfont.ttf create mode 100644 src/main/resources/static/icon/iconfont.woff create mode 100644 src/main/resources/static/icon/iconfont.woff2 diff --git a/src/main/java/cn/airnan/dg/entity/Room.java b/src/main/java/cn/airnan/dg/entity/Room.java index f27402a..71dfee7 100644 --- a/src/main/java/cn/airnan/dg/entity/Room.java +++ b/src/main/java/cn/airnan/dg/entity/Room.java @@ -86,7 +86,7 @@ public class Room { * @param playerId 发送者的ID（用于排除发送者） */ public void sendMessage(String type, String playerId, String message) { - if (type.equals(Global.MSG_TYPE_ROOM_DRAW)) { + if (type.startsWith(Global.MSG_TYPE_ROOM_DRAW)) { log.info("【绘画房间消息】{}: {}", id, message); for (Player player : players) { // 向除自己之外的玩家发送消息 diff --git a/src/main/resources/static/css/game.css b/src/main/resources/static/css/game.css index 624f871..93b3978 100644 --- a/src/main/resources/static/css/game.css +++ b/src/main/resources/static/css/game.css @@ -1,90 +1,123 @@ #game-top-box { - width: 100%; - display: flex; - justify-content: space-between; + width: 100%; + display: flex; + justify-content: space-between; } #draw-box { - width: 350px; - margin: 0 auto; - min-height: 350px; - box-sizing: border-box; - border: #000000 solid 1px; - border-radius: 15px; - background-color: #daeefd; + width: 350px; + margin: 0 auto; + min-height: 350px; + box-sizing: border-box; + border: #000000 solid 1px; + border-radius: 15px; + background-color: #daeefd; } #topic-bar { - width: 350px; - height: 30px; - line-height: 30px; - display: flex; - justify-content: space-between; - font-size: 0.8em; + width: 350px; + height: 30px; + line-height: 30px; + display: flex; + justify-content: space-between; + font-size: 0.8em; } #topic-bar > div { - flex: 1; + flex: 1; } #board { - width: 300px; - height: 300px; - background-color: #ffffff; - box-shadow: #000000 0 0 1px; - border-radius: 10px; - touch-action: none; + width: 300px; + height: 300px; + background-color: #ffffff; + box-shadow: #000000 0 0 1px; + border-radius: 10px; + touch-action: none; +} + +.control-btn { + box-sizing: border-box; + width: 30px; + height: 30px; + font-size: 1.2em; + background-color: transparent; + border: none; + border-radius: 30px; +} + +.select-box { + display: flex; + align-items:center; + justify-content: space-around; + width: 100%; + height: 80px; + box-sizing: border-box; + padding: 15px; + text-align: left; } .color-btn { - width: 20px; - height: 20px; - padding: 0; - background-color: #ffffff; - border-radius: 20px; - border: 2px solid white; + width: 30px; + height: 30px; + padding: 0; + background-color: #ffffff; + border-radius: 30px; + border: 4px solid transparent; + box-shadow: #00000033 0 0 10px; } +.width-btn,.eraser-btn { + box-sizing: content-box; + width: 12px; + height: 12px; + padding: 0; + border-radius: 24px; + background-color: #444444; + border: 4px solid #444444; + box-shadow: #00000033 0 0 10px; +} #player-box { - display: flex; - justify-content: center; - width: 100%; + display: flex; + justify-content: center; + width: 100%; } .player-item { - box-sizing: border-box; - width: 30px; - height: 30px; - line-height: 30px; - border-radius: 4px; - font-size: 1.4em; - color: coral; - background-color: #ffffff; - box-shadow: #00000022 0 0 5px; - margin: 5px 10px; + box-sizing: border-box; + width: 30px; + height: 30px; + line-height: 30px; + border-radius: 4px; + font-size: 1.4em; + color: coral; + background-color: #ffffff; + box-shadow: #00000022 0 0 5px; + margin: 5px 10px; } #chat-box { - width: calc(100vw - 20px); - height: calc(100vh - 540px); - box-sizing: border-box; - padding: 10px; - margin: auto; - border-radius: 10px; - background-color: #00000022; - box-shadow: #000000 0 0 1px; - text-align: left; - font-size: 0.8em; - overflow-y: scroll; + width: calc(100vw - 20px); + height: calc(100vh - 540px); + box-sizing: border-box; + padding: 10px; + margin: auto; + border-radius: 10px; + background-color: #00000022; + box-shadow: #000000 0 0 1px; + text-align: left; + font-size: 0.8em; + overflow-y: scroll; } #chat-input-box { - width: 100vw; - height: 50px; - position: fixed; - bottom: 0; - background-color: #bbe1ec; + width: 100vw; + height: 50px; + position: fixed; + bottom: 0; + background-color: #bbe1ec; } + #chat-input { - width: calc(100vw - 100px); + width: calc(100vw - 100px); } diff --git a/src/main/resources/static/css/main.css b/src/main/resources/static/css/main.css index 691461a..16ff364 100644 --- a/src/main/resources/static/css/main.css +++ b/src/main/resources/static/css/main.css @@ -101,4 +101,19 @@ body { color: #000000; border-radius: 6px; pointer-events: none; +} + +@font-face { + font-family: 'iconfont'; + src: url('../icon/iconfont.woff2?t=1713086382342') format('woff2'), + url('../icon/iconfont.woff?t=1713086382342') format('woff'), + url('../icon/iconfont.ttf?t=1713086382342') format('truetype'); +} + +.iconfont { + font-family: "iconfont" !important; + font-size: 16px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; } \ No newline at end of file diff --git a/src/main/resources/static/icon/iconfont.ttf b/src/main/resources/static/icon/iconfont.ttf new file mode 100644 index 0000000000000000000000000000000000000000..42d18fb5d2bfe47013a99f290c261a826c2c169e GIT binary patch literal 3172 zcmd^B|8HAY6+h>FPhvmY&oB0KlQ_>#;xuXYlDLl3b%~R7{h~;uDg6dov$js+#K{sn zOWe)vm`GP7M1e7B65@wROrjv52)g|?sgzMFfuPd5p$ciLDnMW)3O}%Jr9#Uy=RUvC ztwrJw;M(`z&-r@KJ@?xK1b_xu2Oj$N9Xhhh{A$M;0Ng>`!;^=4lS6Ie*NFZa(I;n? zvn%^g-T5Z~=ONyQ^Gm1aLhrosF@T^0h+oL(va?%{{PhFU{XNxmo*2rj!cM}MskY~r zOJ(!t)jMSSH=@m@;!IXLBitZ+B0*cumRB$gizGLgypUba`M)!C383y38gqW7xK_G) z?A$#H_&&)Ofnw*^tLrc&T&~`$ek5FBoKF?S;Sl$1<;Ay8_=Y}$24^hze-a*5e&WB3W`E^2Gfw<-pvYS$MnBP`Tyg z1Nd8Tj?`ET4+_Tybn4}*EkN}iRn~8~mCcOJmW|OAEXKF$-Dp&sff3&a;FHvoS6 zkv@&wR2i#0U0JNWU%6E!Pmgj)`$0j+l3CY&05Xj&(G-#VQIN=T^8a4wlu?;=(;%~~ z)+%KSDowS@)~qsCt86D#o~~84lPh$VSY>NhdB0Yj^}0ovsb9Z$HxkzqlK}=c&py5qwam) zr|Z7%ocg|hm-hT@^Jra4FN^4Cwz@QGzUh~CIM^W*o1{;e6QUw+HFhG zgC6@|q{>VrPf)jCt@rurpEU+(QW{mMO`z3vHD<;+P{lVS0jG3eHAe9Jau$A_KN_n&J@fU7>c=Lskq5L!VpUDqr?x?)~ zH~y|>-gn*KRcVZR8os4hbtn(g38a9dD8}NF9-^(9P9^w@VLoF2HoQAxU&8PG;e!3m3qd9F4?V-3-#Aj| z@zik_sl{JJ_Jq-jaAEtB{nU3a;NpeINbmzg33xS+NApttHs}Qu=)C)B)E?MQBU9RF z*Q6+0Nj9p~L7XU#Af{8qkCSMSL?K;9DK2kslsgBv^M9IBg7R%enQESFDQjM@y=&uc zH?KDP?{cb40^NQ~Q81;11B!iJF%FzOn+c6`vr{CKb$P0}xg6|IlFeOzv&wgKUSi&s z?TBJ9Bfr6nULOx-&azyI)vA-LbqGKdw!t7gNl`~p=2cGapj)YvPoxLMxYQWXL&@|& zAeGquNrIhZNsiI&l^*P%c}Q(Bc54mtr!|8c;k!o@_FBhSw=l{X8ogGA5i^Wy0jI;M zfPqHfWZyEvn&up(^6FK<=#+VT|5X01b z-H1iVKYL)QXmHzob!i(DU1PH^g`kT$y8oM8%o9KEVu5hCi$(gXOS)Jh{;-SdDOY=3 z+&~^z=siH8j>bvQH$x4x*ZBu7=0JtFT+9>ymo63v|IWoCgy1hOmWaRM;(9oWUKck& z0%x9F&1FluS#$cdxiC{K%oPiz&Hi9+{?t--b(7rekLFg_7K#P4-|E|B?aLK%tDA1t zo|{jWN^|DiYH``zOa5|8OGR^KwYZp@DOveaX=P_`FB^yPt(oF7ZIe~VK^98X&VmWk zaGKf$n1Lb`V9sevkI)B6dmc{FQ<)|E|D}DDv{zw`^q5Z*`oV&}N38adR>9GHIGQzh zjz&vTj3tW5q`FF;mI>{3__Wox+oBEbB&t>P0 zXPeFWrggwWje;EVD4>WE%BWx+C~Nss+44f6UtlXC%Reu_aX}b literal 0 HcmV?d00001 diff --git a/src/main/resources/static/icon/iconfont.woff b/src/main/resources/static/icon/iconfont.woff new file mode 100644 index 0000000000000000000000000000000000000000..2dd7ba6250d1165d8000455a0189ad4a9aafe4c0 GIT binary patch literal 2224 zcmY*Zc{tQ-8~zQ(2x;sc%Nc8wU6yE+-Ov%rzGTK&M%kB)itNT3S&lJd$`VGhW{Vig zGLaS>dt@(CmTajxKb=3m>wB*2zMl8K-}||q_j>=h!z_%A0SEvVTMfW*)H&V%<45QJ zFO#b_`Tzi71J&~&ti@8KZ&_SbQUx_bkRJh!lr(*b^~D5$8Uf_-VBfwRy1MJ-6YdEB zOmF~T!2kgCj=-DRL!1Z39ROHEK%WW-4OyGdn>bJewQ`V)fskU$V$sI=hTuW159Fdp zx>zS;)yE%u<*rcMZ2TXvu?`h8Z0^}aO)Umw%=5qj?HjGW1@fzq$){8=B!R; zG;L;wN*yiPu!j! zzVWu)fwVKf_lPX9|HfbcM!m4&KlBSN9}!^}%PdB0?U*}u^`?mlG!a8A`dX1zdFznC zUi(heCTk;;d@T4Gc(RAJ3r@s_uifj{x)iaXprfE=(#JDQW_)~2qagqFy3dXJi&TEP zK|V@OzqPTU)WciclFwPe%@JCNc4gTpL?em_+)pC5^q^m2akR$wqcIQL2`7ZOxzDZ= z)5a>4$y&>i%Tu=p!v>$nNtSe+fk);jt6H$(t)XWe(mB#ysG5a;+NMDGBCam>JO?Vw z^QdE&p9tBmsaRrU@R90MuwTt(F^duear1y^$?5rm{%$&bZgFsfv^)HF!U_4W1y0^g zc1wr*l{vLEGbHJ0rF(eApYp7GIe&)hE{&BBR{zqx=`{VUei`-Xc~Ib^*JSc_htFHb zn0M*Wl!9(_kq-5`gk;>R$xp#}i#PZ|4oS^1RLOZGG>&kL-Xz z64g_G`l1W@1+R2{m(4qO(+4?W1a&~Pt41_4HOVEGRj01h!4;&gn)Z!2Vz_e9A6N7N zoo1cRF+;w-T&m&Shc`qdPM7jO*C7AJ^`L*GZrpKwO8107X{i8{#LnH-4zbj4f1{$U z=^|Pvir7m|*xGr;n3LxY>|JIkzdemJV7J)Jvw-#xV??a=g{Y90}xVV-?4 zDR!oDV?)Oz{*UlS z-V=+rtkwL5v@+R^#bwNjYGry1gC&&2HlY&tbwd*ii_vg>mbKLi+J<0~aZjJ0YRX@} zyRVAuD-sv>N)@E_*u{MGa3o5c&d_>$s*&%m?7vF!!I8h?(#S4S)y=RC*Uki9svJHnHzxA#lnABcS~T*Xwt|JsV6 z3PPLZDOW6|MQlljUKeQnqT)^U`8(PNJz5#*Rh^SFRYuj-#GnJO$8?v8TRteOgyzuf zZ{Y_RSd7}T;b@Vh|C3H)LrDK&JpEReC7)#Uq3_4aWB3_$WN7lhEFC4BZp=Sk@v_Ve z>Ks@Ih1&*B8%bvCK{hy9M;_hdT$v^aDSPZkl(s)Jh@<<9K|0Y z)o+<2>XNSE-WW2cKSWv1Jx{Poxv5H|Xt{LenJW};dMHMxgn4J@I*63io?H3cHr)mf zmfrcnTxFYd*|{!jm~N2Qz>#gIY8%n zg>7M8U_Onh$vw3zwA5s#x1PPYnI56NKK{K=SPIOawSxacavn0ZlrfE$8y|9>-ndowini@Ie-6T{VE zM+Gpl1Ykf%5^NaEU@i(o zYCp=l|1uv$SJWUCVkcf2KoXs!1DqU1K!7H>iBi(!s8!wX0T+-nw6+|+n$!? zp&w?WsFn}Q9>VIEOd3ZWl~BW4=II%{3v8co!O5ubF#~3!wuy275A8%zI8i!W5xz~jwJ+cBc=+S_vGRfZ1}>MH5XIG|$;=f!91kbDP$eEqHozo^ z&a;biUNJNZ@!HQ@hiVWUycwYuD~)|rL{PjUQ^=sRizI}RJQDU6XcabdA4?U7L zf|l6ir2B9Sr6i{rzXXv8&x788le65)5-}>=t}SL)o!b1mdz>3IN!c=jmuji@+Unaa SXApI()0*!%G*Wq!0pMSgknQ{c literal 0 HcmV?d00001 diff --git a/src/main/resources/static/icon/iconfont.woff2 b/src/main/resources/static/icon/iconfont.woff2 new file mode 100644 index 0000000000000000000000000000000000000000..9a5e63806b911a38024ac6d4da85634e9c42db09 GIT binary patch literal 1712 zcmV;h22c5SPew8T0RR9100yuC3jhEB01RXR00v|L0RR9100000000000000000000 z0000SR0d!GgLDdte2D-7HUcCAAPW)z1Rw>3X9sEe^1XMx@LQm93_*jrY! zE$_WKq`c)j-s2^`kcGsvu<3@&Oe^--!x-T zEq#JBGEL809>8XEx;feRqv{DLKJ08x^Ve#R7YU$W@M*_Hlj|MXQ9Mskx-gz?4#@2P z|KD#`v_tzD&JCg8hrchH5c8Qd((2m!8X?WZLS57l(hP>zt_G=zFWf|6*s&av8&?m{ zz0*t7)H^ecJv+!crnSH8zuP&?J z|L3T8;rhrwz|Q$5VC960jQyRFm0az?w{k-FBW{>gUp&$?>G)x0{aH_>LUrE${9UoH zOeS26nt6RWJk4WkL|%La&aZ=Mmm! zW+~=`PCT=M!ciwwczTix6?YF2RM%*;R6cJ4fa_PO^=FQZgwTjtnBFsmN9`Uq zophmlMmAd=5mgpPSVbkJsiI8d;cD}(Mk(LLb)zz&SJ$(d>f-z4b*>t#z#cF@R@Omv z_3QI~wpYhe_zLAQs(S@JM^tq26bh)d8g#SX>{c*z^4PbV95a~pS1q??l=i(NnWlO}p4N;hHgI4esQkVRZcjaeBTy|REHIY>{()=t8;+B=g+DW+fZa^Mnc@Wb#V#L6MT$MnlNJsMcWdOHz41uzDHVR zzpl(J`W0FWH8Ii4mq#)#hMyn?$VHDTXKmI>OJyluAuabTb{}c49hI+F6uT9Dv$&)> zo0W~yuEz`1`I2Q9HBQrvs&bE2xht~Ej^O2Z^RUvjE5D`Bb2 z`V+BnR%Lee*T(n5{=IMgcgLl$Zy#_Utotlm^)7J}J7wrC_1Igg_2kxChHm zd0}?&oEMZALC)L?hSAQcdhb0gp=Fp0s~)hd^6IrqB!-3m9Q)3tpMMU=u_~f%nT4OT zZfs&A>nfv<>$YmNWC^EwPsJ?(sju&nZ&c*03?BMr^#Kr^7ci8RyGpT1E*_g?6`l&M zKbb3MZz^&dF@6dbV!;uh4X6g}0WR)eqacAe9LNO#h!?j{yA1CYuf(m>P?%Thxgvpg zh}V%3YTi0+8qA431ny6_5@`K=>(yde)^D@W&r#-Mave*Z^XM**P>d$g+xZvsKPcZV zy8lxdXpPi!Zo^@>fi=ik(*tC;_Fv$$bxbKinx}z^T<6nEh7WFn7DG~ni9zro3w9kuWG?cj&LQMjzY*# zBsXMqU8|PECbo+8ENhcv@0=h=kqRjD3Dh#O#0I^!`1c+WrxPIQsekp0mO4oPAYP2P z9{Ou8^_p@ggWJ7v_Bx2)0*?wQM_{3Zpg}BVpoN`p5TggzYDVOXgIK3mRbOtsz7QW~ z&SN*NeWeyDa+Iji#UNS?X|L-JKRE41H^Dc_QC1e7CCp!SPHy_a82Ag1YX%*87O-KJ G)Lswmo;BG3 literal 0 HcmV?d00001 diff --git a/src/main/resources/static/index.html b/src/main/resources/static/index.html index b63517d..b1c26c8 100644 --- a/src/main/resources/static/index.html +++ b/src/main/resources/static/index.html @@ -39,7 +39,7 @@
- +
@@ -48,31 +48,65 @@
提示：成语，四个字
+
+
+ + + + + + +
+
+ + +
+
+ +
+ + + + + + +
+ +
+ + + + + + +
+ +
+ + + + + + +
-
- - - - - -
-
- - - - - -
+
张
王
@@ -321,16 +355,17 @@ }; ws.onmessage = function (evt) { let result = JSON.parse(evt.data); - //接收到通知消息 + // 接收到通知消息 if (result.type === "room-msg") { showMsg(result.data); } + // 接收聊天消息 if (result.type === "room-chat") { $("#chat-box").append("

" + result.data + "

") } + // 接收绘画消息 if (result.type === "room-draw") { let brush = JSON.parse(result.data); - console.log("收到坐标: ", brush.x, brush.y); if (brush.isPoint) { brushPoint = {x: brush.x, y: brush.y} drawPoint(brush.x, brush.y, brush.width, brush.color); @@ -347,7 +382,10 @@ }, brush.width, brush.color); brushPoint = {x: brush.x, y: brush.y}; } - + } + // 接收清空画板消息 + if (result.type === "room-draw-clear") { + clearDraw(); } }; diff --git a/src/main/resources/static/js/draw.js b/src/main/resources/static/js/draw.js index 5fedca8..56ad79a 100644 --- a/src/main/resources/static/js/draw.js +++ b/src/main/resources/static/js/draw.js @@ -3,9 +3,12 @@ let canvas = document.getElementById("board"); let context = canvas.getContext("2d"); context.imageSmoothingEnabled = true; let brushColor = "#000000"; -let brushWidth = 2; +let brushWidth = 8; let brushPoint = {x: 0, y: 0}; let isDrawing = false; + +let eraserWidth = 8; +let useEraser = false; // PC端 ******************************* // 鼠标按下事件处理程序 canvas.addEventListener("mousedown", function (event) { @@ -13,7 +16,12 @@ canvas.addEventListener("mousedown", function (event) { brushPoint = getBrushPoint(event); // 广播绘画数据 sendDrawData(brushPoint.x, brushPoint.y, true); - drawPoint(brushPoint.x, brushPoint.y, brushWidth, brushColor); + // 判断是否是橡皮 + if (useEraser) { + drawPoint(brushPoint.x, brushPoint.y, eraserWidth, "#ffffff"); + } else { + drawPoint(brushPoint.x, brushPoint.y, brushWidth, brushColor); + } }); // 鼠标移动事件处理程序 @@ -22,7 +30,12 @@ canvas.addEventListener("mousemove", function (event) { let newPoint = getBrushPoint(event); // 广播绘画数据 sendDrawData(newPoint.x, newPoint.y, false); - drawLine(brushPoint, newPoint, brushWidth, brushColor); + // 判断是否是橡皮 + if (useEraser) { + drawLine(brushPoint, newPoint, eraserWidth, "#ffffff"); + } else { + drawLine(brushPoint, newPoint, brushWidth, brushColor); + } brushPoint = newPoint; } }); @@ -39,7 +52,12 @@ canvas.addEventListener("touchstart", function (event) { brushPoint = getTouchPoint(event); // 广播绘画数据 sendDrawData(brushPoint.x, brushPoint.y, true); - drawPoint(brushPoint.x, brushPoint.y, brushWidth, brushColor); + // 判断是否是橡皮 + if (useEraser) { + drawPoint(brushPoint.x, brushPoint.y, eraserWidth, "#ffffff"); + } else { + drawPoint(brushPoint.x, brushPoint.y, brushWidth, brushColor); + } }); // 触摸移动事件处理程序 @@ -49,7 +67,12 @@ canvas.addEventListener("touchmove", function (event) { let newPoint = getTouchPoint(event.touches[0]); // 使用第一个触摸点 // 广播绘画数据 sendDrawData(newPoint.x, newPoint.y, false); - drawLine(brushPoint, newPoint, brushWidth, brushColor); + // 判断是否是橡皮 + if (useEraser) { + drawLine(brushPoint, newPoint, eraserWidth, "#ffffff"); + } else { + drawLine(brushPoint, newPoint, brushWidth, brushColor); + } brushPoint = newPoint; } }); @@ -67,6 +90,7 @@ function getBrushPoint(event) { y: (event.clientY - rect.top) * 2 }; } + // 计算画笔在画布上的触摸坐标 function getTouchPoint(touch) { let rect = canvas.getBoundingClientRect(); @@ -75,6 +99,7 @@ function getTouchPoint(touch) { y: (touch.clientY - rect.top) * (canvas.height / rect.height) }; } + // 绘制单个点 function drawPoint(x, y, width, color) { context.beginPath(); @@ -102,8 +127,8 @@ function sendDrawData(x, y, isPoint) { const drawData = { x, y, - color: brushColor, - width: brushWidth, + color: useEraser ? "#ffffff" : brushColor, + width: useEraser ? eraserWidth : brushWidth, isPoint }; @@ -118,10 +143,105 @@ function changeBrushColor(color) { brushColor = color; } + /** * 切换画笔宽度 * @param width 整数 */ function changeBrushWidth(width) { brushWidth = width; -} \ No newline at end of file +} + +/** + * 切换橡皮宽度 + * @param width 整数 + */ +function changeEraserWidth(width) { + eraserWidth = width; +} + +/** + * 发送清空画板命令 + */ +function sendClearDraw() { + sendMessage("room-draw-clear", true); + clearDraw(); +} + +/** + * 清空画板 + */ +function clearDraw() { + context.clearRect(0, 0, 600, 600); + context.beginPath(); + canvas.width = canvas.width; + showMsg("画板已清空"); +} + +/** + * 打开或关闭颜色选择框 + */ +function toggleColorBox() { + $("#width-select-box").hide(); + $("#eraser-select-box").hide(); + $("#color-select-box").show(); +} + +/** + * 打开或关闭画笔粗细选择框 + */ +function toggleWidthBox() { + $("#color-select-box").hide(); + $("#eraser-select-box").hide(); + $("#width-select-box").show(); +} + +/** + * 打开或关闭橡皮粗细选择框 + */ +function toggleEraserBox() { + $("#width-select-box").hide(); + $("#color-select-box").hide(); + $("#eraser-select-box").show(); +} + +// 默认隐藏所有工具框 +$(".select-box").hide(); +/** + * 颜色按钮事件 + */ +$(".color-btn").click(function () { + changeBrushColor($(this).attr("data-color")); + $(".color-btn").css("border-color", "transparent"); + $(this).css("border-color", "#ffffff"); +}) + +/** + * 画笔宽度按钮事件 + */ +$(".width-btn").click(function () { + changeBrushWidth($(this).attr("data-width")); + $(".width-btn").css("border-color", "#444444"); + $(this).css("border-color", "#ffffff"); +}) + +/** + * 画笔宽度按钮事件 + */ +$(".eraser-btn").click(function () { + changeEraserWidth($(this).attr("data-width")); + $(".eraser-btn").css("border-color", "#444444"); + $(this).css("border-color", "#ffffff"); +}) + +/** + * 橡皮状态切换 + */ +$("#eraser-select-btn").click(function () { + useEraser = !useEraser; + if(useEraser){ + $(this).css("background-color", "#ffffff"); + }else { + $(this).css("background-color", "transparent"); + } +})