From bd0e43c4dbb207be7373c6619365dd32ae2a0b89 Mon Sep 17 00:00:00 2001 From: Jukka Kurkela Date: Fri, 17 Jan 2020 11:26:09 +0200 Subject: [PATCH] Fix bar border artifacts --- src/elements/element.rectangle.js | 28 ++++++++---------- .../controller.bar/horizontal-borders.png | Bin 1522 -> 4122 bytes 2 files changed, 13 insertions(+), 15 deletions(-) diff --git a/src/elements/element.rectangle.js b/src/elements/element.rectangle.js index c4ad49a9ec9..85d957a5220 100644 --- a/src/elements/element.rectangle.js +++ b/src/elements/element.rectangle.js @@ -135,25 +135,23 @@ class Rectangle extends Element { } draw(ctx) { - var options = this.options; - var rects = boundingRects(this); - var outer = rects.outer; - var inner = rects.inner; + const options = this.options; + const {inner, outer} = boundingRects(this); - ctx.fillStyle = options.backgroundColor; - ctx.fillRect(outer.x, outer.y, outer.w, outer.h); + ctx.save(); - if (outer.w === inner.w && outer.h === inner.h) { - return; + if (outer.w !== inner.w || outer.h !== inner.h) { + ctx.beginPath(); + ctx.rect(outer.x, outer.y, outer.w, outer.h); + ctx.clip(); + ctx.rect(inner.x, inner.y, inner.w, inner.h); + ctx.fillStyle = options.borderColor; + ctx.fill('evenodd'); } - ctx.save(); - ctx.beginPath(); - ctx.rect(outer.x, outer.y, outer.w, outer.h); - ctx.clip(); - ctx.fillStyle = options.borderColor; - ctx.rect(inner.x, inner.y, inner.w, inner.h); - ctx.fill('evenodd'); + ctx.fillStyle = options.backgroundColor; + ctx.fillRect(inner.x, inner.y, inner.w, inner.h); + ctx.restore(); } diff --git a/test/fixtures/controller.bar/horizontal-borders.png b/test/fixtures/controller.bar/horizontal-borders.png index d6a10eab0955b3444a4715d65b3835baa5b6b6b8..1cd6913acfc05dee86e993471c3b7abb9302f706 100644 GIT binary patch literal 4122 zcmeHKX;@QN8a{V1+!!D!p)A5c5Nm3s5K3he!*xXm1*=xDY*E`{E0Q1-5HY!7aI}RM zryUCl2(4PCYJq93hBdcV(N+%91>(Pf5ChJfW?OOYqkJ@!mkJ*STI~Wb~_dTZpVf-E4QUa54ASD^Gr8V z*Wr{$E2)LPrLi47EpMlY9LmVg=i`|woee9K+`hAvu5Vd6+!Yt8O2%Iz9B;T?>Dzd@ zZWcNJ;M~ag$T$8a=i7Sc&P1PY9v1rOgD8NYIMIcl>ayZ&G(EJ~0ZW7#I&w?0B$fK+W9;F3#kN-L?JSFO`CfSWS|D>nGkIqua3PbEI)NW?DrdjRAl~elb;4 z;tdKgbSHup@2Eu@2U|hoas-`%P#P22f%-NJP{W6~x!M3>6bPi9Gd5HrDR9$RkYA)@ z#Xna0fHWaVJ5V}%5qM}uI{-6?NhvrP3%55pY(cfLd0Li0&N8QTh?Yeo0%ma!TzsB}A_No2K{X-+1Wz|R)}RRbNT}_p&!6)6bnZD#^i<%c!9XmIDVD~H4}tOa z;dWE)lI(<|{4~@I-GxX`d2-E8STk^is{FeWRjEffcu^#}g1P zHHrMrN98guRT5excj(PusBiU{*sn7b1_u<1R0R|-wcQ;(Zd_5X-EY9yCit`czT?&0Mw zMy|?-h33Ch#WS)Q+#<*;;iRlG(wsM61iVityBG-zZU_;D+74$LbHpu{fVg!-tBe#T zaYC5FTG+-M_czkue)faI#4VwyE>+wfRpE-_mv|y@X>+m#`oVl%l=cIg&Pzlb#Bv-p zXobK2bn27G-OjJq_)M*(=rUJry-)k>r#?O`nfa+f^Aa^-c%u>p14 zUt6d(%rghVOrUhYXcs{vtS_xFc%vo|HwQ;D$WR(QdduAt!DxE{si^}pg5YVN2eA~n znFhp%?k^~dI6523Yh|%e0>=Gw^C&68usAbDQgnTNZjAg%kR?uB#A~Pf&$mZf&1|AR zYdialR*LHFj$tc{mr6iVRc--YZ`bK+juS7=GpAl3*}{kFKt|Hws52OChD6i559wnk z!MXUU_xY-H4qb#LTM}#Fz@E`vd=&vz0#TMi-WZDBZ`2%tn*?Ouv@N83pnm*1)5b{5 z6-Xbd^zYag4q)2BAHNtOtOVs{^gvTtdqkQUi{9c_fvgoxQQVK+ zFdvh=eX@aX^kUHI%m z0qk=)>~pS%KV+?cnSv_GvoTQ!1Iu52@yGBVJqh_8fKUo|XRr3D?ZO|xtCko+rlC>F zo4~GB_db6QN7t){+O$tOgUEax<$JcS4=omI`$~%RXLDcKh2rk$6sAcHuyP>yg#KeI;i$gyB}VLYmyCj zeh$~+lMasm*Ow+9(iTOALE1|8@H5gD&qn18LW{(6-h%>v#0)_+k$AZUJfWYUaa|Gd)H}E!S zb>Bmk<*)?znDJ^@P#_Avh5S-+=*IyV=I|Ruu;@Dz9A{YcLo;&r667doaW2v45KXSx zm)xB3M56k@SkK(qlwH8>_?REsoo zN2ZR1X7T^vegoVZ8n?Jj_Vs|897uxeIDSLPpZ8XI;}9 zpo47!n$(PD9M?<)Q$-G}Vic220iEVAT)k7t`Z`0`2ch}`bN3e!)Q3gR@>(n)#oOiX zsZ)$TJnTc(_n(FRya&BxqZnb4Rf@i5v<+HS^(;>_q(;)P#sC7E(v(lxkN;aR|nLd#>??JJmPpmjDkZqfZygw!8BiU180K@7TOy+a{~2SUr;qd!Ce6+yfisq zT@0o4&2z!+HdnYkA3a|CD!4$sH zqRMOL#=m9Jjw@6gvcd`bsW?l5O<`-8!HnTm~8!8ccxHzdBqh3@lyXUMqvNabFuyw%Y6oj%e!dz3`EO`&QE;(GlnbgSb_#ht25t@vV{JhOPHB zi;2O75-@m0+^}{9G@iS1mVak(>Mz|Ou|zP*drmF$Ox|!C^oD~UhXFUaHfYJ|w&M!@7Yx0*{l?wD7+bCiBhc8wG_}Q>FWKHQRNybm&hXFVM literal 1522 zcmcIkZEQW2i)R*M+Z%ZfIVWtvURlqH5)vJneuEL*RSWJs{p z_k3(9wsaJu)6J|Bl+bm$E{hbEh}Bv&%T~=wd%gE|MxqjaxPQ)j&wJi;&hwm)1DP4i z<3>&%2>@|2sYDJCg^n1+MkDd4vVAka2%}80I7@Z*)9a*zQ?`s-_F_#%=bNJ<@8yXd zQPVHgvJa(RdwwBZXnD}VX`eOzgZy5}+t0Ns%B;#1jzUiU<5$|?30yRGIdQ1!>>bE0 z(Y1+TnyY{CYR^UhPE(OX#~c)5NismJom<60@Osxh9SVh3 z;wT5T!PQr%ZeOLQ8uS>L#3DFcgXC)t`3}*(Z63un^@#xPI?kKZ&H7LX_S?CY34ugU@TwWy6oJa9z z`4Tk)-#Cz0&#ltBP$DbJ_6yR)ELiPM7xWIsgGr80lUc0*Cjva#uJUNOVXu(d`b9tv zyJ&KJYSHGU8lsmaVTQm}&o9wU`2 zA}Kl?4u?=C(s{YR5%*sdM4_^KA`_37dM=}FhNS^j<3m61tkqSc*+erjFdqy>rN`&$ z0wG9b5!JaU?MjSqxrPj%KxNM=WRnll5|lD88MH-DY|FiF%cA~elRO(^zErb&KkSc1rk0xRm^hZ5W1RSXv9(?5^1Y+nii zxJjVhfSPAm_E8`;w}(q7P2EW+`Nv8R_kySSzO*{0OdX*TJ;rre-Pb+Y zv