From 4054e4458df2b0b99fa8edbc679484328b95a61d Mon Sep 17 00:00:00 2001 From: LongYinan Date: Fri, 5 Aug 2022 00:41:04 +0800 Subject: [PATCH] fix: shadow color was not applied correctly --- __test__/snapshots/shadowOffsetX.png | Bin 2871 -> 3427 bytes __test__/snapshots/shadowOffsetY.png | Bin 2825 -> 3398 bytes src/ctx.rs | 30 +++++++++++++++++++-------- src/sk.rs | 17 +++++++++++++++ 4 files changed, 38 insertions(+), 9 deletions(-) diff --git a/__test__/snapshots/shadowOffsetX.png b/__test__/snapshots/shadowOffsetX.png index 5991f564023e220e96e02910945e74bb90433e56..95248bb2f9ac70bbee2037184a335a5582a94e1d 100644 GIT binary patch literal 3427 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 literal 2871 zcmeHI`B&3d7JuJt#2}E2$Rep*;l_P~!)sLW6 z+iuEnc;YYhUcX&Lqy5LKnvIjb4Lvze76#hYw0YRH8kjwNVG{xH7y|SRK4QyN^96Ur z-E12*F?B`k25}xnMboYLNY|wkH@#*K!`2vyL+!7e3_f?^Q7qSXAm<Z?E*=?C-v4IWI%`)?Lb;>SJiBo@ z5t6L`JzM8;hjU2F8r|KKxLqb=mr;au%nIXE`byK&{IhRwaJ#hI!4N9~CP1D2N{0-cmn3{u9KF#jA^buE$B!6gYmp9lKxM|YlFSfJGc_>6)XZHy z%Lwf`xV`lUB>8>+U8GR_AvzI+Gv)-LW&ur=GnncWA0$+642w1q#5n^vp zWPi<0NYXrP4>m_2qI)?o#ZEf!cb(DWP8>g(OU2aO_A+OVBcIc{KN*cKD&*Rd6A6;7 zz`N@+JTHHiAQ`0>n_-&jVPkf{YA-&o6XvxW&LG`-rF60Xam_x2drOZUGGZ|j^B7#R z=~G72r7?!%8DnFq=oBK2HLj{YS`j7|_!4cstozR$p0NUPO|8!0&Nyss7zcv|nJi6m zQ%L5xl1=e$-x?T$_Xz?V2eBI%zxTY#46B;o!71HA4W5+oh+I=;Wyq35jstPC3;1jU z7$g~Esq=-+DrFq;*^ET=O7_PBvlIe8yU`F_)?hWB=TnT>SF3Ima?700?qO(rzn^#c z>i`BETmedZ*^WBrT10d?o5~#y4(gx@#pUUT^ib6X;9V&8nEW0qNh_~k6glTgowz^A zWl394>g@JJprP3gx>JzQ6DkTZFS@uHjm)BVo>0Rw3~0K;wme!!&*SCqBu|DenIbCd z#-fgq!H24t=EE!y9}|0A8!Ec8nh$zm#d3&ubSVZBid)jfL)>)#Q+!xKMSZ_7EgjAo z^qHE&=QOuzBC(2fsMEvqezK>o;Pd@`-yK*9y!{|_9{&P>(Dmcue{O=X<5CV*8)D>V zKOX{pWRxD$=L3wf;sYy4yeAgMbqe=c1KF)EDl0&2Z%e~LoC=Hk9FEtmo%o@U%h*X? zLj*2sQSxXk)YhhE6<4Qc6{NU2twfy4v3r;n<~UlIQ@n%@>=w(wEyzPoaGKYF59HCG z2@+7jv*i*IJ@2BF&d<#WdEvJ?*`bI`;MrI*;-a^AcNEVERQt8?TGcgrUV&5|vJLXY zjX%Ye-T)F0bCV^@+EURRBBk3S?2_66;`j*90b{t0eV_1W4oJ*kwH=V993#Xx0Y6-G z7nJBH6yO^i!JlkQ2ogj!7_&j5!;6G+jHEt=1Swx-5hSYtC(TkZ3ma$+C8jHfP2&5v z^lTQv8;j~LOa>Vp3-gN58P#A?WJh8CK1vEIHI&&!MK_h@&!x8-Uul%6uzq#@pJLdj z(hjIoC9U?~)|29;%rZzelLvABmQV&wdbRacv>xvtZBL3B8t6rQ_T~nI8c%K$`?>Yt zH@sFaR~aY@K?(vImL-sYk#0ZTt=B{r>YC=)pi^!Q+Vs|-UCC?JDkG-Y0v zK`%~fvy9qq^|6?R7;mbuxtToQr8_`b)?#!rRew zMF1y(PYqVBoX;TPHWH-%I`dk|;`_VAUco~HnLHbt3$M&dKqTvH>%!j2lm|Dzsd#K^ zp&(Ocp8)yfxh1c$w;Gi%;%vgQ8vAIOZn)0Z3c=1acNA;%*s@=zg4>W;Q`f?lA{~Ee zDi)QQpWR7sT#33Wz5kKxxB1a8ty)j_-CMj62sBkMuvaYt1bDTS|9;sY@nZ-64>~~C Y!z;W^wl>WAbCznuckkU*7tA^TZ~q~3AOHXW diff --git a/__test__/snapshots/shadowOffsetY.png b/__test__/snapshots/shadowOffsetY.png index 3c90f107a0e0e9c1c5a62730d22e55c5591ccbec..860e5f7c7f4c331edde335e6fff32d1223555e3a 100644 GIT binary patch literal 3398 zcmeHJ=~t8I5})@CL1Zz2B#4L!TgxJwcuEzJh$vVUP!Sa>#G-|QkOGCW^GXG&mWy01 zD9GYckRzMLKoBsgvRxDcN{#GcQxF3Q6hcTyZtNe>({K0Ob2?wh20v-CJf9f>N~W0Us3wC8?av1W*?o zaNFY(cZ)ylPoH4wDf2j&4%O}JmGNc6R+ss6hqRZTzP(X;;ESk=^I^LQ6tlYz3%}G{ z4JevaQP}!B6zAF4o;tb1S!RExevdzX6IaHO;Q*`t6o8E>0c^Ueu!7SDpivc`t9t-o zhyht>cx>4TDPZ)w_O>~Np}cEz8{nEBr`T;1tTg?OlpI^ZqjlE@xW|9<;vdn3lfl1l z#`X(GTc;jtvV9jmi+$DolLt~!8>dtf^~3P-l-P}5TgDIO-`Q?tTlmD5?E!4G7NPAM zJ0a~q8X6RTfwdkjRf618jmjk-X6B#jKwuC#FU@72vx?a&sKwyeee?W0`N$<;$8LzU z5Rm&BP1Awt@Ct$CE~qJ4dDp(%@fk^>k~J zoS!oFT?*Td1A4EXqCY^$MnZeLfNe`89}xVeXrNqGcOt^)z}V*9aRMPRqW z%WLSh_x0=0Zx`(0MN${NU*cs*IgH#JVFBAWVB+y~nK2*ra702!^)$6eICL`iJg(v} zvI*fmXl{$?^?D~=e_`tO8{CdQlq#-}e^;3_9vH5H{dw6(Fgo!_LttgiDe1^wXhgNo z0L5N3J@VR@Jzx!2K#|12ZyLWzSZ*;K;Ok%+$!_1vT)q-p!=OTCAv1@2%XtG6cg9^_ zy+$&6^^uU|DSDV8?eWfMq=oTfl-j>FES!X0-VQH@ZT;_p*aObr{vhTi$eo`8_3Qs| zMb_~q0y{^VTD<Bz)D3IREvc$b|hUQ1Jo3W#onv;7U3PPIsDXPxwFGQpdzVpws zZd8Uu1L4sQcob0=(U$acLtUu`S|PY;jxFRD*!aI^*zq^ee&Ki`eO1p$3BPT`e%{>} z;>9VhF6}~`*v2RLjpntcd^O&M^Mg1HSr1@KK>(CZ{-WXj=b#>8FZuJTs3_?jHfzZ7L~ zV`(Ms4;5?~6@W+?d#%BY!RbO?vL;>3k$u|4!|MHE7c)g4ymgX2i>`#wg*>$~IM73r%+!evut%J~z`m z<1D_Ju|tGX8!ROd2EN zd7?5{%;_O!^dSk;pwnyK>QY>G^q6guuzM zV3@AJ-R~NHs|KRT$9C_WSE3%A7$DkmCG{!-@uP&v<|A0rE(!si@l%Yq`jrCtI_Aj* zGv2@ss_fkEb3*GYsZZXsw#hQ&?GMk|(JYlF+lO4)W+?<9oSUr-m?t;_;(YP zOGD4$DnUZN^JK|uUf#gik91mHXf8WYO09|2W$WA)5xo6Y!?BsK4SMIxxkU@HnF$=0 zgOsxv8g6Ojj=mhoaZ+#Em#j+-)1rXJ!BXf9GgoPHkX4i5wNC0D-p;N{e2DYuU$+oD zsuN9Y*@Y1(^_(4z-&R)t{awoFEbnQmpFru503r9jM`$Vl%!LA z^VeB(lRlC}Zrx?=ID~C;IhWt#J_ogjnpk|f4fqJxHg9kUZmD7AXrM2kGFgHqJSSxF3 zH;_(#nOQc-?aoqv6j1wKwEd#5A$>_ukRHe(({3J5XKJIJ9A+6$4HxvD_`ZSaoy;01 z)C|2JA5=jY9KY3FnIXFK`y>)#Di$+m-Bw7cS&qi1*;Sgq>Ec>QK@{&HEL@K(ka`w% zkGob)5N+bN8weBCxKN0vpjKIXI&0_lMzqf^HJACy1 Nz&=m6Dpy+Ce*u{~o;d&j literal 2825 zcmeHI`%}|b7C(7F!o!4!2nZSobx{E~EiDGI5?JIRuHa)@RzO1CMdTHjw1Ab8h;<1v z3byNGL3`s_o$2}I^SLu;?z#7K z&*$8#sCyb-eVpZakG4ARsv^zH1A0!A321FJ-u6s|Dt;QCwAWRpZRU^}W@3cQA#2 z^XYg*#*Yl<{5#^;Lhlo{TVdVor@ECDy;GgX>@IqG344VMu&#FkNUpW-;PAdg(cj5z z*KOM|Qx(#ZNtN&W(s|Ok8bg=(RgTJgN7qLekd8M|TWc>r- z06Pc|!J%`m(u-=z8_A7OhnD8&ZDA_P<12fQLK;+MINV82UXJoisx+!V!#oMe1A!uFf*6kLmRs+D8;cg>hXR9E1Q9sfDaf+XUhMU(4$35na% zU*j+vKEDs7|H_ra3>bWcZjfuEiY zD^Q=@_A%YIY?4lw)38IgM%QzeLR4i3alp8@6V)Ig(#7xe+K-@RD!iCA{~=+|oxLSK zIZ-g_&WeE5IaVbqbHg`Axe$q+!rjcy0rUJ{U;#Tcdcw%&4##1LWRk1&Y~r>F)Ylw#d>jJ^m5Jup=ITQ-OuwCecofFncaPmr&F^ zi?N1lJ{PkdLMgB2wvmi{^t71ddHMk&1d~LK}+5l z7;-TPD9A&yeq6cw=)xdM`6`mo!wb~Sv8Mc@?f%Rw0Iv{nzQ5dm@)UJqI5z-ZzQS?D z2F=xKw#uLDhJ~y;cj&s%wiLZ@mzilX_9E#f3(^*%Mbp#6p=_Ywil|xH?S-p2Vytjd1L;DtmYG@6sTokQ(3s)C64zjX0ImX_=+IuDkymV$3 zK0AL*G|jFWudsOy+Kpv3q3QYIz$Zu(W7fIjqBEHddc0_GwZDSY2htCeX=p8Rt+Nja zrPQ06RI3u1zuUfnRw2v?wU0WKTzN}CK}om)9$HhF|)MZYxFI!NOq`e^uP!Sb2! zx`a%nm2Iz<(d*iP0qQUn@?J#uej1|4e<-g06KIo`HCxkjt&u+(2az%~XFn`!5*F{H zN9P3noVYN%R0k66XLm7d9+Zi6>r2h&)7IZ^N254przJlH9z6L%8v#w@l13u+r`w@W zXCGp9w1R1kQ26sPgjiIzpKjrChf@=}L7_U<3n2yW$6^?FB2k zE-9m%Q!B?U3(JM@OvzR2}yN|&gUMk+bnVRYm! zbE_2-{PBO>N=(=xSs7m_;ZJ+QP^`&F_As*|tMNiMCp^nj?c&e)?_8rQ!ATP>{m19_ z`E^ewD=n;)3RL~^8AE?8Z!=(mSzjI5hCN@05DxaHy!I&P%#Dd?Nq8)^u7X&YTEauz qVX`gueLmygbADIgH?6?rtPS$AR)T-neU16+MG_7ij%kf%RQw+(_JO(p diff --git a/src/ctx.rs b/src/ctx.rs index 6a87c4c0..7178fbbb 100644 --- a/src/ctx.rs +++ b/src/ctx.rs @@ -639,16 +639,18 @@ impl Context { return None; } let mut drop_shadow_paint = paint.clone(); - let sigma = last_state.shadow_blur / 2f32; let a = shadow_color.alpha; let r = shadow_color.red; let g = shadow_color.green; let b = shadow_color.blue; + let transform = last_state.transform.get_transform(); + let sigma_x = last_state.shadow_blur / (2f32 * transform.scale_x()); + let sigma_y = last_state.shadow_blur / (2f32 * transform.scale_y()); let shadow_effect = ImageFilter::make_drop_shadow_only( last_state.shadow_offset_x, last_state.shadow_offset_y, - sigma, - sigma, + sigma_x, + sigma_y, (a as u32) << 24 | (r as u32) << 16 | (g as u32) << 8 | b as u32, None, )?; @@ -673,13 +675,23 @@ impl Context { return None; } let mut drop_shadow_paint = paint.clone(); - drop_shadow_paint.set_color( - shadow_color.red, - shadow_color.green, - shadow_color.blue, - shadow_color.alpha, - ); + let a = shadow_color.alpha; + let r = shadow_color.red; + let g = shadow_color.green; + let b = shadow_color.blue; + let transform = last_state.transform.get_transform(); + let sigma_x = last_state.shadow_blur / (2f32 * transform.scale_x()); + let sigma_y = last_state.shadow_blur / (2f32 * transform.scale_y()); + let shadow_effect = ImageFilter::make_drop_shadow_only( + 0.0, + 0.0, + sigma_x, + sigma_y, + (a as u32) << 24 | (r as u32) << 16 | (g as u32) << 8 | b as u32, + None, + )?; drop_shadow_paint.set_alpha(shadow_alpha); + drop_shadow_paint.set_image_filter(&shadow_effect); let blur_effect = MaskFilter::make_blur(last_state.shadow_blur / 2f32)?; drop_shadow_paint.set_mask_filter(&blur_effect); Some(drop_shadow_paint) diff --git a/src/sk.rs b/src/sk.rs index 386ff05d..4ca6c3b6 100644 --- a/src/sk.rs +++ b/src/sk.rs @@ -3017,12 +3017,19 @@ impl Drop for Matrix { } #[derive(Copy, Clone, PartialEq, Debug)] +/// https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/transform pub struct Transform { + /// (m11) Horizontal scaling. A value of `1` results in no scaling. pub a: f32, + /// (m12) Vertical skewing. pub b: f32, + /// (m21) Horizontal skewing. pub c: f32, + /// (m22) Vertical scaling. A value of `1` results in no scaling. pub d: f32, + /// (dx) Horizontal translation (moving). pub e: f32, + /// (dy) Vertical translation (moving). pub f: f32, } @@ -3097,6 +3104,16 @@ impl Transform { f: (m[2] * m[3] - m[0] * m[5]) / det, }) } + + #[inline] + pub fn scale_x(&self) -> f32 { + self.a + } + + #[inline] + pub fn scale_y(&self) -> f32 { + self.d + } } impl Default for Transform {