From bda0d522cff6dbaef484823435513bb4aee1c918 Mon Sep 17 00:00:00 2001 From: dongwei Date: Tue, 8 Mar 2022 18:14:48 +0800 Subject: [PATCH] add test cases Signed-off-by: dongwei --- .../pages/obj_CanvasGradient/prop/index.css | 16 + .../pages/obj_CanvasGradient/prop/index.hml | 21 + .../pages/obj_CanvasGradient/prop/index.js | 27 + .../obj_CanvasGradient/{ => router}/index.css | 0 .../obj_CanvasGradient/{ => router}/index.hml | 0 .../obj_CanvasGradient/{ => router}/index.js | 0 .../pages/obj_CanvasGradient/style/index.css | 0 .../pages/obj_CanvasGradient/style/index.hml | 0 .../pages/obj_CanvasGradient/style/index.js | 0 .../{ => prop}/index.css | 0 .../prop/index.hml | 119 +++++ .../prop/index.js | 222 ++++++++ .../router}/index.css | 0 .../{ => router}/index.hml | 0 .../{ => router}/index.js | 0 .../style/index.css | 0 .../style/index.hml | 0 .../style/index.js | 0 .../prop}/index.css | 0 .../js/default/pages/obj_Image/prop/index.hml | 48 ++ .../js/default/pages/obj_Image/prop/index.js | 111 ++++ .../router}/index.css | 0 .../pages/obj_Image/{ => router}/index.hml | 0 .../pages/obj_Image/{ => router}/index.js | 0 .../default/pages/obj_Image/style/index.css | 0 .../default/pages/obj_Image/style/index.hml | 0 .../js/default/pages/obj_Image/style/index.js | 0 .../prop}/index.css | 0 .../pages/obj_ImageBitmap/prop/index.hml | 35 ++ .../pages/obj_ImageBitmap/prop/index.js | 66 +++ .../router}/index.css | 0 .../obj_ImageBitmap/{ => router}/index.hml | 0 .../obj_ImageBitmap/{ => router}/index.js | 0 .../pages/obj_ImageBitmap/style/index.css | 0 .../pages/obj_ImageBitmap/style/index.hml | 0 .../pages/obj_ImageBitmap/style/index.js | 0 .../prop}/index.css | 0 .../pages/obj_ImageData/prop/index.hml | 40 ++ .../default/pages/obj_ImageData/prop/index.js | 62 +++ .../pages/obj_ImageData/router/index.css | 471 +++++++++++++++++ .../obj_ImageData/{ => router}/index.hml | 0 .../pages/obj_ImageData/{ => router}/index.js | 0 .../pages/obj_ImageData/style/index.css | 0 .../pages/obj_ImageData/style/index.hml | 0 .../pages/obj_ImageData/style/index.js | 0 .../pages/obj_OffscreenCanvas/prop/index.css | 471 +++++++++++++++++ .../pages/obj_OffscreenCanvas/prop/index.hml | 34 ++ .../pages/obj_OffscreenCanvas/prop/index.js | 58 +++ .../obj_OffscreenCanvas/router/index.css | 471 +++++++++++++++++ .../{ => router}/index.hml | 0 .../obj_OffscreenCanvas/{ => router}/index.js | 0 .../pages/obj_OffscreenCanvas/style/index.css | 0 .../pages/obj_OffscreenCanvas/style/index.hml | 0 .../pages/obj_OffscreenCanvas/style/index.js | 0 .../prop/index.css | 472 ++++++++++++++++++ .../prop/index.hml | 121 +++++ .../prop/index.js | 217 ++++++++ .../router/index.css | 471 +++++++++++++++++ .../{ => router}/index.hml | 0 .../{ => router}/index.js | 0 .../style/index.css | 0 .../style/index.hml | 0 .../style/index.js | 0 .../default/pages/obj_Path2D/prop/index.css | 16 + .../default/pages/obj_Path2D/prop/index.hml | 21 + .../js/default/pages/obj_Path2D/prop/index.js | 25 + .../default/pages/obj_Path2D/router/index.css | 471 +++++++++++++++++ .../pages/obj_Path2D/{ => router}/index.hml | 0 .../pages/obj_Path2D/{ => router}/index.js | 0 .../default/pages/obj_Path2D/style/index.css | 0 .../default/pages/obj_Path2D/style/index.hml | 0 .../default/pages/obj_Path2D/style/index.js | 0 72 files changed, 4086 insertions(+) create mode 100644 ace/ace_standard/src/main/js/default/pages/obj_CanvasGradient/prop/index.css create mode 100644 ace/ace_standard/src/main/js/default/pages/obj_CanvasGradient/prop/index.hml create mode 100644 ace/ace_standard/src/main/js/default/pages/obj_CanvasGradient/prop/index.js rename ace/ace_standard/src/main/js/default/pages/obj_CanvasGradient/{ => router}/index.css (100%) rename ace/ace_standard/src/main/js/default/pages/obj_CanvasGradient/{ => router}/index.hml (100%) rename ace/ace_standard/src/main/js/default/pages/obj_CanvasGradient/{ => router}/index.js (100%) create mode 100644 ace/ace_standard/src/main/js/default/pages/obj_CanvasGradient/style/index.css create mode 100644 ace/ace_standard/src/main/js/default/pages/obj_CanvasGradient/style/index.hml create mode 100644 ace/ace_standard/src/main/js/default/pages/obj_CanvasGradient/style/index.js rename ace/ace_standard/src/main/js/default/pages/obj_CanvasRenderingContext2D/{ => prop}/index.css (100%) create mode 100644 ace/ace_standard/src/main/js/default/pages/obj_CanvasRenderingContext2D/prop/index.hml create mode 100644 ace/ace_standard/src/main/js/default/pages/obj_CanvasRenderingContext2D/prop/index.js rename ace/ace_standard/src/main/js/default/pages/{obj_Image => obj_CanvasRenderingContext2D/router}/index.css (100%) rename ace/ace_standard/src/main/js/default/pages/obj_CanvasRenderingContext2D/{ => router}/index.hml (100%) rename ace/ace_standard/src/main/js/default/pages/obj_CanvasRenderingContext2D/{ => router}/index.js (100%) create mode 100644 ace/ace_standard/src/main/js/default/pages/obj_CanvasRenderingContext2D/style/index.css create mode 100644 ace/ace_standard/src/main/js/default/pages/obj_CanvasRenderingContext2D/style/index.hml create mode 100644 ace/ace_standard/src/main/js/default/pages/obj_CanvasRenderingContext2D/style/index.js rename ace/ace_standard/src/main/js/default/pages/{obj_ImageBitmap => obj_Image/prop}/index.css (100%) create mode 100644 ace/ace_standard/src/main/js/default/pages/obj_Image/prop/index.hml create mode 100644 ace/ace_standard/src/main/js/default/pages/obj_Image/prop/index.js rename ace/ace_standard/src/main/js/default/pages/{obj_ImageData => obj_Image/router}/index.css (100%) rename ace/ace_standard/src/main/js/default/pages/obj_Image/{ => router}/index.hml (100%) rename ace/ace_standard/src/main/js/default/pages/obj_Image/{ => router}/index.js (100%) create mode 100644 ace/ace_standard/src/main/js/default/pages/obj_Image/style/index.css create mode 100644 ace/ace_standard/src/main/js/default/pages/obj_Image/style/index.hml create mode 100644 ace/ace_standard/src/main/js/default/pages/obj_Image/style/index.js rename ace/ace_standard/src/main/js/default/pages/{obj_OffscreenCanvas => obj_ImageBitmap/prop}/index.css (100%) create mode 100644 ace/ace_standard/src/main/js/default/pages/obj_ImageBitmap/prop/index.hml create mode 100644 ace/ace_standard/src/main/js/default/pages/obj_ImageBitmap/prop/index.js rename ace/ace_standard/src/main/js/default/pages/{obj_OffscreenCanvasRenderingContext2D => obj_ImageBitmap/router}/index.css (100%) rename ace/ace_standard/src/main/js/default/pages/obj_ImageBitmap/{ => router}/index.hml (100%) rename ace/ace_standard/src/main/js/default/pages/obj_ImageBitmap/{ => router}/index.js (100%) create mode 100644 ace/ace_standard/src/main/js/default/pages/obj_ImageBitmap/style/index.css create mode 100644 ace/ace_standard/src/main/js/default/pages/obj_ImageBitmap/style/index.hml create mode 100644 ace/ace_standard/src/main/js/default/pages/obj_ImageBitmap/style/index.js rename ace/ace_standard/src/main/js/default/pages/{obj_Path2D => obj_ImageData/prop}/index.css (100%) create mode 100644 ace/ace_standard/src/main/js/default/pages/obj_ImageData/prop/index.hml create mode 100644 ace/ace_standard/src/main/js/default/pages/obj_ImageData/prop/index.js create mode 100644 ace/ace_standard/src/main/js/default/pages/obj_ImageData/router/index.css rename ace/ace_standard/src/main/js/default/pages/obj_ImageData/{ => router}/index.hml (100%) rename ace/ace_standard/src/main/js/default/pages/obj_ImageData/{ => router}/index.js (100%) create mode 100644 ace/ace_standard/src/main/js/default/pages/obj_ImageData/style/index.css create mode 100644 ace/ace_standard/src/main/js/default/pages/obj_ImageData/style/index.hml create mode 100644 ace/ace_standard/src/main/js/default/pages/obj_ImageData/style/index.js create mode 100644 ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/prop/index.css create mode 100644 ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/prop/index.hml create mode 100644 ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/prop/index.js create mode 100644 ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/router/index.css rename ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/{ => router}/index.hml (100%) rename ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/{ => router}/index.js (100%) create mode 100644 ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/style/index.css create mode 100644 ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/style/index.hml create mode 100644 ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/style/index.js create mode 100644 ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/prop/index.css create mode 100644 ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/prop/index.hml create mode 100644 ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/prop/index.js create mode 100644 ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/router/index.css rename ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/{ => router}/index.hml (100%) rename ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/{ => router}/index.js (100%) create mode 100644 ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/style/index.css create mode 100644 ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/style/index.hml create mode 100644 ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/style/index.js create mode 100644 ace/ace_standard/src/main/js/default/pages/obj_Path2D/prop/index.css create mode 100644 ace/ace_standard/src/main/js/default/pages/obj_Path2D/prop/index.hml create mode 100644 ace/ace_standard/src/main/js/default/pages/obj_Path2D/prop/index.js create mode 100644 ace/ace_standard/src/main/js/default/pages/obj_Path2D/router/index.css rename ace/ace_standard/src/main/js/default/pages/obj_Path2D/{ => router}/index.hml (100%) rename ace/ace_standard/src/main/js/default/pages/obj_Path2D/{ => router}/index.js (100%) create mode 100644 ace/ace_standard/src/main/js/default/pages/obj_Path2D/style/index.css create mode 100644 ace/ace_standard/src/main/js/default/pages/obj_Path2D/style/index.hml create mode 100644 ace/ace_standard/src/main/js/default/pages/obj_Path2D/style/index.js diff --git a/ace/ace_standard/src/main/js/default/pages/obj_CanvasGradient/prop/index.css b/ace/ace_standard/src/main/js/default/pages/obj_CanvasGradient/prop/index.css new file mode 100644 index 000000000..5019c1e3c --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_CanvasGradient/prop/index.css @@ -0,0 +1,16 @@ +/** + * Copyright (c) 2022 Shenzhen kaiHong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/* xxx.css */ \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/obj_CanvasGradient/prop/index.hml b/ace/ace_standard/src/main/js/default/pages/obj_CanvasGradient/prop/index.hml new file mode 100644 index 000000000..20298bff1 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_CanvasGradient/prop/index.hml @@ -0,0 +1,21 @@ + + +
+
+ +
+ +
diff --git a/ace/ace_standard/src/main/js/default/pages/obj_CanvasGradient/prop/index.js b/ace/ace_standard/src/main/js/default/pages/obj_CanvasGradient/prop/index.js new file mode 100644 index 000000000..a8659a609 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_CanvasGradient/prop/index.js @@ -0,0 +1,27 @@ +/** + * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import prompt from '@system.prompt'; +export default { + data:{ + + }, + onShow() { + }, + functionTest() { + + }, + +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/obj_CanvasGradient/index.css b/ace/ace_standard/src/main/js/default/pages/obj_CanvasGradient/router/index.css similarity index 100% rename from ace/ace_standard/src/main/js/default/pages/obj_CanvasGradient/index.css rename to ace/ace_standard/src/main/js/default/pages/obj_CanvasGradient/router/index.css diff --git a/ace/ace_standard/src/main/js/default/pages/obj_CanvasGradient/index.hml b/ace/ace_standard/src/main/js/default/pages/obj_CanvasGradient/router/index.hml similarity index 100% rename from ace/ace_standard/src/main/js/default/pages/obj_CanvasGradient/index.hml rename to ace/ace_standard/src/main/js/default/pages/obj_CanvasGradient/router/index.hml diff --git a/ace/ace_standard/src/main/js/default/pages/obj_CanvasGradient/index.js b/ace/ace_standard/src/main/js/default/pages/obj_CanvasGradient/router/index.js similarity index 100% rename from ace/ace_standard/src/main/js/default/pages/obj_CanvasGradient/index.js rename to ace/ace_standard/src/main/js/default/pages/obj_CanvasGradient/router/index.js diff --git a/ace/ace_standard/src/main/js/default/pages/obj_CanvasGradient/style/index.css b/ace/ace_standard/src/main/js/default/pages/obj_CanvasGradient/style/index.css new file mode 100644 index 000000000..e69de29bb diff --git a/ace/ace_standard/src/main/js/default/pages/obj_CanvasGradient/style/index.hml b/ace/ace_standard/src/main/js/default/pages/obj_CanvasGradient/style/index.hml new file mode 100644 index 000000000..e69de29bb diff --git a/ace/ace_standard/src/main/js/default/pages/obj_CanvasGradient/style/index.js b/ace/ace_standard/src/main/js/default/pages/obj_CanvasGradient/style/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/ace/ace_standard/src/main/js/default/pages/obj_CanvasRenderingContext2D/index.css b/ace/ace_standard/src/main/js/default/pages/obj_CanvasRenderingContext2D/prop/index.css similarity index 100% rename from ace/ace_standard/src/main/js/default/pages/obj_CanvasRenderingContext2D/index.css rename to ace/ace_standard/src/main/js/default/pages/obj_CanvasRenderingContext2D/prop/index.css diff --git a/ace/ace_standard/src/main/js/default/pages/obj_CanvasRenderingContext2D/prop/index.hml b/ace/ace_standard/src/main/js/default/pages/obj_CanvasRenderingContext2D/prop/index.hml new file mode 100644 index 000000000..8dd924a82 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_CanvasRenderingContext2D/prop/index.hml @@ -0,0 +1,119 @@ + + +
+
+
+ + CanvasRenderingContext2D对象的通用属性 + + + 通用属性 -- fillStyle + + + + + 通用属性 -- lineWidth + + + + + 通用属性 -- lineCap + + + + + 通用属性 -- lineJoin + + + + + 通用属性 -- miterLimit + + + + + 通用属性 -- font + + + + + 通用属性 -- globalAlpha + + + + + 通用属性 -- lineDashOffset + + + + + 通用属性 -- globalCompositeOperation + + + +
+
+ + + + +
+
+ + 通用属性 -- shadowBlur + + + + + 通用属性 -- shadowColor + + + + + 通用属性 -- shadowOffsetX + + + + + 通用属性 -- shadowOffsetY + + + + + 通用属性 -- imageSmoothingEnabled + + + + + + 通用属性 -- strokeStyle + + + + + 通用属性 -- textAlign + + + + + 通用属性 -- textBaseline + + + + +
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/obj_CanvasRenderingContext2D/prop/index.js b/ace/ace_standard/src/main/js/default/pages/obj_CanvasRenderingContext2D/prop/index.js new file mode 100644 index 000000000..325de29e0 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_CanvasRenderingContext2D/prop/index.js @@ -0,0 +1,222 @@ +/** + * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import prompt from '@system.prompt'; +export default { + data:{ + left:0, + top:0, + }, + onShow(){ + // 屬性 + this.props1() + this.props2() + this.props3() + this.props4() + this.props5() + this.props6() + this.props7() + this.props8() + this.props9() + this.props10() + this.props11() + this.props12() + this.props13() + this.props14() + this.props15() + this.props16() + this.props17() + + }, + props1() { + const el = this.$refs.canvas1; + const ctx = el.getContext('2d'); + ctx.fillStyle = '#0000ff'; + ctx.fillRect(0, 0, 100, 30); + }, + props2() { + const el = this.$refs.canvas2; + const ctx = el.getContext('2d'); + ctx.lineWidth = 10; + ctx.lineCap = 'round'; + ctx.strokeRect(0, 0, 100, 30); + }, + props3() { + const el = this.$refs.canvas3; + const ctx = el.getContext('2d'); + ctx.lineWidth = 8; + ctx.beginPath(); + ctx.lineCap = 'round'; + ctx.moveTo(10, 10); + ctx.lineTo(100, 10); + ctx.stroke(); + }, + props4() { + const el = this.$refs.canvas4; + const ctx = el.getContext('2d'); + ctx.beginPath(); + ctx.lineWidth = 5; + ctx.lineJoin = 'miter'; + ctx.moveTo(10, 10); + ctx.lineTo(80, 30); + ctx.lineTo(10, 50); + ctx.stroke(); + }, + props5() { + const el =this.$refs.canvas5; + const ctx = el.getContext('2d'); + ctx.lineWidth = 5; + ctx.lineJoin = 'miter'; + ctx.miterLimit = 3; + ctx.moveTo(10, 10); + ctx.lineTo(60, 15); + ctx.lineTo(10, 40); + ctx.stroke(); + }, + props6() { + const el =this.$refs.canvas6; + const ctx = el.getContext('2d'); + ctx.font = '20px sans-serif'; + ctx.fillText("Hello World", 10, 20); + }, + props7() { + const el =this.$refs.canvas7; + const ctx = el.getContext('2d'); + ctx.fillStyle = 'rgb(255,0,0)'; + ctx.fillRect(0, 0, 40, 40); + ctx.globalAlpha = 0.4; + ctx.fillStyle = 'rgb(0,0,255)'; + ctx.fillRect(40, 40, 40, 40); + + }, + props8() { + const el =this.$refs.canvas8; + const ctx = el.getContext('2d'); + ctx.arc(50, 40, 30, 0, 6.28); + ctx.setLineDash([10,20]); + ctx.lineDashOffset = 10.0; + ctx.stroke(); + }, + props9() { + const el =this.$refs.canvas9; + const ctx = el.getContext('2d'); + ctx.fillStyle = 'rgb(255,0,0)'; + ctx.fillRect(10, 10, 30, 30); + ctx.globalCompositeOperation = 'source-over'; + ctx.fillStyle = 'rgb(0,0,255)'; + ctx.fillRect(25, 25, 30, 30); + // Start drawing second example + ctx.fillStyle = 'rgb(255,0,0)'; + ctx.fillRect(70, 10, 30, 30); + ctx.globalCompositeOperation = 'destination-over'; + ctx.fillStyle = 'rgb(0,0,255)'; + ctx.fillRect(85, 25, 30, 30); + }, + props10() { + const el =this.$refs.canvas10; + const ctx = el.getContext('2d'); + ctx.shadowBlur = 20; + ctx.shadowColor = 'rgb(0,0,0)'; + ctx.fillStyle = 'rgb(255,0,0)'; + ctx.fillRect(10, 10, 70, 40); + }, + props11() { + const el =this.$refs.canvas11; + const ctx = el.getContext('2d'); + ctx.shadowBlur = 20; + ctx.shadowColor = 'rgb(0,0,255)'; + ctx.fillStyle = 'rgb(255,0,0)'; + ctx.fillRect(10, 10, 70, 40); + }, + props12() { + const el =this.$refs.canvas12; + const ctx = el.getContext('2d'); + ctx.shadowBlur = 10; + ctx.shadowOffsetX = 20; + ctx.shadowColor = 'rgb(0,0,0)'; + ctx.fillStyle = 'rgb(255,0,0)'; + ctx.fillRect(10, 0, 70, 40); + }, + props13() { + const el =this.$refs.canvas13; + const ctx = el.getContext('2d'); + ctx.shadowBlur = 10; + ctx.shadowOffsetY = 20; + ctx.shadowColor = 'rgb(0,0,0)'; + ctx.fillStyle = 'rgb(255,0,0)'; + ctx.fillRect(10, 0, 70, 40); + }, + props14() { + const el =this.$refs.canvas14; + const ctx = el.getContext('2d'); + var img = new Image(); + img.src = 'common/images/image.png'; + img.onload = function() { + ctx.imageSmoothingEnabled = false; + ctx.drawImage(img, 10, 0, 100, 60); + }; + }, + props15() { + const el =this.$refs.canvas15; + const ctx = el.getContext('2d'); + ctx.lineWidth = 10; + ctx.strokeStyle = '#0000ff'; + ctx.strokeRect(0, 0, 100, 30); + }, + props16() { + const el =this.$refs.canvas16; + const ctx = el.getContext('2d'); + ctx.strokeStyle = '#0000ff'; + ctx.moveTo(80, 0); + ctx.lineTo(80, 160); + ctx.stroke(); + + ctx.font = '12px sans-serif'; + + // Show the different textAlign values + ctx.textAlign = 'start'; + ctx.fillText('textAlign=start', 80, 20); + ctx.textAlign = 'end'; + ctx.fillText('textAlign=end', 80, 30); + ctx.textAlign = 'left'; + ctx.fillText('textAlign=left', 80, 40); + ctx.textAlign = 'center'; + ctx.fillText('textAlign=center',80, 50); + ctx.textAlign = 'right'; + ctx.fillText('textAlign=right',80, 60); + }, + props17() { + const el =this.$refs.canvas17; + const ctx = el.getContext('2d'); + ctx.strokeStyle = '#0000ff'; + ctx.moveTo(0, 30); + ctx.lineTo(200, 30); + ctx.stroke(); + + ctx.font = '10px sans-serif'; + + ctx.textBaseline = 'top'; + ctx.fillText('Top', 0, 30); + ctx.textBaseline = 'bottom'; + ctx.fillText('Bottom', 20, 30); + ctx.textBaseline = 'middle'; + ctx.fillText('Middle', 55, 30); + ctx.textBaseline = 'alphabetic'; + ctx.fillText('Alphabetic', 90, 30); + ctx.textBaseline = 'hanging'; + ctx.fillText('Hanging', 140, 30); + } + +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/obj_Image/index.css b/ace/ace_standard/src/main/js/default/pages/obj_CanvasRenderingContext2D/router/index.css similarity index 100% rename from ace/ace_standard/src/main/js/default/pages/obj_Image/index.css rename to ace/ace_standard/src/main/js/default/pages/obj_CanvasRenderingContext2D/router/index.css diff --git a/ace/ace_standard/src/main/js/default/pages/obj_CanvasRenderingContext2D/index.hml b/ace/ace_standard/src/main/js/default/pages/obj_CanvasRenderingContext2D/router/index.hml similarity index 100% rename from ace/ace_standard/src/main/js/default/pages/obj_CanvasRenderingContext2D/index.hml rename to ace/ace_standard/src/main/js/default/pages/obj_CanvasRenderingContext2D/router/index.hml diff --git a/ace/ace_standard/src/main/js/default/pages/obj_CanvasRenderingContext2D/index.js b/ace/ace_standard/src/main/js/default/pages/obj_CanvasRenderingContext2D/router/index.js similarity index 100% rename from ace/ace_standard/src/main/js/default/pages/obj_CanvasRenderingContext2D/index.js rename to ace/ace_standard/src/main/js/default/pages/obj_CanvasRenderingContext2D/router/index.js diff --git a/ace/ace_standard/src/main/js/default/pages/obj_CanvasRenderingContext2D/style/index.css b/ace/ace_standard/src/main/js/default/pages/obj_CanvasRenderingContext2D/style/index.css new file mode 100644 index 000000000..e69de29bb diff --git a/ace/ace_standard/src/main/js/default/pages/obj_CanvasRenderingContext2D/style/index.hml b/ace/ace_standard/src/main/js/default/pages/obj_CanvasRenderingContext2D/style/index.hml new file mode 100644 index 000000000..e69de29bb diff --git a/ace/ace_standard/src/main/js/default/pages/obj_CanvasRenderingContext2D/style/index.js b/ace/ace_standard/src/main/js/default/pages/obj_CanvasRenderingContext2D/style/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/ace/ace_standard/src/main/js/default/pages/obj_ImageBitmap/index.css b/ace/ace_standard/src/main/js/default/pages/obj_Image/prop/index.css similarity index 100% rename from ace/ace_standard/src/main/js/default/pages/obj_ImageBitmap/index.css rename to ace/ace_standard/src/main/js/default/pages/obj_Image/prop/index.css diff --git a/ace/ace_standard/src/main/js/default/pages/obj_Image/prop/index.hml b/ace/ace_standard/src/main/js/default/pages/obj_Image/prop/index.hml new file mode 100644 index 000000000..1e218f4ce --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_Image/prop/index.hml @@ -0,0 +1,48 @@ + + +
+
+ + Image对象的属性 + + + 属性 -- src + + + + + 属性 -- width + + + + + 属性 -- height + + + + + 属性 -- onload + + + + + 属性 -- onerror + + + +
+ +
diff --git a/ace/ace_standard/src/main/js/default/pages/obj_Image/prop/index.js b/ace/ace_standard/src/main/js/default/pages/obj_Image/prop/index.js new file mode 100644 index 000000000..063a2a302 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_Image/prop/index.js @@ -0,0 +1,111 @@ +/** + * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import prompt from '@system.prompt'; +export default { + data:{ + left:0, + top:0, + }, + onShow(){ + // 屬性 + this.props1() + this.props2() + this.props3() + this.props4() + this.props5() + }, + props1() { + const el =this.$refs.canvas1 + var ctx = el.getContext('2d'); + var img = new Image(); + img.src = 'common/images/image.png'; + img.onload = function() { + console.log('Image load success'); + ctx.drawImage(img, 0, 0, 300, 100); + prompt.showToast({ + message: 'Image load success: width=' + img.width + ',height=' + img.height + }); + }; + img.onerror = function() { + console.log('Image load fail'); + }; + }, + props2() { + const el =this.$refs.canvas2 + var ctx = el.getContext('2d'); + var img = new Image(); + img.src = 'common/images/image.png'; + img.onload = function() { + console.log('Image load success'); + ctx.drawImage(img, 0, 0, 200, 100); + prompt.showToast({ + message: 'Image load success: width=' + img.width + ',height=' + img.height + }); + }; + img.onerror = function() { + console.log('Image load fail'); + }; + }, + props3() { + const el =this.$refs.canvas3 + var ctx = el.getContext('2d'); + var img = new Image(); + img.src = 'common/images/image.png'; + img.onload = function() { + console.log('Image load success'); + ctx.drawImage(img, 0, 0, 300, 50); + prompt.showToast({ + message: 'Image load success: width=' + img.width + ',height=' + img.height + }); + }; + img.onerror = function() { + console.log('Image load fail'); + }; + }, + props4() { + const el =this.$refs.canvas4 + var ctx = el.getContext('2d'); + var img = new Image(); + img.src = 'common/images/image.png'; + img.onload = function() { + console.log('Image load success'); + ctx.drawImage(img, 0, 0, 300, 100); + prompt.showToast({ + message: 'onload: Image load success: width=' + img.width + ',height=' + img.height + }); + }; + img.onerror = function() { + console.log('Image load fail'); + }; + }, + props5() { + const el =this.$refs.canvas5 + var ctx = el.getContext('2d'); + var img = new Image(); + img.src = 'common/images/image.png'; + img.onload = function() { + console.log('Image load success'); + ctx.drawImage(img, 0, 0, 300, 100); + prompt.showToast({ + message: 'Image load success: width=' + img.width + ',height=' + img.height + }); + }; + img.onerror = function() { + console.log('onerror: Image load fail'); + }; + }, + +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/obj_ImageData/index.css b/ace/ace_standard/src/main/js/default/pages/obj_Image/router/index.css similarity index 100% rename from ace/ace_standard/src/main/js/default/pages/obj_ImageData/index.css rename to ace/ace_standard/src/main/js/default/pages/obj_Image/router/index.css diff --git a/ace/ace_standard/src/main/js/default/pages/obj_Image/index.hml b/ace/ace_standard/src/main/js/default/pages/obj_Image/router/index.hml similarity index 100% rename from ace/ace_standard/src/main/js/default/pages/obj_Image/index.hml rename to ace/ace_standard/src/main/js/default/pages/obj_Image/router/index.hml diff --git a/ace/ace_standard/src/main/js/default/pages/obj_Image/index.js b/ace/ace_standard/src/main/js/default/pages/obj_Image/router/index.js similarity index 100% rename from ace/ace_standard/src/main/js/default/pages/obj_Image/index.js rename to ace/ace_standard/src/main/js/default/pages/obj_Image/router/index.js diff --git a/ace/ace_standard/src/main/js/default/pages/obj_Image/style/index.css b/ace/ace_standard/src/main/js/default/pages/obj_Image/style/index.css new file mode 100644 index 000000000..e69de29bb diff --git a/ace/ace_standard/src/main/js/default/pages/obj_Image/style/index.hml b/ace/ace_standard/src/main/js/default/pages/obj_Image/style/index.hml new file mode 100644 index 000000000..e69de29bb diff --git a/ace/ace_standard/src/main/js/default/pages/obj_Image/style/index.js b/ace/ace_standard/src/main/js/default/pages/obj_Image/style/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/index.css b/ace/ace_standard/src/main/js/default/pages/obj_ImageBitmap/prop/index.css similarity index 100% rename from ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/index.css rename to ace/ace_standard/src/main/js/default/pages/obj_ImageBitmap/prop/index.css diff --git a/ace/ace_standard/src/main/js/default/pages/obj_ImageBitmap/prop/index.hml b/ace/ace_standard/src/main/js/default/pages/obj_ImageBitmap/prop/index.hml new file mode 100644 index 000000000..37dbbadc4 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_ImageBitmap/prop/index.hml @@ -0,0 +1,35 @@ + + +
+
+
+ + ImageBitmap对象的属性 + + + 属性 -- width + + + + + 属性 -- height + + + +
+
+ +
diff --git a/ace/ace_standard/src/main/js/default/pages/obj_ImageBitmap/prop/index.js b/ace/ace_standard/src/main/js/default/pages/obj_ImageBitmap/prop/index.js new file mode 100644 index 000000000..474963942 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_ImageBitmap/prop/index.js @@ -0,0 +1,66 @@ +/** + * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import prompt from '@system.prompt'; +export default { + data:{ + left:0, + top:0, + }, + onShow(){ + // 屬性 + this.props1() + this.props2() + }, + props1() { + const canvas =this.$refs.canvas1 + var ctx = canvas.getContext('2d'); + var offscreen = new OffscreenCanvas(200,200); + var offscreenCanvasCtx = offscreen.getContext("2d"); + + offscreenCanvasCtx.rect(10, 10, 150, 100); + offscreenCanvasCtx.stroke(); + this.textValue2 = offscreenCanvasCtx.isPointInStroke(20, 10); + + var bitmap = offscreen.transferToImageBitmap(); + ctx.transferFromImageBitmap(bitmap); + + prompt.showToast({ + message: 'function1 ImageBitmap:\n' + JSON.stringify(bitmap) + ',width:'+bitmap.width, + duration: 3000 + }); + console.log(bitmap.width) + }, + props2() { + const canvas =this.$refs.canvas2 + var ctx = canvas.getContext('2d'); + var offscreen = new OffscreenCanvas(200,200); + var offscreenCanvasCtx = offscreen.getContext("2d"); + + offscreenCanvasCtx.rect(10, 10, 100, 150); + offscreenCanvasCtx.stroke(); + this.textValue2 = offscreenCanvasCtx.isPointInStroke(20, 10); + + var bitmap = offscreen.transferToImageBitmap(); + ctx.transferFromImageBitmap(bitmap); + + prompt.showToast({ + message: 'function1 ImageBitmap:\n' + JSON.stringify(bitmap) + ',width:'+bitmap.height, + duration: 3000 + }); + console.log(bitmap.height) + }, + +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/index.css b/ace/ace_standard/src/main/js/default/pages/obj_ImageBitmap/router/index.css similarity index 100% rename from ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/index.css rename to ace/ace_standard/src/main/js/default/pages/obj_ImageBitmap/router/index.css diff --git a/ace/ace_standard/src/main/js/default/pages/obj_ImageBitmap/index.hml b/ace/ace_standard/src/main/js/default/pages/obj_ImageBitmap/router/index.hml similarity index 100% rename from ace/ace_standard/src/main/js/default/pages/obj_ImageBitmap/index.hml rename to ace/ace_standard/src/main/js/default/pages/obj_ImageBitmap/router/index.hml diff --git a/ace/ace_standard/src/main/js/default/pages/obj_ImageBitmap/index.js b/ace/ace_standard/src/main/js/default/pages/obj_ImageBitmap/router/index.js similarity index 100% rename from ace/ace_standard/src/main/js/default/pages/obj_ImageBitmap/index.js rename to ace/ace_standard/src/main/js/default/pages/obj_ImageBitmap/router/index.js diff --git a/ace/ace_standard/src/main/js/default/pages/obj_ImageBitmap/style/index.css b/ace/ace_standard/src/main/js/default/pages/obj_ImageBitmap/style/index.css new file mode 100644 index 000000000..e69de29bb diff --git a/ace/ace_standard/src/main/js/default/pages/obj_ImageBitmap/style/index.hml b/ace/ace_standard/src/main/js/default/pages/obj_ImageBitmap/style/index.hml new file mode 100644 index 000000000..e69de29bb diff --git a/ace/ace_standard/src/main/js/default/pages/obj_ImageBitmap/style/index.js b/ace/ace_standard/src/main/js/default/pages/obj_ImageBitmap/style/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/ace/ace_standard/src/main/js/default/pages/obj_Path2D/index.css b/ace/ace_standard/src/main/js/default/pages/obj_ImageData/prop/index.css similarity index 100% rename from ace/ace_standard/src/main/js/default/pages/obj_Path2D/index.css rename to ace/ace_standard/src/main/js/default/pages/obj_ImageData/prop/index.css diff --git a/ace/ace_standard/src/main/js/default/pages/obj_ImageData/prop/index.hml b/ace/ace_standard/src/main/js/default/pages/obj_ImageData/prop/index.hml new file mode 100644 index 000000000..5818acf87 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_ImageData/prop/index.hml @@ -0,0 +1,40 @@ + + +
+
+
+ + ImageData对象的属性 + + + 属性 -- width + + + + + 属性 -- height + + + + + 属性 -- data + + + +
+
+ +
diff --git a/ace/ace_standard/src/main/js/default/pages/obj_ImageData/prop/index.js b/ace/ace_standard/src/main/js/default/pages/obj_ImageData/prop/index.js new file mode 100644 index 000000000..c8374177e --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_ImageData/prop/index.js @@ -0,0 +1,62 @@ +/** + * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import prompt from '@system.prompt'; +export default { + data:{ + left:0, + top:0, + }, + onShow(){ + // 屬性 + this.props1() + this.props2() + this.props3() + }, + props1() { + const el =this.$refs.canvas1; + const ctx = el.getContext('2d'); + ctx.fillRect(0,0,150,100) + var imageData = ctx.createImageData(2,1) + prompt.showToast({ + message:JSON.stringify(imageData)+',width:' +imageData.width, + duration:5000 + }) + console.log(imageData.width) + }, + props2() { + const el =this.$refs.canvas2; + const ctx = el.getContext('2d'); + ctx.fillRect(0,0,100,150) + var imageData = ctx.createImageData(1,2) + prompt.showToast({ + message:JSON.stringify(imageData)+',width:' +imageData.height, + duration:5000 + }) + console.log(imageData.height) + }, + props3() { + const el =this.$refs.canvas3; + const ctx = el.getContext('2d'); + ctx.fillRect(0,0,100,100) + var imageData = ctx.createImageData(1,1) + prompt.showToast({ + message:JSON.stringify(imageData), + duration:5000 + }) + console.log(imageData.data) + }, + +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/obj_ImageData/router/index.css b/ace/ace_standard/src/main/js/default/pages/obj_ImageData/router/index.css new file mode 100644 index 000000000..ac9c500c4 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_ImageData/router/index.css @@ -0,0 +1,471 @@ +/** + * Copyright (c) 2022 Shenzhen kaiHong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/* xxx.css */ +.container { + flex-direction:row; + width:100%; + height:100%; + padding: 1px; +} + +.prop_all-container { + flex-direction: row; + height: 100%; + flex-weight: 1; +} + +.sub-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.style-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.title{ + width: 100%; + font-size: 18px; + margin: 2px; + padding: 2px; + font-weight: bold; + text-align: center; +} + +.sub-title{ + width: 100%; + font-size: 14px; + text-align: left; + margin: 2px; + padding: 2px; +} + +.style1{ + width: 100%; + height: 100%; + min-width: 25px; + min-height: 10px; + max-width: 300px; + max-height: 50px; + padding-left: 10px; + padding-top: 20px; + padding-right: 15px; + padding-bottom: 5px; + margin-left: 10px; + margin-top: 20px; + margin-right: 15px; + margin-bottom: 5px; + border-left-style: solid; + border-right-style: dashed; + border-top-style: dashed; + border-bottom-style: dotted; + border-left-width: 1px; + border-right-width: 2px; + border-top-width: 2px; + border-bottom-width: 1px; + border-left-color: #ff0000; + border-right-color: #00ff00; + border-top-color: #0000ff; + border-bottom-color: #fff000; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 15px; + border-top-left-radius: 8px; + border-top-right-radius: 12px; + background: linear-gradient(pink,#fff000); + box-shadow: 2px 4px 6px 8px #888888; + opacity: 0.5; + display: flex; + visibility: visible; + align-self: center; + image-fill: #000fff; + clip-path: margin-box; +} + +.style2{ + width: 50px; + height: 20px; + padding-start: 10px; + padding-end: 15px; + margin-start: 5px; + margin-end: 10px; + border-style: dotted; + border-width: 2px; + border-color:#000000; + border-radius:5px; + background-color:#ffaa00; + mask-image: url('common/images/icon.png'); + mask-size: cover; + mask-position: center; + +} + +.style3{ + width: 100%; + padding: 10px; + margin: 5px; + border-left: 1px solid #000000; + border-right: 2px dashed #00ff00; + border-top: 1.5px dotted #0000ff; + border-bottom: 2.5px dotted #fff000; + background-image:url('common/images/bg-tv.jpg'); + background-size:cover; + background-repeat: repeat-x; + background-position: center; + flex:1; + flex-grow: 2; + flex-basis: 10px; + flex-shrink: 1; +} + +.style4{ + width: 60%; + height: 5%; + padding: 10px; + margin: 5px; + border: 2px solid #000000; +} + +.contain1{ + width: 100%; + height: 70px; + flex-direction: column; +} + +.style5{ + width: 50%; + height: 30px; + background-color: yellow; + border-image-source: url('/common/images/image.png'); + border-image-slice: 1px 2px 3px 4px; + border-image-width: 2px 3px 4px 5px; + border-image-outset: 3px 4px 5px 6px; + border-image-repeat: repeat; +} + +.style6{ + width: 70px; + height: 30px; + position: absolute; + left: 10px; + top: 35px; + bottom: 5px; + right: 10px; + background-color: pink; + border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round; +} + +.prop-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.prop1 { + color: #ad4e2a; + height: 30px; + background-color: mediumslateblue; + width: 100%; + margin: 5px; +} + +.prop2 { + color: #343524; + height: 30px; + background-color: pink; + width: 100%; + margin: 5px; +} + +.prop3 { + color: #456345; + height: 30px; + background-color: darkseagreen; + width: 100%; + margin: 5px; +} + +.prop5 { + color: #831834; + stroke-width: 40px; + line-cap: square; + margin: 5px; + height: 70px; +} + +.ani-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.ani1{ + color: #72ac33; + stroke-width: 55px; + line-cap: square; + margin: 5px; + transform-origin: 0% 0%; + animation: ani1Go 3s infinite; +} + +@keyframes ani1Go +{ + from { + background-color: #f76160; + opacity:0.3; + width:50px; + height: 50px; + transform:translate(20px) rotate(10deg) scale(0.2) skew(40deg); + background-position:10% 10% + } + 30% { + background-color: #60f761; + opacity:0.5; + width:70px; + height: 70px; + background-position:12% 12%; + transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) skewX(25deg) skewY(15deg) + } + to { + background-color: #6160f7; + opacity:1; + width:90px; + height: 90px; + background-position:22% 22%; + transform:rotate(180deg) scale(2) + } +} + + +.ani2{ + color: #ad4e2a; + width: 55px; + height: 55px; + margin: 5px; + transform-origin: 2% 3%; + animation-name:ani2Go; + animation-delay:5s; + animation-duration:10s; + animation-iteration-count:4; + animation-timing-function:ease-out; + animation-direction:reverse; + animation-fill-mode:forwards; + animation-play-state:running; + transition:all 0 ease 0; +} + +@keyframes ani2Go +{ + from { + background-color: #f76160; + opacity:0.3; + width:50px; + height: 50px; + background-position:10% 10% + } + 30% { + background-color: #60f761; + opacity:0.5; + width:70px; + height: 70px; + background-position:12% 12%; + transform:translateX(10px) translateY(5px) translateZ(15px) + rotateX(20deg) rotateY(25deg) rotateZ(15deg) scaleX(0.6) scaleY(0.5) scaleZ(1.5) perspective(10); + } + to { + background-color: #6160f7; + opacity:1; + width:90px; + height: 90px; + background-position:22% 22%; + transform:translateX(30px) translateY(45px) translateZ(55px) + rotateX(180deg) rotateY(185deg) rotateZ(150deg) scaleX(2) scaleY(2.5) scaleZ(3.5); + } +} + +.gradient-container{ + flex-direction: column; +} + +.gradient1{ + width: 100%; + height: 20px; + margin: 5px; + background: linear-gradient(red, #00ff00); +} + +.gradient2{ + width: 100%; + height: 20px; + margin: 5px; + background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0)); +} + +.gradient3{ + width: 100%; + height: 20px; + margin: 5px; + background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%); +} + +.gradient4{ + width: 100%; + height: 20px; + margin: 5px; + background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px); +} + +.atom-container{ + flex-direction: column; +} + +.multiMode-container{ + flex-direction: column; +} + +.multiMode1{ + background-color: #978666; + width: 100%; + height: 30px; + margin: 5px; +} +.flex-box { + justify-content: space-around; + align-items: center; + height: 50px; + background-color: #ffffff; +} +.flex-item { + width: 20px; + height: 20px; + border-radius: 16px; +} +.color-primary { + background-color: mediumpurple; +} +.color-warning { + background-color: pink; +} +.color-success { + background-color: cornflowerblue; +} +.dragContent{ + width: 60px; + height: 60px; + background-color: red; +} +.flex-box2 { + justify-content: space-around; + align-items: center; + flex-wrap: wrap; + height: 100px; + background-color: #ffffff; +} +.common { + background-color: #ffffff; + align-items: center; + justify-content: center; +} +.grid-parent { + display: grid; + grid-template-columns: 20% 20%; + grid-columns-gap: 14px; + grid-rows-gap: 4px; + grid-template-rows: 15% 15%; +} +.grid-child { + width: 100%; +/* height: 100%;*/ + border-radius: 2px; +} +.grid-left-top { + width: 20px; + height: 20px; + border-radius: 10px; + border: 1px solid plum; + background: linear-gradient(pink, purple); + box-shadow: 0px 0px 1px 1px pink; + grid-row-start: 0; + grid-column-start: 0; + grid-row-end: 0; + grid-column-end: 0; +} +.grid-left-bottom { + width: 20px; + height: 20px; + border-radius: 5px; + border: 1px solid plum; + background: linear-gradient(pink, #00aaee); + box-shadow: 0px 0px 1px 1px pink; + grid-row-start: 1; + grid-column-start: 0; + grid-row-end: 1; + grid-column-end: 0; +} +.grid-right-top { + width: 20px; + height: 20px; + border-radius: 3px; + border: 1px dotted plum; + background: linear-gradient(mediumpurple, #00aaee); + box-shadow: 0px 0px 1px 1px pink; + grid-row-start: 0; + grid-column-start: 1; + grid-row-end: 0; + grid-column-end: 1; +} +.grid-right-bottom { + width: 20px; + height: 20px; + border-radius: 5px; + border: 1px dotted plum; + background: linear-gradient(pink, mediumpurple); + box-shadow: 0px 0px 2px 2px pink; + grid-row-start: 1; + grid-column-start: 1; + grid-row-end: 1; + grid-column-end: 1; +} + +.event-container{ + flex-direction: column; + height: 30%; +} + +.event1{ + width: 60%; + flex-weight: 1; +} + +.event2{ + width: 70%; + flex-weight: 1; +} + +.event3{ + width: 80%; + flex-weight: 1; +} + +.function-container{ + flex-direction: column; +} +.function { + height: 30px; + width: 100%; +} diff --git a/ace/ace_standard/src/main/js/default/pages/obj_ImageData/index.hml b/ace/ace_standard/src/main/js/default/pages/obj_ImageData/router/index.hml similarity index 100% rename from ace/ace_standard/src/main/js/default/pages/obj_ImageData/index.hml rename to ace/ace_standard/src/main/js/default/pages/obj_ImageData/router/index.hml diff --git a/ace/ace_standard/src/main/js/default/pages/obj_ImageData/index.js b/ace/ace_standard/src/main/js/default/pages/obj_ImageData/router/index.js similarity index 100% rename from ace/ace_standard/src/main/js/default/pages/obj_ImageData/index.js rename to ace/ace_standard/src/main/js/default/pages/obj_ImageData/router/index.js diff --git a/ace/ace_standard/src/main/js/default/pages/obj_ImageData/style/index.css b/ace/ace_standard/src/main/js/default/pages/obj_ImageData/style/index.css new file mode 100644 index 000000000..e69de29bb diff --git a/ace/ace_standard/src/main/js/default/pages/obj_ImageData/style/index.hml b/ace/ace_standard/src/main/js/default/pages/obj_ImageData/style/index.hml new file mode 100644 index 000000000..e69de29bb diff --git a/ace/ace_standard/src/main/js/default/pages/obj_ImageData/style/index.js b/ace/ace_standard/src/main/js/default/pages/obj_ImageData/style/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/prop/index.css b/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/prop/index.css new file mode 100644 index 000000000..ac9c500c4 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/prop/index.css @@ -0,0 +1,471 @@ +/** + * Copyright (c) 2022 Shenzhen kaiHong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/* xxx.css */ +.container { + flex-direction:row; + width:100%; + height:100%; + padding: 1px; +} + +.prop_all-container { + flex-direction: row; + height: 100%; + flex-weight: 1; +} + +.sub-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.style-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.title{ + width: 100%; + font-size: 18px; + margin: 2px; + padding: 2px; + font-weight: bold; + text-align: center; +} + +.sub-title{ + width: 100%; + font-size: 14px; + text-align: left; + margin: 2px; + padding: 2px; +} + +.style1{ + width: 100%; + height: 100%; + min-width: 25px; + min-height: 10px; + max-width: 300px; + max-height: 50px; + padding-left: 10px; + padding-top: 20px; + padding-right: 15px; + padding-bottom: 5px; + margin-left: 10px; + margin-top: 20px; + margin-right: 15px; + margin-bottom: 5px; + border-left-style: solid; + border-right-style: dashed; + border-top-style: dashed; + border-bottom-style: dotted; + border-left-width: 1px; + border-right-width: 2px; + border-top-width: 2px; + border-bottom-width: 1px; + border-left-color: #ff0000; + border-right-color: #00ff00; + border-top-color: #0000ff; + border-bottom-color: #fff000; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 15px; + border-top-left-radius: 8px; + border-top-right-radius: 12px; + background: linear-gradient(pink,#fff000); + box-shadow: 2px 4px 6px 8px #888888; + opacity: 0.5; + display: flex; + visibility: visible; + align-self: center; + image-fill: #000fff; + clip-path: margin-box; +} + +.style2{ + width: 50px; + height: 20px; + padding-start: 10px; + padding-end: 15px; + margin-start: 5px; + margin-end: 10px; + border-style: dotted; + border-width: 2px; + border-color:#000000; + border-radius:5px; + background-color:#ffaa00; + mask-image: url('common/images/icon.png'); + mask-size: cover; + mask-position: center; + +} + +.style3{ + width: 100%; + padding: 10px; + margin: 5px; + border-left: 1px solid #000000; + border-right: 2px dashed #00ff00; + border-top: 1.5px dotted #0000ff; + border-bottom: 2.5px dotted #fff000; + background-image:url('common/images/bg-tv.jpg'); + background-size:cover; + background-repeat: repeat-x; + background-position: center; + flex:1; + flex-grow: 2; + flex-basis: 10px; + flex-shrink: 1; +} + +.style4{ + width: 60%; + height: 5%; + padding: 10px; + margin: 5px; + border: 2px solid #000000; +} + +.contain1{ + width: 100%; + height: 70px; + flex-direction: column; +} + +.style5{ + width: 50%; + height: 30px; + background-color: yellow; + border-image-source: url('/common/images/image.png'); + border-image-slice: 1px 2px 3px 4px; + border-image-width: 2px 3px 4px 5px; + border-image-outset: 3px 4px 5px 6px; + border-image-repeat: repeat; +} + +.style6{ + width: 70px; + height: 30px; + position: absolute; + left: 10px; + top: 35px; + bottom: 5px; + right: 10px; + background-color: pink; + border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round; +} + +.prop-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.prop1 { + color: #ad4e2a; + height: 30px; + background-color: mediumslateblue; + width: 100%; + margin: 5px; +} + +.prop2 { + color: #343524; + height: 30px; + background-color: pink; + width: 100%; + margin: 5px; +} + +.prop3 { + color: #456345; + height: 30px; + background-color: darkseagreen; + width: 100%; + margin: 5px; +} + +.prop5 { + color: #831834; + stroke-width: 40px; + line-cap: square; + margin: 5px; + height: 70px; +} + +.ani-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.ani1{ + color: #72ac33; + stroke-width: 55px; + line-cap: square; + margin: 5px; + transform-origin: 0% 0%; + animation: ani1Go 3s infinite; +} + +@keyframes ani1Go +{ + from { + background-color: #f76160; + opacity:0.3; + width:50px; + height: 50px; + transform:translate(20px) rotate(10deg) scale(0.2) skew(40deg); + background-position:10% 10% + } + 30% { + background-color: #60f761; + opacity:0.5; + width:70px; + height: 70px; + background-position:12% 12%; + transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) skewX(25deg) skewY(15deg) + } + to { + background-color: #6160f7; + opacity:1; + width:90px; + height: 90px; + background-position:22% 22%; + transform:rotate(180deg) scale(2) + } +} + + +.ani2{ + color: #ad4e2a; + width: 55px; + height: 55px; + margin: 5px; + transform-origin: 2% 3%; + animation-name:ani2Go; + animation-delay:5s; + animation-duration:10s; + animation-iteration-count:4; + animation-timing-function:ease-out; + animation-direction:reverse; + animation-fill-mode:forwards; + animation-play-state:running; + transition:all 0 ease 0; +} + +@keyframes ani2Go +{ + from { + background-color: #f76160; + opacity:0.3; + width:50px; + height: 50px; + background-position:10% 10% + } + 30% { + background-color: #60f761; + opacity:0.5; + width:70px; + height: 70px; + background-position:12% 12%; + transform:translateX(10px) translateY(5px) translateZ(15px) + rotateX(20deg) rotateY(25deg) rotateZ(15deg) scaleX(0.6) scaleY(0.5) scaleZ(1.5) perspective(10); + } + to { + background-color: #6160f7; + opacity:1; + width:90px; + height: 90px; + background-position:22% 22%; + transform:translateX(30px) translateY(45px) translateZ(55px) + rotateX(180deg) rotateY(185deg) rotateZ(150deg) scaleX(2) scaleY(2.5) scaleZ(3.5); + } +} + +.gradient-container{ + flex-direction: column; +} + +.gradient1{ + width: 100%; + height: 20px; + margin: 5px; + background: linear-gradient(red, #00ff00); +} + +.gradient2{ + width: 100%; + height: 20px; + margin: 5px; + background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0)); +} + +.gradient3{ + width: 100%; + height: 20px; + margin: 5px; + background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%); +} + +.gradient4{ + width: 100%; + height: 20px; + margin: 5px; + background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px); +} + +.atom-container{ + flex-direction: column; +} + +.multiMode-container{ + flex-direction: column; +} + +.multiMode1{ + background-color: #978666; + width: 100%; + height: 30px; + margin: 5px; +} +.flex-box { + justify-content: space-around; + align-items: center; + height: 50px; + background-color: #ffffff; +} +.flex-item { + width: 20px; + height: 20px; + border-radius: 16px; +} +.color-primary { + background-color: mediumpurple; +} +.color-warning { + background-color: pink; +} +.color-success { + background-color: cornflowerblue; +} +.dragContent{ + width: 60px; + height: 60px; + background-color: red; +} +.flex-box2 { + justify-content: space-around; + align-items: center; + flex-wrap: wrap; + height: 100px; + background-color: #ffffff; +} +.common { + background-color: #ffffff; + align-items: center; + justify-content: center; +} +.grid-parent { + display: grid; + grid-template-columns: 20% 20%; + grid-columns-gap: 14px; + grid-rows-gap: 4px; + grid-template-rows: 15% 15%; +} +.grid-child { + width: 100%; +/* height: 100%;*/ + border-radius: 2px; +} +.grid-left-top { + width: 20px; + height: 20px; + border-radius: 10px; + border: 1px solid plum; + background: linear-gradient(pink, purple); + box-shadow: 0px 0px 1px 1px pink; + grid-row-start: 0; + grid-column-start: 0; + grid-row-end: 0; + grid-column-end: 0; +} +.grid-left-bottom { + width: 20px; + height: 20px; + border-radius: 5px; + border: 1px solid plum; + background: linear-gradient(pink, #00aaee); + box-shadow: 0px 0px 1px 1px pink; + grid-row-start: 1; + grid-column-start: 0; + grid-row-end: 1; + grid-column-end: 0; +} +.grid-right-top { + width: 20px; + height: 20px; + border-radius: 3px; + border: 1px dotted plum; + background: linear-gradient(mediumpurple, #00aaee); + box-shadow: 0px 0px 1px 1px pink; + grid-row-start: 0; + grid-column-start: 1; + grid-row-end: 0; + grid-column-end: 1; +} +.grid-right-bottom { + width: 20px; + height: 20px; + border-radius: 5px; + border: 1px dotted plum; + background: linear-gradient(pink, mediumpurple); + box-shadow: 0px 0px 2px 2px pink; + grid-row-start: 1; + grid-column-start: 1; + grid-row-end: 1; + grid-column-end: 1; +} + +.event-container{ + flex-direction: column; + height: 30%; +} + +.event1{ + width: 60%; + flex-weight: 1; +} + +.event2{ + width: 70%; + flex-weight: 1; +} + +.event3{ + width: 80%; + flex-weight: 1; +} + +.function-container{ + flex-direction: column; +} +.function { + height: 30px; + width: 100%; +} diff --git a/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/prop/index.hml b/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/prop/index.hml new file mode 100644 index 000000000..8f0bdbbc7 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/prop/index.hml @@ -0,0 +1,34 @@ + + +
+
+
+ + OffscreenCanvas对象的属性 + + + 属性 -- width + + + + + 属性 -- height + + + +
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/prop/index.js b/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/prop/index.js new file mode 100644 index 000000000..56b1e162d --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/prop/index.js @@ -0,0 +1,58 @@ +/** + * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import prompt from '@system.prompt'; +export default { + data:{ + left:0, + top:0, + }, + onShow(){ + // 属性 + this.props1() + this.props2() + }, + props1() { + const el =this.$refs.canvas1 + const ctx = el.getContext('2d'); + var offscreen = new OffscreenCanvas(200,100); + var offscreenCanvasCtx = offscreen.getContext("2d"); + var img = new Image(); + img.src = 'common/images/image.png'; + offscreenCanvasCtx.drawImage(img, 0, 0, 200, 100); + prompt.showToast({ + message: 'OffscreenCanvas width='+offscreen.width + }); + console.log('OffscreenCanvas width='+offscreen.width) + var bitmap = offscreen.transferToImageBitmap(); + ctx.transferFromImageBitmap(bitmap); + }, + props2() { + const el =this.$refs.canvas2 + const ctx = el.getContext('2d'); + var offscreen = new OffscreenCanvas(100,200); + var offscreenCanvasCtx = offscreen.getContext("2d"); + var img = new Image(); + img.src = 'common/images/image.png'; + offscreenCanvasCtx.drawImage(img, 0, 0, 100, 200); + prompt.showToast({ + message: 'OffscreenCanvas height='+offscreen.height + }); + console.log('OffscreenCanvas height='+offscreen.height) + var bitmap = offscreen.transferToImageBitmap(); + ctx.transferFromImageBitmap(bitmap); + }, + +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/router/index.css b/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/router/index.css new file mode 100644 index 000000000..ac9c500c4 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/router/index.css @@ -0,0 +1,471 @@ +/** + * Copyright (c) 2022 Shenzhen kaiHong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/* xxx.css */ +.container { + flex-direction:row; + width:100%; + height:100%; + padding: 1px; +} + +.prop_all-container { + flex-direction: row; + height: 100%; + flex-weight: 1; +} + +.sub-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.style-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.title{ + width: 100%; + font-size: 18px; + margin: 2px; + padding: 2px; + font-weight: bold; + text-align: center; +} + +.sub-title{ + width: 100%; + font-size: 14px; + text-align: left; + margin: 2px; + padding: 2px; +} + +.style1{ + width: 100%; + height: 100%; + min-width: 25px; + min-height: 10px; + max-width: 300px; + max-height: 50px; + padding-left: 10px; + padding-top: 20px; + padding-right: 15px; + padding-bottom: 5px; + margin-left: 10px; + margin-top: 20px; + margin-right: 15px; + margin-bottom: 5px; + border-left-style: solid; + border-right-style: dashed; + border-top-style: dashed; + border-bottom-style: dotted; + border-left-width: 1px; + border-right-width: 2px; + border-top-width: 2px; + border-bottom-width: 1px; + border-left-color: #ff0000; + border-right-color: #00ff00; + border-top-color: #0000ff; + border-bottom-color: #fff000; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 15px; + border-top-left-radius: 8px; + border-top-right-radius: 12px; + background: linear-gradient(pink,#fff000); + box-shadow: 2px 4px 6px 8px #888888; + opacity: 0.5; + display: flex; + visibility: visible; + align-self: center; + image-fill: #000fff; + clip-path: margin-box; +} + +.style2{ + width: 50px; + height: 20px; + padding-start: 10px; + padding-end: 15px; + margin-start: 5px; + margin-end: 10px; + border-style: dotted; + border-width: 2px; + border-color:#000000; + border-radius:5px; + background-color:#ffaa00; + mask-image: url('common/images/icon.png'); + mask-size: cover; + mask-position: center; + +} + +.style3{ + width: 100%; + padding: 10px; + margin: 5px; + border-left: 1px solid #000000; + border-right: 2px dashed #00ff00; + border-top: 1.5px dotted #0000ff; + border-bottom: 2.5px dotted #fff000; + background-image:url('common/images/bg-tv.jpg'); + background-size:cover; + background-repeat: repeat-x; + background-position: center; + flex:1; + flex-grow: 2; + flex-basis: 10px; + flex-shrink: 1; +} + +.style4{ + width: 60%; + height: 5%; + padding: 10px; + margin: 5px; + border: 2px solid #000000; +} + +.contain1{ + width: 100%; + height: 70px; + flex-direction: column; +} + +.style5{ + width: 50%; + height: 30px; + background-color: yellow; + border-image-source: url('/common/images/image.png'); + border-image-slice: 1px 2px 3px 4px; + border-image-width: 2px 3px 4px 5px; + border-image-outset: 3px 4px 5px 6px; + border-image-repeat: repeat; +} + +.style6{ + width: 70px; + height: 30px; + position: absolute; + left: 10px; + top: 35px; + bottom: 5px; + right: 10px; + background-color: pink; + border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round; +} + +.prop-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.prop1 { + color: #ad4e2a; + height: 30px; + background-color: mediumslateblue; + width: 100%; + margin: 5px; +} + +.prop2 { + color: #343524; + height: 30px; + background-color: pink; + width: 100%; + margin: 5px; +} + +.prop3 { + color: #456345; + height: 30px; + background-color: darkseagreen; + width: 100%; + margin: 5px; +} + +.prop5 { + color: #831834; + stroke-width: 40px; + line-cap: square; + margin: 5px; + height: 70px; +} + +.ani-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.ani1{ + color: #72ac33; + stroke-width: 55px; + line-cap: square; + margin: 5px; + transform-origin: 0% 0%; + animation: ani1Go 3s infinite; +} + +@keyframes ani1Go +{ + from { + background-color: #f76160; + opacity:0.3; + width:50px; + height: 50px; + transform:translate(20px) rotate(10deg) scale(0.2) skew(40deg); + background-position:10% 10% + } + 30% { + background-color: #60f761; + opacity:0.5; + width:70px; + height: 70px; + background-position:12% 12%; + transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) skewX(25deg) skewY(15deg) + } + to { + background-color: #6160f7; + opacity:1; + width:90px; + height: 90px; + background-position:22% 22%; + transform:rotate(180deg) scale(2) + } +} + + +.ani2{ + color: #ad4e2a; + width: 55px; + height: 55px; + margin: 5px; + transform-origin: 2% 3%; + animation-name:ani2Go; + animation-delay:5s; + animation-duration:10s; + animation-iteration-count:4; + animation-timing-function:ease-out; + animation-direction:reverse; + animation-fill-mode:forwards; + animation-play-state:running; + transition:all 0 ease 0; +} + +@keyframes ani2Go +{ + from { + background-color: #f76160; + opacity:0.3; + width:50px; + height: 50px; + background-position:10% 10% + } + 30% { + background-color: #60f761; + opacity:0.5; + width:70px; + height: 70px; + background-position:12% 12%; + transform:translateX(10px) translateY(5px) translateZ(15px) + rotateX(20deg) rotateY(25deg) rotateZ(15deg) scaleX(0.6) scaleY(0.5) scaleZ(1.5) perspective(10); + } + to { + background-color: #6160f7; + opacity:1; + width:90px; + height: 90px; + background-position:22% 22%; + transform:translateX(30px) translateY(45px) translateZ(55px) + rotateX(180deg) rotateY(185deg) rotateZ(150deg) scaleX(2) scaleY(2.5) scaleZ(3.5); + } +} + +.gradient-container{ + flex-direction: column; +} + +.gradient1{ + width: 100%; + height: 20px; + margin: 5px; + background: linear-gradient(red, #00ff00); +} + +.gradient2{ + width: 100%; + height: 20px; + margin: 5px; + background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0)); +} + +.gradient3{ + width: 100%; + height: 20px; + margin: 5px; + background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%); +} + +.gradient4{ + width: 100%; + height: 20px; + margin: 5px; + background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px); +} + +.atom-container{ + flex-direction: column; +} + +.multiMode-container{ + flex-direction: column; +} + +.multiMode1{ + background-color: #978666; + width: 100%; + height: 30px; + margin: 5px; +} +.flex-box { + justify-content: space-around; + align-items: center; + height: 50px; + background-color: #ffffff; +} +.flex-item { + width: 20px; + height: 20px; + border-radius: 16px; +} +.color-primary { + background-color: mediumpurple; +} +.color-warning { + background-color: pink; +} +.color-success { + background-color: cornflowerblue; +} +.dragContent{ + width: 60px; + height: 60px; + background-color: red; +} +.flex-box2 { + justify-content: space-around; + align-items: center; + flex-wrap: wrap; + height: 100px; + background-color: #ffffff; +} +.common { + background-color: #ffffff; + align-items: center; + justify-content: center; +} +.grid-parent { + display: grid; + grid-template-columns: 20% 20%; + grid-columns-gap: 14px; + grid-rows-gap: 4px; + grid-template-rows: 15% 15%; +} +.grid-child { + width: 100%; +/* height: 100%;*/ + border-radius: 2px; +} +.grid-left-top { + width: 20px; + height: 20px; + border-radius: 10px; + border: 1px solid plum; + background: linear-gradient(pink, purple); + box-shadow: 0px 0px 1px 1px pink; + grid-row-start: 0; + grid-column-start: 0; + grid-row-end: 0; + grid-column-end: 0; +} +.grid-left-bottom { + width: 20px; + height: 20px; + border-radius: 5px; + border: 1px solid plum; + background: linear-gradient(pink, #00aaee); + box-shadow: 0px 0px 1px 1px pink; + grid-row-start: 1; + grid-column-start: 0; + grid-row-end: 1; + grid-column-end: 0; +} +.grid-right-top { + width: 20px; + height: 20px; + border-radius: 3px; + border: 1px dotted plum; + background: linear-gradient(mediumpurple, #00aaee); + box-shadow: 0px 0px 1px 1px pink; + grid-row-start: 0; + grid-column-start: 1; + grid-row-end: 0; + grid-column-end: 1; +} +.grid-right-bottom { + width: 20px; + height: 20px; + border-radius: 5px; + border: 1px dotted plum; + background: linear-gradient(pink, mediumpurple); + box-shadow: 0px 0px 2px 2px pink; + grid-row-start: 1; + grid-column-start: 1; + grid-row-end: 1; + grid-column-end: 1; +} + +.event-container{ + flex-direction: column; + height: 30%; +} + +.event1{ + width: 60%; + flex-weight: 1; +} + +.event2{ + width: 70%; + flex-weight: 1; +} + +.event3{ + width: 80%; + flex-weight: 1; +} + +.function-container{ + flex-direction: column; +} +.function { + height: 30px; + width: 100%; +} diff --git a/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/index.hml b/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/router/index.hml similarity index 100% rename from ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/index.hml rename to ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/router/index.hml diff --git a/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/index.js b/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/router/index.js similarity index 100% rename from ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/index.js rename to ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/router/index.js diff --git a/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/style/index.css b/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/style/index.css new file mode 100644 index 000000000..e69de29bb diff --git a/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/style/index.hml b/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/style/index.hml new file mode 100644 index 000000000..e69de29bb diff --git a/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/style/index.js b/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/style/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/prop/index.css b/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/prop/index.css new file mode 100644 index 000000000..2e7a1eafa --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/prop/index.css @@ -0,0 +1,472 @@ +/** + * Copyright (c) 2022 Shenzhen kaiHong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/* xxx.css */ +.container { + flex-direction:row; + width:100%; + height:100%; + padding: 1px; +} + +.prop_all-container { + flex-direction: row; + height: 100%; + flex-weight: 1; +} + +.sub-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.style-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.title{ + width: 100%; + min-height: 65px; + font-size: 16px; + margin: 2px; + padding: 2px; + font-weight: bold; + text-align: center; +} + +.sub-title{ + width: 100%; + font-size: 14px; + text-align: left; + margin: 2px; + padding: 2px; +} + +.style1{ + width: 100%; + height: 100%; + min-width: 25px; + min-height: 10px; + max-width: 300px; + max-height: 50px; + padding-left: 10px; + padding-top: 20px; + padding-right: 15px; + padding-bottom: 5px; + margin-left: 10px; + margin-top: 20px; + margin-right: 15px; + margin-bottom: 5px; + border-left-style: solid; + border-right-style: dashed; + border-top-style: dashed; + border-bottom-style: dotted; + border-left-width: 1px; + border-right-width: 2px; + border-top-width: 2px; + border-bottom-width: 1px; + border-left-color: #ff0000; + border-right-color: #00ff00; + border-top-color: #0000ff; + border-bottom-color: #fff000; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 15px; + border-top-left-radius: 8px; + border-top-right-radius: 12px; + background: linear-gradient(pink,#fff000); + box-shadow: 2px 4px 6px 8px #888888; + opacity: 0.5; + display: flex; + visibility: visible; + align-self: center; + image-fill: #000fff; + clip-path: margin-box; +} + +.style2{ + width: 50px; + height: 20px; + padding-start: 10px; + padding-end: 15px; + margin-start: 5px; + margin-end: 10px; + border-style: dotted; + border-width: 2px; + border-color:#000000; + border-radius:5px; + background-color:#ffaa00; + mask-image: url('common/images/icon.png'); + mask-size: cover; + mask-position: center; + +} + +.style3{ + width: 100%; + padding: 10px; + margin: 5px; + border-left: 1px solid #000000; + border-right: 2px dashed #00ff00; + border-top: 1.5px dotted #0000ff; + border-bottom: 2.5px dotted #fff000; + background-image:url('common/images/bg-tv.jpg'); + background-size:cover; + background-repeat: repeat-x; + background-position: center; + flex:1; + flex-grow: 2; + flex-basis: 10px; + flex-shrink: 1; +} + +.style4{ + width: 60%; + height: 5%; + padding: 10px; + margin: 5px; + border: 2px solid #000000; +} + +.contain1{ + width: 100%; + height: 70px; + flex-direction: column; +} + +.style5{ + width: 50%; + height: 30px; + background-color: yellow; + border-image-source: url('/common/images/image.png'); + border-image-slice: 1px 2px 3px 4px; + border-image-width: 2px 3px 4px 5px; + border-image-outset: 3px 4px 5px 6px; + border-image-repeat: repeat; +} + +.style6{ + width: 70px; + height: 30px; + position: absolute; + left: 10px; + top: 35px; + bottom: 5px; + right: 10px; + background-color: pink; + border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round; +} + +.prop-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.prop1 { + color: #ad4e2a; + height: 30px; + background-color: mediumslateblue; + width: 100%; + margin: 5px; +} + +.prop2 { + color: #343524; + height: 30px; + background-color: pink; + width: 100%; + margin: 5px; +} + +.prop3 { + color: #456345; + height: 30px; + background-color: darkseagreen; + width: 100%; + margin: 5px; +} + +.prop5 { + color: #831834; + stroke-width: 40px; + line-cap: square; + margin: 5px; + height: 70px; +} + +.ani-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.ani1{ + color: #72ac33; + stroke-width: 55px; + line-cap: square; + margin: 5px; + transform-origin: 0% 0%; + animation: ani1Go 3s infinite; +} + +@keyframes ani1Go +{ + from { + background-color: #f76160; + opacity:0.3; + width:50px; + height: 50px; + transform:translate(20px) rotate(10deg) scale(0.2) skew(40deg); + background-position:10% 10% + } + 30% { + background-color: #60f761; + opacity:0.5; + width:70px; + height: 70px; + background-position:12% 12%; + transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) skewX(25deg) skewY(15deg) + } + to { + background-color: #6160f7; + opacity:1; + width:90px; + height: 90px; + background-position:22% 22%; + transform:rotate(180deg) scale(2) + } +} + + +.ani2{ + color: #ad4e2a; + width: 55px; + height: 55px; + margin: 5px; + transform-origin: 2% 3%; + animation-name:ani2Go; + animation-delay:5s; + animation-duration:10s; + animation-iteration-count:4; + animation-timing-function:ease-out; + animation-direction:reverse; + animation-fill-mode:forwards; + animation-play-state:running; + transition:all 0 ease 0; +} + +@keyframes ani2Go +{ + from { + background-color: #f76160; + opacity:0.3; + width:50px; + height: 50px; + background-position:10% 10% + } + 30% { + background-color: #60f761; + opacity:0.5; + width:70px; + height: 70px; + background-position:12% 12%; + transform:translateX(10px) translateY(5px) translateZ(15px) + rotateX(20deg) rotateY(25deg) rotateZ(15deg) scaleX(0.6) scaleY(0.5) scaleZ(1.5) perspective(10); + } + to { + background-color: #6160f7; + opacity:1; + width:90px; + height: 90px; + background-position:22% 22%; + transform:translateX(30px) translateY(45px) translateZ(55px) + rotateX(180deg) rotateY(185deg) rotateZ(150deg) scaleX(2) scaleY(2.5) scaleZ(3.5); + } +} + +.gradient-container{ + flex-direction: column; +} + +.gradient1{ + width: 100%; + height: 20px; + margin: 5px; + background: linear-gradient(red, #00ff00); +} + +.gradient2{ + width: 100%; + height: 20px; + margin: 5px; + background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0)); +} + +.gradient3{ + width: 100%; + height: 20px; + margin: 5px; + background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%); +} + +.gradient4{ + width: 100%; + height: 20px; + margin: 5px; + background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px); +} + +.atom-container{ + flex-direction: column; +} + +.multiMode-container{ + flex-direction: column; +} + +.multiMode1{ + background-color: #978666; + width: 100%; + height: 30px; + margin: 5px; +} +.flex-box { + justify-content: space-around; + align-items: center; + height: 50px; + background-color: #ffffff; +} +.flex-item { + width: 20px; + height: 20px; + border-radius: 16px; +} +.color-primary { + background-color: mediumpurple; +} +.color-warning { + background-color: pink; +} +.color-success { + background-color: cornflowerblue; +} +.dragContent{ + width: 60px; + height: 60px; + background-color: red; +} +.flex-box2 { + justify-content: space-around; + align-items: center; + flex-wrap: wrap; + height: 100px; + background-color: #ffffff; +} +.common { + background-color: #ffffff; + align-items: center; + justify-content: center; +} +.grid-parent { + display: grid; + grid-template-columns: 20% 20%; + grid-columns-gap: 14px; + grid-rows-gap: 4px; + grid-template-rows: 15% 15%; +} +.grid-child { + width: 100%; +/* height: 100%;*/ + border-radius: 2px; +} +.grid-left-top { + width: 20px; + height: 20px; + border-radius: 10px; + border: 1px solid plum; + background: linear-gradient(pink, purple); + box-shadow: 0px 0px 1px 1px pink; + grid-row-start: 0; + grid-column-start: 0; + grid-row-end: 0; + grid-column-end: 0; +} +.grid-left-bottom { + width: 20px; + height: 20px; + border-radius: 5px; + border: 1px solid plum; + background: linear-gradient(pink, #00aaee); + box-shadow: 0px 0px 1px 1px pink; + grid-row-start: 1; + grid-column-start: 0; + grid-row-end: 1; + grid-column-end: 0; +} +.grid-right-top { + width: 20px; + height: 20px; + border-radius: 3px; + border: 1px dotted plum; + background: linear-gradient(mediumpurple, #00aaee); + box-shadow: 0px 0px 1px 1px pink; + grid-row-start: 0; + grid-column-start: 1; + grid-row-end: 0; + grid-column-end: 1; +} +.grid-right-bottom { + width: 20px; + height: 20px; + border-radius: 5px; + border: 1px dotted plum; + background: linear-gradient(pink, mediumpurple); + box-shadow: 0px 0px 2px 2px pink; + grid-row-start: 1; + grid-column-start: 1; + grid-row-end: 1; + grid-column-end: 1; +} + +.event-container{ + flex-direction: column; + height: 30%; +} + +.event1{ + width: 60%; + flex-weight: 1; +} + +.event2{ + width: 70%; + flex-weight: 1; +} + +.event3{ + width: 80%; + flex-weight: 1; +} + +.function-container{ + flex-direction: column; +} +.function { + height: 30px; + width: 100%; +} diff --git a/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/prop/index.hml b/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/prop/index.hml new file mode 100644 index 000000000..26b00615b --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/prop/index.hml @@ -0,0 +1,121 @@ + + +
+
+
+ + OffscreenCanvasRenderingContext2D对象的通用属性 + + + 通用属性 -- fillStyle + + + + + 通用属性 -- lineWidth + + + + + 通用属性 -- lineCap + + + + + 通用属性 -- lineJoin + + + + + 通用属性 -- miterLimit + + + + + 通用属性 -- font + + + + + 通用属性 -- globalAlpha + + + + + 通用属性 -- lineDashOffset + + + + + 通用属性 -- globalCompositeOperation + + + +
+
+ + + + +
+
+ + 通用属性 -- shadowBlur + + + + + 通用属性 -- shadowColor + + + + + 通用属性 -- shadowOffsetX + + + + + 通用属性 -- shadowOffsetY + + + + + 通用属性 -- imageSmoothingEnabled + + + + + + 通用属性 -- strokeStyle + + + + + + + + + OffscreenCanvasRenderingContext2D对象的特有属性 + + + 特有属性 -- filter + + + + +
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/prop/index.js b/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/prop/index.js new file mode 100644 index 000000000..1495a1354 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/prop/index.js @@ -0,0 +1,217 @@ +/** + * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import prompt from '@system.prompt'; +export default { + data:{ + left:0, + top:0, + }, + onShow(){ + // 屬性 + this.props1() + this.props2() + this.props3() + this.props4() + this.props5() + this.props6() + this.props7() + this.props8() + this.props9() + this.props10() + this.props11() + this.props12() + this.props13() + this.props14() + this.props15() + this.props16() + + }, + props1() { + const el = this.$refs.canvas1; + const ctx = el.getContext('2d'); + ctx.fillStyle = '#0000ff'; + ctx.fillRect(0, 0, 100, 30); + }, + props2() { + const el = this.$refs.canvas2; + const ctx = el.getContext('2d'); + ctx.lineWidth = 10; + ctx.lineCap = 'round'; + ctx.strokeRect(0, 0, 100, 30); + }, + props3() { + const el = this.$refs.canvas3; + const ctx = el.getContext('2d'); + ctx.lineWidth = 8; + ctx.beginPath(); + ctx.lineCap = 'round'; + ctx.moveTo(10, 10); + ctx.lineTo(100, 10); + ctx.stroke(); + }, + props4() { + const el = this.$refs.canvas4; + const ctx = el.getContext('2d'); + ctx.beginPath(); + ctx.lineWidth = 5; + ctx.lineJoin = 'miter'; + ctx.moveTo(10, 10); + ctx.lineTo(80, 30); + ctx.lineTo(10, 50); + ctx.stroke(); + }, + props5() { + const el =this.$refs.canvas5; + const ctx = el.getContext('2d'); + ctx.lineWidth = 5; + ctx.lineJoin = 'miter'; + ctx.miterLimit = 3; + ctx.moveTo(10, 10); + ctx.lineTo(60, 15); + ctx.lineTo(10, 40); + ctx.stroke(); + }, + props6() { + const el =this.$refs.canvas6; + const ctx = el.getContext('2d'); + ctx.font = '20px sans-serif'; + ctx.fillText("Hello World", 10, 20); + }, + props7() { + const el =this.$refs.canvas7; + const ctx = el.getContext('2d'); + ctx.fillStyle = 'rgb(255,0,0)'; + ctx.fillRect(0, 0, 40, 40); + ctx.globalAlpha = 0.4; + ctx.fillStyle = 'rgb(0,0,255)'; + ctx.fillRect(40, 40, 40, 40); + + }, + props8() { + const el =this.$refs.canvas8; + const ctx = el.getContext('2d'); + ctx.arc(50, 40, 30, 0, 6.28); + ctx.setLineDash([10,20]); + ctx.lineDashOffset = 10.0; + ctx.stroke(); + }, + props9() { + const el =this.$refs.canvas9; + const ctx = el.getContext('2d'); + ctx.fillStyle = 'rgb(255,0,0)'; + ctx.fillRect(10, 10, 30, 30); + ctx.globalCompositeOperation = 'source-over'; + ctx.fillStyle = 'rgb(0,0,255)'; + ctx.fillRect(25, 25, 30, 30); + // Start drawing second example + ctx.fillStyle = 'rgb(255,0,0)'; + ctx.fillRect(70, 10, 30, 30); + ctx.globalCompositeOperation = 'destination-over'; + ctx.fillStyle = 'rgb(0,0,255)'; + ctx.fillRect(85, 25, 30, 30); + }, + props10() { + const el =this.$refs.canvas10; + const ctx = el.getContext('2d'); + ctx.shadowBlur = 20; + ctx.shadowColor = 'rgb(0,0,0)'; + ctx.fillStyle = 'rgb(255,0,0)'; + ctx.fillRect(10, 10, 70, 40); + }, + props11() { + const el =this.$refs.canvas11; + const ctx = el.getContext('2d'); + ctx.shadowBlur = 20; + ctx.shadowColor = 'rgb(0,0,255)'; + ctx.fillStyle = 'rgb(255,0,0)'; + ctx.fillRect(10, 10, 70, 40); + }, + props12() { + const el =this.$refs.canvas12; + const ctx = el.getContext('2d'); + ctx.shadowBlur = 10; + ctx.shadowOffsetX = 20; + ctx.shadowColor = 'rgb(0,0,0)'; + ctx.fillStyle = 'rgb(255,0,0)'; + ctx.fillRect(10, 0, 70, 40); + }, + props13() { + const el =this.$refs.canvas13; + const ctx = el.getContext('2d'); + ctx.shadowBlur = 10; + ctx.shadowOffsetY = 20; + ctx.shadowColor = 'rgb(0,0,0)'; + ctx.fillStyle = 'rgb(255,0,0)'; + ctx.fillRect(10, 0, 70, 40); + }, + props14() { + const el =this.$refs.canvas14; + const ctx = el.getContext('2d'); + var img = new Image(); + img.src = 'common/images/image.png'; + img.onload = function() { + ctx.imageSmoothingEnabled = false; + ctx.drawImage(img, 10, 0, 100, 60); + }; + }, + props15() { + const el =this.$refs.canvas15; + const ctx = el.getContext('2d'); + ctx.lineWidth = 10; + ctx.strokeStyle = '#0000ff'; + ctx.strokeRect(0, 0, 100, 30); + }, + props16() { + const ctx =this.$refs.canvas16.getContext('2d'); + var offscreen = new OffscreenCanvas(100, 300); + var offCanvas2 = offscreen.getContext("2d"); + var img = new Image(); + img.src = 'common/images/image.png'; + offCanvas2.drawImage(img, 0, 0, 33, 33); + offCanvas2.filter = 'blur(5px)'; + offCanvas2.drawImage(img, 33, 0, 33, 33); + + offCanvas2.filter = 'grayscale(50%)'; + offCanvas2.drawImage(img, 66, 0, 33, 33); + + offCanvas2.filter = 'hue-rotate(90deg)'; + offCanvas2.drawImage(img, 0, 33, 33, 33); + + offCanvas2.filter = 'invert(100%)'; + offCanvas2.drawImage(img, 33, 33, 33, 33); + + offCanvas2.filter = 'drop-shadow(8px 8px 10px green)'; + offCanvas2.drawImage(img, 66, 33, 33, 33); + + offCanvas2.filter = 'brightness(0.4)'; + offCanvas2.drawImage(img, 0, 66, 33, 33); + + offCanvas2.filter = 'opacity(25%)'; + offCanvas2.drawImage(img, 33, 66, 33, 33); + + offCanvas2.filter = 'saturate(30%)'; + offCanvas2.drawImage(img, 66, 66, 33, 33); + + offCanvas2.filter = 'sepia(60%)'; + offCanvas2.drawImage(img, 0, 99, 33, 33); + + offCanvas2.filter = 'contrast(200%)'; + offCanvas2.drawImage(img, 33, 99, 33, 33); + var bitmap = offscreen.transferToImageBitmap(); + ctx.transferFromImageBitmap(bitmap); + } + +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/router/index.css b/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/router/index.css new file mode 100644 index 000000000..ac9c500c4 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/router/index.css @@ -0,0 +1,471 @@ +/** + * Copyright (c) 2022 Shenzhen kaiHong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/* xxx.css */ +.container { + flex-direction:row; + width:100%; + height:100%; + padding: 1px; +} + +.prop_all-container { + flex-direction: row; + height: 100%; + flex-weight: 1; +} + +.sub-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.style-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.title{ + width: 100%; + font-size: 18px; + margin: 2px; + padding: 2px; + font-weight: bold; + text-align: center; +} + +.sub-title{ + width: 100%; + font-size: 14px; + text-align: left; + margin: 2px; + padding: 2px; +} + +.style1{ + width: 100%; + height: 100%; + min-width: 25px; + min-height: 10px; + max-width: 300px; + max-height: 50px; + padding-left: 10px; + padding-top: 20px; + padding-right: 15px; + padding-bottom: 5px; + margin-left: 10px; + margin-top: 20px; + margin-right: 15px; + margin-bottom: 5px; + border-left-style: solid; + border-right-style: dashed; + border-top-style: dashed; + border-bottom-style: dotted; + border-left-width: 1px; + border-right-width: 2px; + border-top-width: 2px; + border-bottom-width: 1px; + border-left-color: #ff0000; + border-right-color: #00ff00; + border-top-color: #0000ff; + border-bottom-color: #fff000; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 15px; + border-top-left-radius: 8px; + border-top-right-radius: 12px; + background: linear-gradient(pink,#fff000); + box-shadow: 2px 4px 6px 8px #888888; + opacity: 0.5; + display: flex; + visibility: visible; + align-self: center; + image-fill: #000fff; + clip-path: margin-box; +} + +.style2{ + width: 50px; + height: 20px; + padding-start: 10px; + padding-end: 15px; + margin-start: 5px; + margin-end: 10px; + border-style: dotted; + border-width: 2px; + border-color:#000000; + border-radius:5px; + background-color:#ffaa00; + mask-image: url('common/images/icon.png'); + mask-size: cover; + mask-position: center; + +} + +.style3{ + width: 100%; + padding: 10px; + margin: 5px; + border-left: 1px solid #000000; + border-right: 2px dashed #00ff00; + border-top: 1.5px dotted #0000ff; + border-bottom: 2.5px dotted #fff000; + background-image:url('common/images/bg-tv.jpg'); + background-size:cover; + background-repeat: repeat-x; + background-position: center; + flex:1; + flex-grow: 2; + flex-basis: 10px; + flex-shrink: 1; +} + +.style4{ + width: 60%; + height: 5%; + padding: 10px; + margin: 5px; + border: 2px solid #000000; +} + +.contain1{ + width: 100%; + height: 70px; + flex-direction: column; +} + +.style5{ + width: 50%; + height: 30px; + background-color: yellow; + border-image-source: url('/common/images/image.png'); + border-image-slice: 1px 2px 3px 4px; + border-image-width: 2px 3px 4px 5px; + border-image-outset: 3px 4px 5px 6px; + border-image-repeat: repeat; +} + +.style6{ + width: 70px; + height: 30px; + position: absolute; + left: 10px; + top: 35px; + bottom: 5px; + right: 10px; + background-color: pink; + border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round; +} + +.prop-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.prop1 { + color: #ad4e2a; + height: 30px; + background-color: mediumslateblue; + width: 100%; + margin: 5px; +} + +.prop2 { + color: #343524; + height: 30px; + background-color: pink; + width: 100%; + margin: 5px; +} + +.prop3 { + color: #456345; + height: 30px; + background-color: darkseagreen; + width: 100%; + margin: 5px; +} + +.prop5 { + color: #831834; + stroke-width: 40px; + line-cap: square; + margin: 5px; + height: 70px; +} + +.ani-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.ani1{ + color: #72ac33; + stroke-width: 55px; + line-cap: square; + margin: 5px; + transform-origin: 0% 0%; + animation: ani1Go 3s infinite; +} + +@keyframes ani1Go +{ + from { + background-color: #f76160; + opacity:0.3; + width:50px; + height: 50px; + transform:translate(20px) rotate(10deg) scale(0.2) skew(40deg); + background-position:10% 10% + } + 30% { + background-color: #60f761; + opacity:0.5; + width:70px; + height: 70px; + background-position:12% 12%; + transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) skewX(25deg) skewY(15deg) + } + to { + background-color: #6160f7; + opacity:1; + width:90px; + height: 90px; + background-position:22% 22%; + transform:rotate(180deg) scale(2) + } +} + + +.ani2{ + color: #ad4e2a; + width: 55px; + height: 55px; + margin: 5px; + transform-origin: 2% 3%; + animation-name:ani2Go; + animation-delay:5s; + animation-duration:10s; + animation-iteration-count:4; + animation-timing-function:ease-out; + animation-direction:reverse; + animation-fill-mode:forwards; + animation-play-state:running; + transition:all 0 ease 0; +} + +@keyframes ani2Go +{ + from { + background-color: #f76160; + opacity:0.3; + width:50px; + height: 50px; + background-position:10% 10% + } + 30% { + background-color: #60f761; + opacity:0.5; + width:70px; + height: 70px; + background-position:12% 12%; + transform:translateX(10px) translateY(5px) translateZ(15px) + rotateX(20deg) rotateY(25deg) rotateZ(15deg) scaleX(0.6) scaleY(0.5) scaleZ(1.5) perspective(10); + } + to { + background-color: #6160f7; + opacity:1; + width:90px; + height: 90px; + background-position:22% 22%; + transform:translateX(30px) translateY(45px) translateZ(55px) + rotateX(180deg) rotateY(185deg) rotateZ(150deg) scaleX(2) scaleY(2.5) scaleZ(3.5); + } +} + +.gradient-container{ + flex-direction: column; +} + +.gradient1{ + width: 100%; + height: 20px; + margin: 5px; + background: linear-gradient(red, #00ff00); +} + +.gradient2{ + width: 100%; + height: 20px; + margin: 5px; + background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0)); +} + +.gradient3{ + width: 100%; + height: 20px; + margin: 5px; + background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%); +} + +.gradient4{ + width: 100%; + height: 20px; + margin: 5px; + background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px); +} + +.atom-container{ + flex-direction: column; +} + +.multiMode-container{ + flex-direction: column; +} + +.multiMode1{ + background-color: #978666; + width: 100%; + height: 30px; + margin: 5px; +} +.flex-box { + justify-content: space-around; + align-items: center; + height: 50px; + background-color: #ffffff; +} +.flex-item { + width: 20px; + height: 20px; + border-radius: 16px; +} +.color-primary { + background-color: mediumpurple; +} +.color-warning { + background-color: pink; +} +.color-success { + background-color: cornflowerblue; +} +.dragContent{ + width: 60px; + height: 60px; + background-color: red; +} +.flex-box2 { + justify-content: space-around; + align-items: center; + flex-wrap: wrap; + height: 100px; + background-color: #ffffff; +} +.common { + background-color: #ffffff; + align-items: center; + justify-content: center; +} +.grid-parent { + display: grid; + grid-template-columns: 20% 20%; + grid-columns-gap: 14px; + grid-rows-gap: 4px; + grid-template-rows: 15% 15%; +} +.grid-child { + width: 100%; +/* height: 100%;*/ + border-radius: 2px; +} +.grid-left-top { + width: 20px; + height: 20px; + border-radius: 10px; + border: 1px solid plum; + background: linear-gradient(pink, purple); + box-shadow: 0px 0px 1px 1px pink; + grid-row-start: 0; + grid-column-start: 0; + grid-row-end: 0; + grid-column-end: 0; +} +.grid-left-bottom { + width: 20px; + height: 20px; + border-radius: 5px; + border: 1px solid plum; + background: linear-gradient(pink, #00aaee); + box-shadow: 0px 0px 1px 1px pink; + grid-row-start: 1; + grid-column-start: 0; + grid-row-end: 1; + grid-column-end: 0; +} +.grid-right-top { + width: 20px; + height: 20px; + border-radius: 3px; + border: 1px dotted plum; + background: linear-gradient(mediumpurple, #00aaee); + box-shadow: 0px 0px 1px 1px pink; + grid-row-start: 0; + grid-column-start: 1; + grid-row-end: 0; + grid-column-end: 1; +} +.grid-right-bottom { + width: 20px; + height: 20px; + border-radius: 5px; + border: 1px dotted plum; + background: linear-gradient(pink, mediumpurple); + box-shadow: 0px 0px 2px 2px pink; + grid-row-start: 1; + grid-column-start: 1; + grid-row-end: 1; + grid-column-end: 1; +} + +.event-container{ + flex-direction: column; + height: 30%; +} + +.event1{ + width: 60%; + flex-weight: 1; +} + +.event2{ + width: 70%; + flex-weight: 1; +} + +.event3{ + width: 80%; + flex-weight: 1; +} + +.function-container{ + flex-direction: column; +} +.function { + height: 30px; + width: 100%; +} diff --git a/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/index.hml b/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/router/index.hml similarity index 100% rename from ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/index.hml rename to ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/router/index.hml diff --git a/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/index.js b/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/router/index.js similarity index 100% rename from ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/index.js rename to ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/router/index.js diff --git a/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/style/index.css b/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/style/index.css new file mode 100644 index 000000000..e69de29bb diff --git a/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/style/index.hml b/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/style/index.hml new file mode 100644 index 000000000..e69de29bb diff --git a/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/style/index.js b/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/style/index.js new file mode 100644 index 000000000..e69de29bb diff --git a/ace/ace_standard/src/main/js/default/pages/obj_Path2D/prop/index.css b/ace/ace_standard/src/main/js/default/pages/obj_Path2D/prop/index.css new file mode 100644 index 000000000..5019c1e3c --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_Path2D/prop/index.css @@ -0,0 +1,16 @@ +/** + * Copyright (c) 2022 Shenzhen kaiHong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/* xxx.css */ \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/obj_Path2D/prop/index.hml b/ace/ace_standard/src/main/js/default/pages/obj_Path2D/prop/index.hml new file mode 100644 index 000000000..20298bff1 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_Path2D/prop/index.hml @@ -0,0 +1,21 @@ + + +
+
+ +
+ +
diff --git a/ace/ace_standard/src/main/js/default/pages/obj_Path2D/prop/index.js b/ace/ace_standard/src/main/js/default/pages/obj_Path2D/prop/index.js new file mode 100644 index 000000000..2ed40db8b --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_Path2D/prop/index.js @@ -0,0 +1,25 @@ +/** + * Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +import prompt from '@system.prompt'; +export default { + data:{ + + }, + onShow(){ + + }, + +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/obj_Path2D/router/index.css b/ace/ace_standard/src/main/js/default/pages/obj_Path2D/router/index.css new file mode 100644 index 000000000..ac9c500c4 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_Path2D/router/index.css @@ -0,0 +1,471 @@ +/** + * Copyright (c) 2022 Shenzhen kaiHong Digital Industry Development Co., Ltd. + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/* xxx.css */ +.container { + flex-direction:row; + width:100%; + height:100%; + padding: 1px; +} + +.prop_all-container { + flex-direction: row; + height: 100%; + flex-weight: 1; +} + +.sub-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.style-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.title{ + width: 100%; + font-size: 18px; + margin: 2px; + padding: 2px; + font-weight: bold; + text-align: center; +} + +.sub-title{ + width: 100%; + font-size: 14px; + text-align: left; + margin: 2px; + padding: 2px; +} + +.style1{ + width: 100%; + height: 100%; + min-width: 25px; + min-height: 10px; + max-width: 300px; + max-height: 50px; + padding-left: 10px; + padding-top: 20px; + padding-right: 15px; + padding-bottom: 5px; + margin-left: 10px; + margin-top: 20px; + margin-right: 15px; + margin-bottom: 5px; + border-left-style: solid; + border-right-style: dashed; + border-top-style: dashed; + border-bottom-style: dotted; + border-left-width: 1px; + border-right-width: 2px; + border-top-width: 2px; + border-bottom-width: 1px; + border-left-color: #ff0000; + border-right-color: #00ff00; + border-top-color: #0000ff; + border-bottom-color: #fff000; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 15px; + border-top-left-radius: 8px; + border-top-right-radius: 12px; + background: linear-gradient(pink,#fff000); + box-shadow: 2px 4px 6px 8px #888888; + opacity: 0.5; + display: flex; + visibility: visible; + align-self: center; + image-fill: #000fff; + clip-path: margin-box; +} + +.style2{ + width: 50px; + height: 20px; + padding-start: 10px; + padding-end: 15px; + margin-start: 5px; + margin-end: 10px; + border-style: dotted; + border-width: 2px; + border-color:#000000; + border-radius:5px; + background-color:#ffaa00; + mask-image: url('common/images/icon.png'); + mask-size: cover; + mask-position: center; + +} + +.style3{ + width: 100%; + padding: 10px; + margin: 5px; + border-left: 1px solid #000000; + border-right: 2px dashed #00ff00; + border-top: 1.5px dotted #0000ff; + border-bottom: 2.5px dotted #fff000; + background-image:url('common/images/bg-tv.jpg'); + background-size:cover; + background-repeat: repeat-x; + background-position: center; + flex:1; + flex-grow: 2; + flex-basis: 10px; + flex-shrink: 1; +} + +.style4{ + width: 60%; + height: 5%; + padding: 10px; + margin: 5px; + border: 2px solid #000000; +} + +.contain1{ + width: 100%; + height: 70px; + flex-direction: column; +} + +.style5{ + width: 50%; + height: 30px; + background-color: yellow; + border-image-source: url('/common/images/image.png'); + border-image-slice: 1px 2px 3px 4px; + border-image-width: 2px 3px 4px 5px; + border-image-outset: 3px 4px 5px 6px; + border-image-repeat: repeat; +} + +.style6{ + width: 70px; + height: 30px; + position: absolute; + left: 10px; + top: 35px; + bottom: 5px; + right: 10px; + background-color: pink; + border-image: url('common/images/icon.png') 1px 2px 3px 4px 2px 3px 4px 5px 3px 4px 5px 6px round; +} + +.prop-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.prop1 { + color: #ad4e2a; + height: 30px; + background-color: mediumslateblue; + width: 100%; + margin: 5px; +} + +.prop2 { + color: #343524; + height: 30px; + background-color: pink; + width: 100%; + margin: 5px; +} + +.prop3 { + color: #456345; + height: 30px; + background-color: darkseagreen; + width: 100%; + margin: 5px; +} + +.prop5 { + color: #831834; + stroke-width: 40px; + line-cap: square; + margin: 5px; + height: 70px; +} + +.ani-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.ani1{ + color: #72ac33; + stroke-width: 55px; + line-cap: square; + margin: 5px; + transform-origin: 0% 0%; + animation: ani1Go 3s infinite; +} + +@keyframes ani1Go +{ + from { + background-color: #f76160; + opacity:0.3; + width:50px; + height: 50px; + transform:translate(20px) rotate(10deg) scale(0.2) skew(40deg); + background-position:10% 10% + } + 30% { + background-color: #60f761; + opacity:0.5; + width:70px; + height: 70px; + background-position:12% 12%; + transform:translateX(10px) translateY(5px) rotateX(20deg) rotateY(25deg) scaleX(0.6) scaleY(0.5) skewX(25deg) skewY(15deg) + } + to { + background-color: #6160f7; + opacity:1; + width:90px; + height: 90px; + background-position:22% 22%; + transform:rotate(180deg) scale(2) + } +} + + +.ani2{ + color: #ad4e2a; + width: 55px; + height: 55px; + margin: 5px; + transform-origin: 2% 3%; + animation-name:ani2Go; + animation-delay:5s; + animation-duration:10s; + animation-iteration-count:4; + animation-timing-function:ease-out; + animation-direction:reverse; + animation-fill-mode:forwards; + animation-play-state:running; + transition:all 0 ease 0; +} + +@keyframes ani2Go +{ + from { + background-color: #f76160; + opacity:0.3; + width:50px; + height: 50px; + background-position:10% 10% + } + 30% { + background-color: #60f761; + opacity:0.5; + width:70px; + height: 70px; + background-position:12% 12%; + transform:translateX(10px) translateY(5px) translateZ(15px) + rotateX(20deg) rotateY(25deg) rotateZ(15deg) scaleX(0.6) scaleY(0.5) scaleZ(1.5) perspective(10); + } + to { + background-color: #6160f7; + opacity:1; + width:90px; + height: 90px; + background-position:22% 22%; + transform:translateX(30px) translateY(45px) translateZ(55px) + rotateX(180deg) rotateY(185deg) rotateZ(150deg) scaleX(2) scaleY(2.5) scaleZ(3.5); + } +} + +.gradient-container{ + flex-direction: column; +} + +.gradient1{ + width: 100%; + height: 20px; + margin: 5px; + background: linear-gradient(red, #00ff00); +} + +.gradient2{ + width: 100%; + height: 20px; + margin: 5px; + background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0)); +} + +.gradient3{ + width: 100%; + height: 20px; + margin: 5px; + background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%); +} + +.gradient4{ + width: 100%; + height: 20px; + margin: 5px; + background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px); +} + +.atom-container{ + flex-direction: column; +} + +.multiMode-container{ + flex-direction: column; +} + +.multiMode1{ + background-color: #978666; + width: 100%; + height: 30px; + margin: 5px; +} +.flex-box { + justify-content: space-around; + align-items: center; + height: 50px; + background-color: #ffffff; +} +.flex-item { + width: 20px; + height: 20px; + border-radius: 16px; +} +.color-primary { + background-color: mediumpurple; +} +.color-warning { + background-color: pink; +} +.color-success { + background-color: cornflowerblue; +} +.dragContent{ + width: 60px; + height: 60px; + background-color: red; +} +.flex-box2 { + justify-content: space-around; + align-items: center; + flex-wrap: wrap; + height: 100px; + background-color: #ffffff; +} +.common { + background-color: #ffffff; + align-items: center; + justify-content: center; +} +.grid-parent { + display: grid; + grid-template-columns: 20% 20%; + grid-columns-gap: 14px; + grid-rows-gap: 4px; + grid-template-rows: 15% 15%; +} +.grid-child { + width: 100%; +/* height: 100%;*/ + border-radius: 2px; +} +.grid-left-top { + width: 20px; + height: 20px; + border-radius: 10px; + border: 1px solid plum; + background: linear-gradient(pink, purple); + box-shadow: 0px 0px 1px 1px pink; + grid-row-start: 0; + grid-column-start: 0; + grid-row-end: 0; + grid-column-end: 0; +} +.grid-left-bottom { + width: 20px; + height: 20px; + border-radius: 5px; + border: 1px solid plum; + background: linear-gradient(pink, #00aaee); + box-shadow: 0px 0px 1px 1px pink; + grid-row-start: 1; + grid-column-start: 0; + grid-row-end: 1; + grid-column-end: 0; +} +.grid-right-top { + width: 20px; + height: 20px; + border-radius: 3px; + border: 1px dotted plum; + background: linear-gradient(mediumpurple, #00aaee); + box-shadow: 0px 0px 1px 1px pink; + grid-row-start: 0; + grid-column-start: 1; + grid-row-end: 0; + grid-column-end: 1; +} +.grid-right-bottom { + width: 20px; + height: 20px; + border-radius: 5px; + border: 1px dotted plum; + background: linear-gradient(pink, mediumpurple); + box-shadow: 0px 0px 2px 2px pink; + grid-row-start: 1; + grid-column-start: 1; + grid-row-end: 1; + grid-column-end: 1; +} + +.event-container{ + flex-direction: column; + height: 30%; +} + +.event1{ + width: 60%; + flex-weight: 1; +} + +.event2{ + width: 70%; + flex-weight: 1; +} + +.event3{ + width: 80%; + flex-weight: 1; +} + +.function-container{ + flex-direction: column; +} +.function { + height: 30px; + width: 100%; +} diff --git a/ace/ace_standard/src/main/js/default/pages/obj_Path2D/index.hml b/ace/ace_standard/src/main/js/default/pages/obj_Path2D/router/index.hml similarity index 100% rename from ace/ace_standard/src/main/js/default/pages/obj_Path2D/index.hml rename to ace/ace_standard/src/main/js/default/pages/obj_Path2D/router/index.hml diff --git a/ace/ace_standard/src/main/js/default/pages/obj_Path2D/index.js b/ace/ace_standard/src/main/js/default/pages/obj_Path2D/router/index.js similarity index 100% rename from ace/ace_standard/src/main/js/default/pages/obj_Path2D/index.js rename to ace/ace_standard/src/main/js/default/pages/obj_Path2D/router/index.js diff --git a/ace/ace_standard/src/main/js/default/pages/obj_Path2D/style/index.css b/ace/ace_standard/src/main/js/default/pages/obj_Path2D/style/index.css new file mode 100644 index 000000000..e69de29bb diff --git a/ace/ace_standard/src/main/js/default/pages/obj_Path2D/style/index.hml b/ace/ace_standard/src/main/js/default/pages/obj_Path2D/style/index.hml new file mode 100644 index 000000000..e69de29bb diff --git a/ace/ace_standard/src/main/js/default/pages/obj_Path2D/style/index.js b/ace/ace_standard/src/main/js/default/pages/obj_Path2D/style/index.js new file mode 100644 index 000000000..e69de29bb -- GitLab