From 4b0caa68a3e22ac885441aef8f9a32510c77679b Mon Sep 17 00:00:00 2001 From: gaohui Date: Thu, 16 Dec 2021 11:37:26 +0800 Subject: [PATCH] update Jscanvas Signed-off-by: gaohui --- UI/JsCanvas/README_zh.md | 10 ++- .../src/main/js/default/common/images/ai.png | Bin 0 -> 1043 bytes .../js/default/common/images/like_yellow.png | Bin 0 -> 758 bytes .../entry/src/main/js/default/i18n/en-US.json | 4 + .../entry/src/main/js/default/i18n/zh-CN.json | 4 + .../src/main/js/default/pages/index/index.css | 28 +++++-- .../src/main/js/default/pages/index/index.hml | 37 +++++---- .../src/main/js/default/pages/index/index.js | 70 +++++++++++++++++- 8 files changed, 133 insertions(+), 20 deletions(-) create mode 100644 UI/JsCanvas/entry/src/main/js/default/common/images/ai.png create mode 100644 UI/JsCanvas/entry/src/main/js/default/common/images/like_yellow.png diff --git a/UI/JsCanvas/README_zh.md b/UI/JsCanvas/README_zh.md index 588795ee9f..e4a398d78e 100644 --- a/UI/JsCanvas/README_zh.md +++ b/UI/JsCanvas/README_zh.md @@ -16,7 +16,15 @@ 5.点击“水平对齐”按钮，在画布上绘制文本水平对齐的方式。 -6.点击“清除”按钮，清除画布上所有绘制的内容。 +6.点击“图片”按钮，在画布上绘制一张图片。 + +7.点击“径向渐变”按钮，在画布上绘制径向渐变的颜色。 + +8.点击“线性渐变”按钮，在画布上绘制线性渐变的颜色。 + +9.点击“滤镜”按钮，在画布上绘制多种不同滤镜处理下的效果。 + +10.点击“清除”按钮，清除画布上所有绘制的内容。 ### 约束与限制 diff --git a/UI/JsCanvas/entry/src/main/js/default/common/images/ai.png b/UI/JsCanvas/entry/src/main/js/default/common/images/ai.png new file mode 100644 index 0000000000000000000000000000000000000000..33bd888c99df3ac4cd9c486702cec5fc9c68db27 GIT binary patch literal 1043 zcmV+u1nm2XP)bVG7wVRUbD000P?b4y-7D@iRUl}SWFRCt{2*^n|8tU5u;yNAU_rDUWCM|A z5fRYq2!p78BE6j-&o5`|dNLDlqT~@-GWG6N&^}VpKKZq)CyDh3FO25f+mO_Uz^Xgv zO97%USzO#AKOek4GpAz*BHMr^b4+;|*efSH_rzcIEUOC{rfb^|0h`Lqy#eyNoILOm zfVOlr5$X59$}*=vgk9U?2BF8S?Hhb6#XnC4Aq zfCg($U=u7#*U5>4m*WPcEVFCN<|fdF$z4!WuMFeG-Il-2wx0{dw`yw#-R3FFU|V67 z*2(`+OeO6Rbw_(g#b zg-I1&rj!{0(&nsCly|KWVNTbp+71BiA+iD(k>Q?tYl!Krbjxth7SK!8KO;pEDXi@e zAjDPz1WKyKry>0V)!b4lAINaeu@F&VTbm7!y$$RNnOTNk%AYb$DV39R zM}|WOCs!CqQ{Vb0(3sE^<76Z+XOEpqB0TZ-o7O+n3#<(sJ5DB@SW%!teMw!ht``Yb zoNGjx2jzTnMS%)7Y;{G;VbC^X%ovMG&2qZme4#d%igvO!o9{-5`zRmb=E5~{@r0?* zGG7&M@oP4>ALO+%hYj-Yjl3{aNMup7sLI`k*5!60`p&%OSB}bs-ycnWRky3!rI0Rb zeifqqAa^=jeI}!SY_8a%rm5;}nPwl@NTgpdvjeCI`($+BjcTk5YTz1Cmo>Ez$&a9m zr{0QCw#(SydsSUnEzs8Cj7oO8}O=bUpD^B=freDq#qyb=Ha N002ovPDHLkV1my8=41c> literal 0 HcmV?d00001 diff --git a/UI/JsCanvas/entry/src/main/js/default/common/images/like_yellow.png b/UI/JsCanvas/entry/src/main/js/default/common/images/like_yellow.png new file mode 100644 index 0000000000000000000000000000000000000000..751b6f436ad9a3aafa16aa53b148cd6def0c1282 GIT binary patch literal 758 zcmV004R> z004l5008;`004mK004C`008P>0026e000+ooVrmw00004XF*Lt006O$eEU(800001 zb5ch_0Itp)=>Px#24YJ`L;(K){{a7>y{D4^000SaNLh0L01m_e01m_fl`9S#0006_ zNklJyOsTCJ_@8YcM^@%OhNmFV1z&Wu}1XM=$sOYuP-kxza*w2_L4?6jfrvQzhU z4+iKg$T~k7-BT&4jc9rE+)7QBDNjiiWD|C?aDH(>)T<#6k3_XJ~G7cMbFWZy;AqV?;-@4>G_BN z^f7${`tG$kdd>F`zo?-(_sf8qGr%CD>e7qaa>Pt?T!BjzW%Bty;Ux}*z6!g|ok5bYZILhWOA)c8Wnlifr@otPo;d+mG? zq)d^#A0IK^QEi5|V8m8wA@KV_LJ@X~B3T%_8huHg9j9$9M6F8W`>dI;9);nE&0L!- z*rl;6(T5btk$|zhOr3YkNUlBK3`2Cv?c}sw$z6}mdLAAoBdG>^o;*K6;2-|@n;b;W o>dr&pVI;C{y;URTpZKfz39BW`fNrlw-~a#s07*qoM6N<$f-kgBg8%>k literal 0 HcmV?d00001 diff --git a/UI/JsCanvas/entry/src/main/js/default/i18n/en-US.json b/UI/JsCanvas/entry/src/main/js/default/i18n/en-US.json index aa6bc7253f..f1c4179e9d 100644 --- a/UI/JsCanvas/entry/src/main/js/default/i18n/en-US.json +++ b/UI/JsCanvas/entry/src/main/js/default/i18n/en-US.json @@ -5,6 +5,10 @@ "close": "close", "bezierCurve": "bezierCurve", "textBaseline": "textBaseline", + "image": "image", + "linearGradient": "linearGradient", + "radialGradient": "radialGradient", + "filter": "filter", "delete": "delete" } } \ No newline at end of file diff --git a/UI/JsCanvas/entry/src/main/js/default/i18n/zh-CN.json b/UI/JsCanvas/entry/src/main/js/default/i18n/zh-CN.json index e34a163a0e..b14bd39a1b 100644 --- a/UI/JsCanvas/entry/src/main/js/default/i18n/zh-CN.json +++ b/UI/JsCanvas/entry/src/main/js/default/i18n/zh-CN.json @@ -5,6 +5,10 @@ "close": "封闭", "bezierCurve": "贝赛尔曲线", "textBaseline": "水平对齐", + "image": "图片", + "linearGradient": "线性渐变", + "radialGradient": "径向渐变", + "filter": "滤镜", "delete": "清除" } } \ No newline at end of file diff --git a/UI/JsCanvas/entry/src/main/js/default/pages/index/index.css b/UI/JsCanvas/entry/src/main/js/default/pages/index/index.css index a0f5d4cd6a..199ea8fe2f 100644 --- a/UI/JsCanvas/entry/src/main/js/default/pages/index/index.css +++ b/UI/JsCanvas/entry/src/main/js/default/pages/index/index.css @@ -12,28 +12,46 @@ * See the License for the specific language governing permissions and * limitations under the License. */ +.container-div { + width: 100%; + flex-direction: column; + align-items: center; + align-self: center; +} .container { flex-direction: column; - justify-content: space-around; align-items: center; + align-self: center; + flex-wrap: wrap; } -.title { +.button-div { + flex-direction: column; + justify-content: center; + align-items: center; + width: 300px; +} + + +.canvas { width: 300px; height: 300px; + margin-top: 20px; background-color: aqua; } .div-input { - margin-top: 10px; + width: 100%; + margin: 10px; flex-direction: row; - justify-content: space-around; + justify-content: center; align-items: center; } .canvas-input { - width: 100px; + width: 150px; height: 48px; + margin-left: 10px; font-size: 16px; } \ No newline at end of file diff --git a/UI/JsCanvas/entry/src/main/js/default/pages/index/index.hml b/UI/JsCanvas/entry/src/main/js/default/pages/index/index.hml index 71d3ba568e..ec7fc6f4e2 100644 --- a/UI/JsCanvas/entry/src/main/js/default/pages/index/index.hml +++ b/UI/JsCanvas/entry/src/main/js/default/pages/index/index.hml @@ -12,19 +12,30 @@ See the License for the specific language governing permissions and limitations under the License. --> - +
- -
- - -
-
- - -
-
- - + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
diff --git a/UI/JsCanvas/entry/src/main/js/default/pages/index/index.js b/UI/JsCanvas/entry/src/main/js/default/pages/index/index.js index 672470fde1..f97ae64496 100644 --- a/UI/JsCanvas/entry/src/main/js/default/pages/index/index.js +++ b/UI/JsCanvas/entry/src/main/js/default/pages/index/index.js @@ -18,7 +18,21 @@ export default { ctx: null }, onShow() { - this.ctx = this.$refs.canvas.getContext('2d'); + const cav = this.$refs.canvas; + this.ctx = cav.getContext('2d'); + }, + imageClick() { + this.ctx.clearRect(0, 0, 300, 300); + var ctx1 = this.$element('drawImage').getContext('2d'); + var img = new Image(); + img.src = 'common/images/like_yellow.png'; + img.onload = function () { + console.log('Image load success'); + ctx1.drawImage(img, 50, 50, 200, 200); + }; + img.onerror = function () { + console.log('Image load fail'); + }; }, handleClick() { this.ctx.beginPath(); @@ -68,5 +82,59 @@ export default { this.ctx.fillText('Middle', 125, 220); this.ctx.textBaseline = 'alphabetic'; this.ctx.fillText('Alphabetic', 195, 220); + }, + offScreen() { + var offscreen = new OffscreenCanvas(360, 500); + var offCanvas2 = offscreen.getContext("2d"); + var img = new Image(); + img.src = 'common/images/ai.png'; + offCanvas2.drawImage(img, 0, 0, 100, 100); + offCanvas2.filter = 'blur(5px)'; + offCanvas2.drawImage(img, 100, 0, 100, 100); + + offCanvas2.filter = 'grayscale(50%)'; + offCanvas2.drawImage(img, 200, 0, 100, 100); + + offCanvas2.filter = 'hue-rotate(90deg)'; + offCanvas2.drawImage(img, 0, 100, 100, 100); + + offCanvas2.filter = 'invert(100%)'; + offCanvas2.drawImage(img, 100, 100, 100, 100); + + offCanvas2.filter = 'drop-shadow(8px 8px 10px green)'; + offCanvas2.drawImage(img, 200, 100, 100, 100); + + offCanvas2.filter = 'brightness(0.4)'; + offCanvas2.drawImage(img, 0, 200, 100, 100); + + offCanvas2.filter = 'opacity(25%)'; + offCanvas2.drawImage(img, 100, 200, 100, 100); + + offCanvas2.filter = 'saturate(30%)'; + offCanvas2.drawImage(img, 200, 200, 100, 100); + + offCanvas2.filter = 'sepia(60%)'; + offCanvas2.drawImage(img, 0, 300, 100, 100); + + offCanvas2.filter = 'contrast(200%)'; + offCanvas2.drawImage(img, 100, 300, 100, 100); + var bitmap = offscreen.transferToImageBitmap(); + this.ctx.transferFromImageBitmap(bitmap); + }, + linearGradient() { + var gradient = this.ctx.createLinearGradient(50, 0, 300, 100); + gradient.addColorStop(0.0, 'red'); + gradient.addColorStop(0.5, 'white'); + gradient.addColorStop(1.0, 'green'); + this.ctx.fillStyle = gradient; + this.ctx.fillRect(0, 0, 500, 500); + }, + radialGradient() { + var gradient = this.ctx.createRadialGradient(150, 150, 50, 150, 150, 150); + gradient.addColorStop(0.0, 'red'); + gradient.addColorStop(0.5, 'white'); + gradient.addColorStop(1.0, 'green'); + this.ctx.fillStyle = gradient; + this.ctx.fillRect(0, 0, 500, 500); } } -- Gitee