diff --git a/ace/ace_standard/src/main/config.json b/ace/ace_standard/src/main/config.json index 52b8b520a131e8d62859945d7bf3b010d8a6c95b..2bbb0ab32912d59ba195b654248b53162212db8e 100755 --- a/ace/ace_standard/src/main/config.json +++ b/ace/ace_standard/src/main/config.json @@ -93,7 +93,35 @@ "pages/swiper/index", "pages/tabs/index", "pages/tab-bar/index", - "pages/tab-content/index" + "pages/tab-content/index", + "pages/svg_text/index", + "pages/video/index", + "pages/gridContainer/index", + "pages/gridRow/index", + "pages/gridCol/index", + "pages/canvas/index", + "pages/obj_CanvasRenderingContext2D/index", + "pages/obj_Image/index", + "pages/obj_CanvasGradient/index", + "pages/obj_ImageData/index", + "pages/obj_Path2D/index", + "pages/obj_ImageBitmap/index", + "pages/obj_OffscreenCanvas/index", + "pages/obj_OffscreenCanvasRenderingContext2D/index", + "pages/textPath/index", + "pages/svg/index", + "pages/rect/index", + "pages/circle/index", + "pages/ellipse/index", + "pages/path/index", + "pages/line/index", + "pages/polyline/index", + "pages/polygon/index", + "pages/animate/index", + "pages/animateMotion/index", + "pages/animateTransform/index", + "pages/textPath/index", + "pages/tspan/index" ], "name": "default", "window": { diff --git a/ace/ace_standard/src/main/js/default/pages/animate/index.css b/ace/ace_standard/src/main/js/default/pages/animate/index.css new file mode 100644 index 0000000000000000000000000000000000000000..ffdc1d5b9cb8ad5ed3bdb3d44e57389b07de6cf0 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/animate/index.css @@ -0,0 +1,17 @@ +.container { + width: 100%; + flex-direction: column; + align-items: center; +} +.title{ + font-size: 18px; + color: grey; + padding: 5px; + text-align: center; +} +.svg-style{ + border: 1px solid #000000; +} +.outerBox{ + flex-direction: column; +} diff --git a/ace/ace_standard/src/main/js/default/pages/animate/index.hml b/ace/ace_standard/src/main/js/default/pages/animate/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..0d576981906507af7bbadd5acb4dc07852a933ae --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/animate/index.hml @@ -0,0 +1,92 @@ +
+
+
+ + 动画效果1 + + + + + + + + + +
+
+ + 动画效果2 + + + + + + + +
+
+
+
+ + 动画效果3 + + + + animate + + + + + + + + +
+
+ + 动画效果4 + + + + + + animate + + + + + +
+
+
+
+ + 动画效果5 + + + + + + + +
+
+ + 动画效果6 + + + + + + + +
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/animate/index.js b/ace/ace_standard/src/main/js/default/pages/animate/index.js new file mode 100644 index 0000000000000000000000000000000000000000..c701a3f90f9774b6d2437dfef64f97ced3addf92 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/animate/index.js @@ -0,0 +1,17 @@ +/* + * Copyright (C) 2021 Huawei Device 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. + */ + +export default { +} diff --git a/ace/ace_standard/src/main/js/default/pages/animateMotion/index.css b/ace/ace_standard/src/main/js/default/pages/animateMotion/index.css new file mode 100644 index 0000000000000000000000000000000000000000..b3ea8f221476bb85a19ce719a83536d8213f7c4b --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/animateMotion/index.css @@ -0,0 +1,17 @@ +.container { + width: 100%; + flex-direction: column; + align-items: center; +} +.title{ + font-size: 18px; + color: grey; + padding: 5px; + text-align: center; +} +.svg-style{ + border: 1px solid #000000; +} +.outerBox{ + flex-direction: column; +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/animateMotion/index.hml b/ace/ace_standard/src/main/js/default/pages/animateMotion/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..b1e5bb38bc19efae87daa3e9ed34a24af6ad9631 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/animateMotion/index.hml @@ -0,0 +1,54 @@ +
+
+
+ + 动画效果1 + + + + + + + > + +
+
+ + 动画效果2 + + + + + + + + +
+
+
+
+ + 动画效果3 + + + + + + + + +
+
+ + 动画效果4 + + + + + + + + +
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/animateMotion/index.js b/ace/ace_standard/src/main/js/default/pages/animateMotion/index.js new file mode 100644 index 0000000000000000000000000000000000000000..23d0d31f76675a95cc6fd8e632267b3a5af95cc3 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/animateMotion/index.js @@ -0,0 +1,5 @@ +export default { + data: { + title: 'World' + } +} diff --git a/ace/ace_standard/src/main/js/default/pages/animateTransform/index.css b/ace/ace_standard/src/main/js/default/pages/animateTransform/index.css new file mode 100644 index 0000000000000000000000000000000000000000..617e564019f571a3c634ac479ea323abae867917 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/animateTransform/index.css @@ -0,0 +1,18 @@ +.container { + width: 100%; + flex-direction: column; + align-items: center; + padding-bottom: 40px; +} +.title{ + font-size: 18px; + color: grey; + padding: 5px; + text-align: center; +} +.svg-style{ + border: 1px solid #000000; +} +.outerBox{ + flex-direction: column; +} diff --git a/ace/ace_standard/src/main/js/default/pages/animateTransform/index.hml b/ace/ace_standard/src/main/js/default/pages/animateTransform/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..1d46ebcc56f6cc76357738c4b4b98440db38e0a9 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/animateTransform/index.hml @@ -0,0 +1,184 @@ +
+
+
+ + 动画效果1 + + + + + + + +
+
+ + 动画效果2 + + + + + + + +
+
+
+
+ + 动画效果3 + + + + + + + +
+
+ + 动画效果4 + + + + + + + +
+
+
+
+ + 动画效果5 + + + + + + + +
+
+ + 动画效果6 + + + + + + + +
+
+
+
+ + 动画效果7 + + + + + + + +
+
+ + 动画效果8 + + + + + + + +
+
+
+
+ + 动画效果9 + + + + + + + +
+
+ + 动画效果10 + + + + + + + +
+
+
+
+ + 动画效果11 + + + + + + + + + +
+
+ + 动画效果12 + + + + + + + + + +
+
+
+
+ + 动画效果13 + + + + animateTransform + + + + + + +
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/animateTransform/index.js b/ace/ace_standard/src/main/js/default/pages/animateTransform/index.js new file mode 100644 index 0000000000000000000000000000000000000000..23d0d31f76675a95cc6fd8e632267b3a5af95cc3 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/animateTransform/index.js @@ -0,0 +1,5 @@ +export default { + data: { + title: 'World' + } +} diff --git a/ace/ace_standard/src/main/js/default/pages/canvas/index.css b/ace/ace_standard/src/main/js/default/pages/canvas/index.css new file mode 100644 index 0000000000000000000000000000000000000000..49d51183a908826b56cf3de17f619898256bb397 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/canvas/index.css @@ -0,0 +1,440 @@ +/** + * 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. + */ + +.container { + flex-direction:row; + width:100%; + height:100%; + padding: 1px; +} + +.sub-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.style-container{ + flex-direction: column; + height: 70%; +} + +.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/image.png'); + 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; +} + +.style7 { + flex-direction: column; + flex-wrap:wrap; + justify-content:flex-start; + align-items: flex-end; + align-content:space-around; + display: flex; + height: 40px; +} + +.flex-item { + width: 20px; + height: 20px; + border-radius: 16px; +} + + +.color-primary { + background-color: mediumpurple; +} + +.color-warning { + background-color: pink; +} + +.color-success { + background-color: cornflowerblue; +} + +.grid-child { + width: 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; + flex-weight: 1; +} + +.event1{ + width: 60%; + flex-weight: 1; + background-color: yellow; +} + +.event2{ + width: 70%; + flex-weight: 1; + background-color: red; +} + +.event3{ + width: 80%; + flex-weight: 1; + background-color: #ad4e2a; +} + +.event4{ + flex-direction: row; + width: 90%; + flex-weight: 1; + overflow:scroll; +} + +.event5{ + flex-direction: column; + width: 100%; + height: 90px; + overflow:scroll; +} + +.prop-container{ + flex-direction: column; +} + +#prop1 { + height: 30px; + background-color: mediumslateblue; + width: 100%; + margin: 5px; +} + +.prop2 { + height: 30px; + background-color: pink; + width: 100%; + margin: 5px; +} + +.prop3 { + height: 30px; + background-color: darkseagreen; + width: 100%; + margin: 5px; +} + +.ani-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.ani1{ + background-color: #72ac33; + width: 55px; + height: 55px; + 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); + 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) + } + to { + background-color: #6160f7; + opacity:1; + width:90px; + height: 90px; + background-position:22% 22%; + transform:rotate(180deg) scale(2) + } +} + +.ani2{ + background-color: #ad4e2a; + width: 55px; + height: 55px; + margin: 5px; +} + +.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); +} + +.access-container{ + flex-direction: column; +} + +.access1{ + background-color: #321124; + margin: 5px; + width: 90%; + height: 30px; +} + +.atom-container{ + flex-direction: column; +} + +.multiMode-container{ + flex-direction: column; +} + +.multiMode1{ + background-color: #978666; + width: 100%; + height: 30px; + margin: 5px; +} + +.function-container{ + flex-direction: column; +} + +.function1{ + background-color: #ff0000; + width: 60%; + height: 20px; +} + +.function2{ + background-color: #00ff00; + width: 60%; + height: 20px; +} + +.function3{ + background-color: #0000ff; + width: 100%; + height: 20px; +} diff --git a/ace/ace_standard/src/main/js/default/pages/canvas/index.hml b/ace/ace_standard/src/main/js/default/pages/canvas/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..929efb068cf14d6c85dfc92f72a8f0ac5467fa3a --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/canvas/index.hml @@ -0,0 +1,280 @@ + + +
+
+
+ + 通用样式 + + + canvas通用样式1 + + + + + canvas通用样式2 + + + + + canvas通用样式3 + + + + + canvas通用样式4 + + + + + canvas通用样式5 + +
+ + + + +
+
+ + + + +
+ + 通用事件 + + + canvas通用事件1 + + + + + canvas通用事件2 + + + + + canvas通用事件3 + + + +
+
+ + + + +
+
+ + 通用属性 + + + canvas通用属性1 + + + + + canvas通用属性2 + + + + + canvas通用属性3 + + + +
+ + + +
+ + 通用方法 + + + canvas通用方法1 + + + + canvas通用方法2 + + + + canvas通用方法3 + + + + canvas特有方法4 + + + + canvas特有方法5 + + +
+ + + +
+ + 动画样式 + + + canvas动画样式1 + + + + + canvas动画样式2 + + + +
+
+ + + + +
+
+ + 渐变样式 + + + canvas渐变样式1 + + + + + canvas渐变样式2 + + + + + canvas渐变样式3 + + + + + canvas渐变样式4 + + + +
+
+
+
+ + 无障碍 + + + canvas无障碍1 + + + +
+
+
+
+ + 原子布局 + + + canvas原子布局1 + +
+ + + + + + + + + + + + +
+ + canvas原子布局2 + +
+ + + + + + + + + + + + +
+ + canvas原子布局3 + +
+ + + + + + + + + + + + +
+
+
+
+
+ + 多模输入 + + + canvas多模输入1 + + + +
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/canvas/index.js b/ace/ace_standard/src/main/js/default/pages/canvas/index.js new file mode 100644 index 0000000000000000000000000000000000000000..41cf7b9b6582d34b29ac471bb39b772b24128514 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/canvas/index.js @@ -0,0 +1,465 @@ +/** + * 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'; + +var options = { + duration: 1500, + easing: 'friction', + delay: 100, + fill: 'forwards', + iterations: 2, + direction: 'normal', +}; +var frames = [ + { + transform: { + translate: '-120px', + rotate:'10deg', + scale:0.2, + skew:'40deg' + }, + opacity: 0.1, + offset: 0.0, + width: '40%', + height:'20px', + backgroundColor:'#ff0000', + backgroundPosition:'10px 20px', + transformOrigin:'left top' + }, + { + transform: { + translateX: '0px', + translateY: '5px', + rotateX:'10deg', + rotateY:'10deg', + scaleX:0.5, + scaleY:0.7, + skewX:'22deg', + skewY:'30deg' + }, + opacity: 0.6, + offset: 2.0, + width: '60%', + height:'30px', + backgroundColor:'#ff00ff', + backgroundPosition:'15px 25px', + transformOrigin:'center top' + }, + { + transform: { + translateX: '100px', + translateY: '0px', + translateZ: '20px', + rotateX:'0deg', + rotateY:'0deg', + rotateZ:'30deg', + scaleX:1, + scaleY:1, + scaleZ:2, + skewX:'0', + skewY:'0', + skewZ:'30deg' + }, + opacity: 1, + offset: 0.0, + width: '100%', + height:'30px', + backgroundColor:'#ffff00', + backgroundPosition:'0px', + transformOrigin:'center center' + }, +]; + +export default { + data:{ + left:0, + top:0, + }, + onShow(){ + // 通用属性 + var prop1 = this.$element('prop1'); + var name1 = prop1.dataSet.name + var prop2 = this.$refs.prop2; + var name2 = prop2.dataSet.name + prompt.showToast({ + message: 'prop1--' + name1 + '\nprop2--' + name2 + }); + }, + + touchStart(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchstart:\n' + message + }); + }, + + touchMove(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchMove:\n' +message + }); + }, + + touchEnd(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchEnd:\n' +message + }); + }, + + touchCancel(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchCancel:\n' +message + }); + }, + + click(){ + prompt.showToast({ + message: 'click' + }); + }, + + doubleClick(){ + prompt.showToast({ + message: 'doubleClick' + }); + }, + + longPress(){ + prompt.showToast({ + message: 'longPress' + }); + }, + + focus(){ + prompt.showToast({ + message: 'focus' + }); + }, + + blur(){ + prompt.showToast({ + message: 'blur' + }); + }, + + key(event){ + var code = event.code; + var action = event.action; + var repeatCount = event.repeatCount; + var timestampStart = event.timestampStart; + var message = 'code--' + code + ',action--' + action + + ',repeatCount--' + repeatCount + ',timestampStart--' + timestampStart; + prompt.showToast({ + message: 'key:\n' + message + }); + }, + + swipe(event){ + var direction = event.direction; + var distance = event.distance; + var message = 'direction--' + direction + ',distance--' + distance; + prompt.showToast({ + message: 'swipe:\n' + message + }); + }, + + attached(){ + prompt.showToast({ + message: 'attached' + }); + }, + + detached(){ + prompt.showToast({ + message: 'detached' + }); + }, + + pinchStart(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchStart:\n' + message + }); + }, + + pinchUpdate(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchUpdate:\n' + message + }); + }, + + pinchEnd(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchUpdate:\n' + message + }); + }, + + pinchCancel(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchCancel:\n' + message + }); + }, + + dragStart(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragStart:\n' + message + }); + }, + + drag(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'drag:\n' + message + }); + }, + + dragEnd(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragEnd:\n' + message + }); + }, + + dragEnter(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragEnter:\n' + message + }); + }, + + dragOver(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragOver:\n' + message + }); + }, + + dragLeave(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragLeave:\n' + message + }); + }, + + drop(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'drop:\n' + message + }); + }, + + functionTest1(event){ + var function1 = this.$refs.function1; + function1.focus(true) + var rect = function1.getBoundingClientRect(); + var width = rect.width; + var height = rect.height; + var left = rect.left; + var top = rect.top; + var message = 'width--' + width + ',height--' + height + + ',left--' + left + ',top--' + top; + prompt.showToast({ + message: 'function1 rect:\n' + message + }); + }, + + functionTest2(event){ + var function2 = this.$refs.function2; + let observer = function2.createIntersectionObserver({ + ratios: [0.2, 0], // number + }); + observer.observe((isVisible, ratio)=> { + console.info('this element is ' + isVisible + 'ratio is ' + ratio) + prompt.showToast({ + message: 'function2 observer:\n' + 'isVisible--' + isVisible + ',ratio--' + ratio + }); + }) + + observer.unobserve() + }, + + functionTest3(event){ + var function3 = this.$refs.function3; + + var animation = function3.animate(frames, options); + animation.play() + animation.onfinish = function(){ + prompt.showToast({ + message: 'The animation is finished.' + }); + }; + + animation.oncancel = function(){ + prompt.showToast({ + message: 'The animation is canceled.' + }); + }; + + animation.onrepeat = function(){ + prompt.showToast({ + message: 'The animation is repeated.' + }); + }; + + setTimeout(() => { + animation.reverse() + }, 500) + + setTimeout(() => { + animation.pause() + }, 1000) + + setTimeout(() => { + animation.cancel() + }, 1500) + }, + + functionTest4(event){ + var function4 = this.$refs.function4; + let ctx = function4.getContext('2d', { antialias: true }); + ctx.beginPath(); + ctx.arc(50, 15, 15, 0, 6.28); + ctx.stroke(); + }, + functionTest5(event){ + var function5 = this.$refs.function5; + let dataURL = function5.toDataURL({type: 'image/png'}, {quality: 0.92}); + prompt.showToast({ + message: 'function5 dataURL:' + dataURL + }); + }, +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/circle/index.css b/ace/ace_standard/src/main/js/default/pages/circle/index.css new file mode 100644 index 0000000000000000000000000000000000000000..e81f688df1b735e0a559604c5471e2344ea321f9 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/circle/index.css @@ -0,0 +1,366 @@ +/** + * 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; +} + +.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: 100px; + height:50px; + 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%;*/ +/* height:100px;*/ + 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/image.png'); + 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: 10%; + padding: 10px; + margin: 5px; + border: 2px solid #000000; +} + +.contain1{ + width: 100%; + height: 70px; + flex-direction: column; +} + +.style5{ + width: 60%; + height: 70px; + 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: 70px; + position: absolute; + left: 10px; + top: 80px; + 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; +} + +.style7 { + margin-bottom: 50px; + margin-top: 10px; + color: green; + stroke-width: 30px; +} + +.prop-container{ + flex-direction: column; + height: 100%; + flex-weight: 2; +} +#prop1 { + background-color: mediumslateblue; + width: 100%; + margin: 3px 5px; +} + +.prop2 { + background-color: pink; + width: 100%; + margin: 3px 5px; +} + +.prop3 { + background-color: darkseagreen; + width: 100%; + margin: 3px 5px; +} + +.prop4 { + background-color: yellowgreen; + width: 100%; + margin: 3px 5px; +} + +.prop5 { + background-color: cornflowerblue; + width: 100%; + margin: 3px 5px; +} + +.prop6 { + background-color: burlywood; + width: 100%; + margin: 3px 5px; +} + +.prop7 { + background-color: crimson; + width: 100%; + margin: 3px 5px; +} + +.ani-container{ + flex-direction: column; + height: 100%; + flex-weight: 0.8; +} + +.ani1{ + color: #72ac33; + stroke-width: 55px; + 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; + stroke-width: 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{ + height:100px; + stroke-width:4px; + margin: 5px; + background: linear-gradient(red, #00ff00); +} + +.gradient2{ + height:100px; + stroke-width: 4px; + margin: 5px; + background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0)); +} + +.gradient3{ + height:100px; + stroke-width: 4px; + margin: 5px; + background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%); +} + +.gradient4{ + height:100px; + stroke-width: 4px; + margin: 5px; + background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px); +} + +.access-container{ + flex-direction: column; +} + +.access1{ + height:100px; + color: #321124; + stroke-width: 4px; + margin: 5px; +} + +.atom-container{ + flex-direction: column; +} + +.multimode-container{ + flex-direction: column; +} + +.multimode1{ + height:100px; + color: #978666; + stroke-width: 4px; + margin: 5px; +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/circle/index.hml b/ace/ace_standard/src/main/js/default/pages/circle/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..3259148faa1a33a109f7a2daef0d68acac00f4f8 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/circle/index.hml @@ -0,0 +1,189 @@ +
+
+ + 通用样式 + + + circle通用样式1 + + + + + circle通用样式2 + + + + + circle通用样式3 + + + + + + + circle通用样式4 + + + + circle通用样式5 + +
+ + +
+
+ + +
+
+ + 通用属性 + + + circle通用属性1 + + + + + + + circle通用属性2 + + + + + + + circle通用属性3 + + + + + + + circle通用属性4 + + + + + + + circle通用属性5 + + + + + + + circle通用属性6 + + + + + + + circle通用属性7 + + + + +
+ + +
+ + 动画样式 + + + circle动画样式1 + + + + + + + + + + + + + + + circle动画样式2 + + + + + + + + + + + + + + + + + +
+
+ + + + +
+
+ + 渐变样式 + + + circle渐变样式1 + + + + circle渐变样式2 + + + + circle渐变样式3 + + + + circle渐变样式4 + + +
+ + +
+ + 无障碍 + + + circle无障碍1 + + +
+ + + +
+ + 多模输入 + + + circle多模输入1 + + +
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/circle/index.js b/ace/ace_standard/src/main/js/default/pages/circle/index.js new file mode 100644 index 0000000000000000000000000000000000000000..260427920b4544e4c535477afa5a313bc1697f85 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/circle/index.js @@ -0,0 +1,26 @@ +/** + * 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. + */ +export default { + data: { + title: "" + }, + onShow(){ + // 通用属性 + var prop1 = this.$element("prop1"); + var name1 = prop1.dataSet.a + var prop2 = this.$refs.prop2; + var name2 = prop2.dataSet.a + } +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/ellipse/index.css b/ace/ace_standard/src/main/js/default/pages/ellipse/index.css new file mode 100644 index 0000000000000000000000000000000000000000..bbf4883fa2cdebf3405bf634b69a1db7aa3cd69d --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/ellipse/index.css @@ -0,0 +1,359 @@ +/** + * 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; +} + +.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: 100px; + height: 50px; + 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/image.png'); + background-size:cover; + background-repeat: repeat-x; + background-position: center; + flex:1; + flex-grow: 2; + flex-basis: 10px; + flex-shrink: 1; +} + +.style4{ + width: 85%; + height: 7%; + padding: 10px; + margin: 5px; + border: 2px solid #000000; +} + +.contain1{ + width: 100%; + height: 70px; + flex-direction: column; +} + +.style5{ + width: 80%; + height: 50px; + 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: 100px; + height: 50px; + position: absolute; + left: 10px; + top: 50px; + 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; +} + +.style7 { + margin-bottom: 50px; + margin-top: 10px; + color: green; + stroke-width: 30px; +} + +.prop-container{ + flex-direction: column; + height: 100%; + flex-weight: 2; +} +#prop1 { + background-color: mediumslateblue; + width: 100%; + margin: 3px 5px; +} + +.prop2 { + background-color: pink; + width: 100%; + margin: 3px 5px; +} + +.prop3 { + background-color: darkseagreen; + width: 100%; + margin: 3px 5px; +} + +.prop4 { + background-color: yellowgreen; + width: 100%; + margin: 3px 5px; +} + +.prop5 { + background-color: cornflowerblue; + width: 100%; + margin: 3px 5px; +} + +.prop6 { + background-color: burlywood; + width: 100%; + margin: 3px 5px; +} + +.prop7 { + background-color: crimson; + width: 100%; + margin: 3px 5px; +} + +.ani-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.ani1{ + color: #72ac33; + stroke-width: 55px; + 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; + stroke-width: 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{ + stroke-width: 30px; + margin: 5px; + background: linear-gradient(red, #00ff00); +} + +.gradient2{ + stroke-width: 30px; + margin: 5px; + background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0)); +} + +.gradient3{ + stroke-width: 30px; + margin: 5px; + background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%); +} + +.gradient4{ + stroke-width: 30px; + margin: 5px; + background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px); +} + +.access-container{ + flex-direction: column; +} + +.access1{ + color: #321124; + stroke-width: 30px; + margin: 5px; +} + +.atom-container{ + flex-direction: column; +} + +.multimode-container{ + flex-direction: column; +} + +.multimode1{ + color: #978666; + stroke-width: 30px; + margin: 5px; +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/ellipse/index.hml b/ace/ace_standard/src/main/js/default/pages/ellipse/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..544f4580c2fcb73c0c21bb36db35c1089a111332 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/ellipse/index.hml @@ -0,0 +1,188 @@ +
+
+ + 通用样式 + + + ellipse通用样式1 + + + + ellipse通用样式2 + + + + ellipse通用样式3 + + + + + + ellipse通用样式4 + + + + ellipse通用样式5 + +
+ + +
+
+ + +
+
+ + 通用属性 + + + circle通用属性1 + + + + + + + circle通用属性2 + + + + + + + circle通用属性3 + + + + + + + circle通用属性4 + + + + + + + circle通用属性5 + + + + + + + circle通用属性6 + + + + + + + circle通用属性7 + + + + +
+ + +
+ + 动画样式 + + + ellipse动画样式1 + + + + + + ellipse动画样式2 + + + + +
+
+ + + + +
+
+ + 渐变样式 + + + ellipse渐变样式1 + + + + + + ellipse渐变样式2 + + + + + + ellipse渐变样式3 + + + + + + ellipse渐变样式4 + + + + +
+ + +
+ + 无障碍 + + + ellipse无障碍1 + + + + +
+ + + +
+ + 多模输入 + + + ellipse多模输入1 + + + + +
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/ellipse/index.js b/ace/ace_standard/src/main/js/default/pages/ellipse/index.js new file mode 100644 index 0000000000000000000000000000000000000000..260427920b4544e4c535477afa5a313bc1697f85 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/ellipse/index.js @@ -0,0 +1,26 @@ +/** + * 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. + */ +export default { + data: { + title: "" + }, + onShow(){ + // 通用属性 + var prop1 = this.$element("prop1"); + var name1 = prop1.dataSet.a + var prop2 = this.$refs.prop2; + var name2 = prop2.dataSet.a + } +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/gridCol/index.css b/ace/ace_standard/src/main/js/default/pages/gridCol/index.css new file mode 100644 index 0000000000000000000000000000000000000000..9edf054ca3daaeff9e781d11730e6157f67c95b1 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/gridCol/index.css @@ -0,0 +1,483 @@ +/** + * 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; +} + +.sub-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.style-container{ + flex-direction: column; + height: 70%; +} + +.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/image.png'); + 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; +} + +.style7 { + flex-direction: column; + flex-wrap:wrap; + justify-content:center; + align-items: center; + align-content:space-around; + display: flex; + height: 40px; + background-color: blue; +} + +.flex-item { + width: 20px; + height: 20px; + border-radius: 16px; +} + +.style8{ + flex-direction: row; + flex-wrap:nowrap; + scrollbar-color: yellow; + scrollbar-width: 10px; + overscroll-effect:spring; + height: 20px; + overflow:scroll; + flex-wrap:wrap; + justify-content:center; + align-items: center; + align-content:space-around; +} + +.style9{ + display: grid; + height: 20px; + grid-template-columns: 20% 20%; + grid-columns-gap: 14px; + grid-rows-gap: 4px; + grid-template-rows: 15% 15%; +} + +.color-primary { + background-color: mediumpurple; +} + +.color-warning { + background-color: pink; +} + +.color-success { + background-color: cornflowerblue; +} + +.grid-child { + width: 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; + flex-weight: 1; +} + +.event1{ + width: 60%; + flex-weight: 1; + background-color: yellow; +} + +.event2{ + width: 70%; + flex-weight: 1; + background-color: red; +} + +.event3{ + width: 80%; + flex-weight: 1; + background-color: #ad4e2a; +} + +.event4{ + flex-direction: row; + width: 90%; + flex-weight: 1; + overflow:scroll; +} + +.event5{ + flex-direction: column; + width: 100%; + height: 90px; + overflow:scroll; +} + +.prop-container{ + flex-direction: column; +} + +#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; + margin: 5px; + height: 70px; +} + +.ani-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.ani1{ + color: #72ac33; + 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); + 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) + } + 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; +} + +.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); +} + +.accessibility-container{ + flex-direction: column; +} + +.accessibility1{ + background-color: #321124; + margin: 5px; + width: 90%; + height: 30px; +} + +.atom-container{ + flex-direction: column; +} + +.multiMode-container{ + flex-direction: column; +} + +.multiMode1{ + background-color: #978666; + width: 100%; + height: 30px; + margin: 5px; +} + +.function-container{ + flex-direction: column; +} + +.function1{ + background-color: #ff0000; + width: 60%; + height: 20px; +} + +.function2{ + background-color: #00ff00; + width: 60%; + height: 20px; +} + +.function3{ + background-color: #0000ff; + width: 100%; + height: 20px; +} + +.function4{ + flex-direction: row; + width: 60%; + height: 20px; + overflow:scroll; +} +.container-style { + width: 100%; + height: 50px; + background-color: #b8b8bf; +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/gridCol/index.hml b/ace/ace_standard/src/main/js/default/pages/gridCol/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..590aa2265b5de75c772e29b6497a4ba6c3317ad7 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/gridCol/index.hml @@ -0,0 +1,311 @@ + + +
+
+
+ + 通用样式 + + + grid-col通用样式1 + + + + + + + grid-col通用样式2 + + + + + + + grid-col通用样式3 + + + + + + + grid-col通用样式4 + + + + + + + grid-col通用样式5 + + + + + + + + + grid-col特有样式 + + + + + + + + + + + + +
+ + +
+ + 动画样式 + + + grid-col动画样式1 + + + + + + + grid-col动画样式2 + + + + + +
+
+ +
+
+ +
+
+ + 通用属性 + + + grid-col通用属性1 + + + + + + + grid-col通用属性2 + + + + + + + grid-col通用属性3 + + + + + +
+
+
+
+ + 通用事件 + + + grid-col通用事件1 + + + + + + + grid-col通用事件2 + + + + + + + grid-col通用事件3 + + + + + +
+
+
+
+ + 通用方法 + + + grid-col通用方法1 + + +
+
+ + grid-col通用方法2 + + + + + grid-col通用方法3 + + + +
+
+ +
+
+ +
+
+ + 渐变样式 + + + grid-col渐变样式1 + + + + + grid-col渐变样式2 + + + + + grid-col渐变样式3 + + + + + grid-col渐变样式4 + + + +
+
+
+
+ + 无障碍 + + + grid-col无障碍1 + + + +
+
+
+
+ + 原子布局 + + + grid-col原子布局1 + +
+ + + + + + + + + + + + +
+ + grid-col原子布局2 + +
+ + + + + + + + + + + + +
+ + grid-col原子布局3 + +
+ + + + + + + + + + + + +
+
+
+
+ + 多模输入 + + + grid-col多模输入1 + grid-col多模输入1 + + + +
+
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/gridCol/index.js b/ace/ace_standard/src/main/js/default/pages/gridCol/index.js new file mode 100644 index 0000000000000000000000000000000000000000..63acfb7777e16a39b52dca69f1805da84225f1c7 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/gridCol/index.js @@ -0,0 +1,473 @@ +import prompt from '@system.prompt'; + +export default { + + onShow(){ + // 通用属性 + var prop1 = this.$element('prop1'); + var name1 = prop1.dataSet.name + var prop2 = this.$refs.prop2; + var name2 = prop2.dataSet.name + prompt.showToast({ + message: 'prop1--' + name1 + '\nprop2--' + name2 + }); + }, + + touchStart(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchstart:\n' + message + }); + }, + + touchMove(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchMove:\n' +message + }); + }, + + touchEnd(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchEnd:\n' +message + }); + }, + + touchCancel(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchCancel:\n' +message + }); + }, + + click(){ + prompt.showToast({ + message: 'click' + }); + }, + + doubleClick(){ + prompt.showToast({ + message: 'doubleClick' + }); + }, + + longPress(){ + prompt.showToast({ + message: 'longPress' + }); + }, + + focus(){ + prompt.showToast({ + message: 'focus' + }); + }, + + blur(){ + prompt.showToast({ + message: 'blur' + }); + }, + + key(event){ + var code = event.code; + var action = event.action; + var repeatCount = event.repeatCount; + var timestampStart = event.timestampStart; + var message = 'code--' + code + ',action--' + action + + ',repeatCount--' + repeatCount + ',timestampStart--' + timestampStart; + prompt.showToast({ + message: 'key:\n' + message + }); + }, + + swipe(event){ + var direction = event.direction; + var distance = event.distance; + var message = 'direction--' + direction + ',distance--' + distance; + prompt.showToast({ + message: 'swipe:\n' + message + }); + }, + + attached(){ + prompt.showToast({ + message: 'attached' + }); + }, + + detached(){ + prompt.showToast({ + message: 'detached' + }); + }, + + pinchStart(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchStart:\n' + message + }); + }, + + pinchUpdate(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchUpdate:\n' + message + }); + }, + + pinchEnd(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchUpdate:\n' + message + }); + }, + + pinchCancel(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchCancel:\n' + message + }); + }, + + dragStart(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragStart:\n' + message + }); + }, + + drag(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'drag:\n' + message + }); + }, + + dragEnd(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragEnd:\n' + message + }); + }, + + dragEnter(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragEnter:\n' + message + }); + }, + + dragOver(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragOver:\n' + message + }); + }, + + dragLeave(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragLeave:\n' + message + }); + }, + + drop(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'drop:\n' + message + }); + }, + + functionTest1(event){ + var function1 = this.$element('function1'); + function1.focus(true) + var rect = function1.getBoundingClientRect(); + var width = rect.width; + var height = rect.height; + var left = rect.left; + var top = rect.top; + var message = 'width--' + width + ',height--' + height + + ',left--' + left + ',top--' + top; + prompt.showToast({ + message: 'function1 rect:\n' + message + }); + }, + + functionTest2(event){ + var function2 = this.$element('function2'); + let observer = function2.createIntersectionObserver({ + ratios: [0.2, 0], // number + }); + observer.observe((isVisible, ratio)=> { + console.info('this element is ' + isVisible + 'ratio is ' + ratio) + prompt.showToast({ + message: 'function2 observer:\n' + 'isVisible--' + isVisible + ',ratio--' + ratio + }); + }) + + observer.unobserve() + }, + + functionTest3(event){ + var function3 = this.$element('function3'); + var options = { + duration: 1500, + easing: 'friction', + delay: 100, + fill: 'forwards', + iterations: 2, + direction: 'normal', + }; + var frames = [ + { + transform: { + translate: '-120px', + rotate:'10deg', + scale:0.2, + skew:'40deg' + }, + opacity: 0.1, + offset: 0.0, + width: '40%', + height:'20px', + backgroundColor:'#ff0000', + backgroundPosition:'10px 20px', + transformOrigin:'left top' + }, + { + transform: { + translateX: '0px', + translateY: '5px', + rotateX:'10deg', + rotateY:'10deg', + scaleX:0.5, + scaleY:0.7, + skewX:'22deg', + skewY:'30deg' + }, + opacity: 0.6, + offset: 2.0, + width: '60%', + height:'30px', + backgroundColor:'#ff00ff', + backgroundPosition:'15px 25px', + transformOrigin:'center top' + }, + { + transform: { + translateX: '100px', + translateY: '0px', + translateZ: '20px', + rotateX:'0deg', + rotateY:'0deg', + rotateZ:'30deg', + scaleX:1, + scaleY:1, + scaleZ:2, + skewX:'0', + skewY:'0', + skewZ:'30deg' + }, + opacity: 1, + offset: 0.0, + width: '100%', + height:'30px', + backgroundColor:'#ffff00', + backgroundPosition:'0px', + transformOrigin:'center center' + }, + ]; + + var animation = function3.animate(frames, options); + animation.play() + animation.onfinish = function(){ + prompt.showToast({ + message: 'The animation is finished.' + }); + }; + + animation.oncancel = function(){ + prompt.showToast({ + message: 'The animation is canceled.' + }); + }; + + animation.onrepeat = function(){ + prompt.showToast({ + message: 'The animation is repeated.' + }); + }; + + setTimeout(() => { + animation.reverse() + }, 500) + + setTimeout(() => { + animation.pause() + }, 1000) + + setTimeout(() => { + animation.cancel() + }, 1500) + }, + + functionTest4(event){ + var function4 = this.$element('function4'); + var scrollOffset = function4.getScrollOffset(); + var x = scrollOffset.x; + var y = scrollOffset.y; + var message = 'x--' + x + ',y--' + y; + prompt.showToast({ + message: 'functionTest4 scrollOffset:\n' + message + }); + + var scrollParam = { + dx:60, + dy:0, + smooth:true + } + function4.scrollBy(scrollParam) + }, + + reachStart(){ + prompt.showToast({ + message: 'reachStart' + }); + }, + + reachEnd(){ + prompt.showToast({ + message: 'reachEnd' + }); + }, + + reachTop(){ + prompt.showToast({ + message: 'reachTop' + }); + }, + + reachBottom(){ + prompt.showToast({ + message: 'reachBottom' + }); + } +} diff --git a/ace/ace_standard/src/main/js/default/pages/gridContainer/index.css b/ace/ace_standard/src/main/js/default/pages/gridContainer/index.css new file mode 100644 index 0000000000000000000000000000000000000000..a58a8da247be09d336bc9b454d1f39cd492c534c --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/gridContainer/index.css @@ -0,0 +1,483 @@ +/** + * 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; +} + +.sub-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.style-container{ + flex-direction: column; + height: 100%; + flex-weight: 2; +} + +.title{ + width: 100%; + font-size: 18px; + margin: 2px; + padding: 2px; + font-weight: bold; + text-align: center; +} + +.sub-title{ + width: 100%; + height: 50px; + 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: 3px; + padding-top: 3px; + padding-right: 3px; + 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: 60px; + height: 30px; + padding-start: 2px; + padding-end: 2px; + 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%; + height:10%; + padding: 0px; + 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:50px; + flex-shrink: 1; +} +.style4{ + width: 60%; + height: 6%; + padding: 2px; + margin: 5px; + border: 2px solid #000000; +} + +.contain1{ + width: 100%; + height: 150px; + 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; +} + +.style7 { + width: 100%; + height:60px; + margin-top: 10px; + flex-direction: row; + justify-content: space-around; + align-items: center; + align-content: flex-start; +} + +.flex-item { + width: 20px; + height: 20px; + border-radius: 16px; +} + +.style8{ + flex-direction: row; + flex-wrap:nowrap; + scrollbar-color: yellow; + scrollbar-width: 10px; + overscroll-effect:spring; + height: 40px; + overflow:scroll; +} + +.style9{ + display: grid; + height: 40px; + grid-template-columns: 20% 20%; + grid-columns-gap: 14px; + grid-rows-gap: 4px; + grid-template-rows: 15% 15%; +} + +.color-primary { + background-color: mediumpurple; +} + +.color-warning { + background-color: pink; +} + +.color-success { + background-color: cornflowerblue; +} + +.grid-child { + width: 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; + flex-weight:1; +} + +.event1{ + width: 60%; + flex-weight: 1; + background-color: yellow; +} + +.event2{ + width: 70%; + flex-weight: 1; + background-color: red; +} + +.event3{ + width: 80%; + flex-weight: 1; + background-color: #ad4e2a; +} + +.event4{ + flex-direction: row; + width: 90%; + flex-weight: 1; + overflow:scroll; +} + +.event5{ + width: 100%; + height: 30px; +} + + +.prop-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +#prop1 { + width: 80%; + height:20px; + background-color: #ad4e2a; + margin: 2px; +} + +.prop2 { + width: 80%; + height:20px; + background-color: #343524; + margin: 2px; +} +.prop3{ + width: 80%; + height: 20px; +} +.prop4 { + width: 80%; + height:20px; + background-color: #456345; + margin: 2px; +} + + +.ani-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.ani1{ + color: #72ac33; + 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; +} + + +.gradient-container{ + flex-direction: column; +} + +.gradient1{ + height:20px; + margin: 5px; + background: linear-gradient(red, #00ff00); +} + +.gradient2{ + height:20px; + margin: 5px; + background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0)); +} + +.gradient3{ + height:20px; + margin: 5px; + background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%); +} + +.gradient4{ + height:20px; + margin: 5px; + background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px); +} + +.accessibility-container{ + flex-direction: column; +} + +.accessibility1{ + height:20px; + background-color: #321124; + margin: 5px; +} + +.atom-container{ + flex-direction: column; +} + +.multimode-container{ + flex-direction: column; +} + +.multimode1{ + color: #978666; + margin: 5px; +} +.function-container{ + flex-direction: column; +} + +.function1{ + background-color: #ff0000; + width: 60%; + height: 20px; +} + +.function2{ + background-color: #00ff00; + width: 60%; + height: 20px; +} + +.function3{ + background-color: #0000ff; + width: 100%; + height: 20px; +} + +.function4{ + flex-direction: row; + width: 80%; + height: 40px; + background-color: #c4c4f8; + flex-direction: row; + justify-content: space-around; + align-items: center; + align-content: flex-start; +} +.flex-class{ + margin-top: 5px; + width: 100%; + height: 30px; + display: flex; +/* background-color: #ee6363;*/ + justify-content: center; + align-items: center; +} +.row-style{ + width:40px; + height: 10px; + background-color: blue; +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/gridContainer/index.hml b/ace/ace_standard/src/main/js/default/pages/gridContainer/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..fbdac37b2173b89b31df9590a0ff4cc11ec88b9b --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/gridContainer/index.hml @@ -0,0 +1,324 @@ + + +
+
+
+ + 通用样式 + + + container通用样式1 + + + + + + + container通用样式2 + + + + + + + container通用样式3 + + + + + + + container通用样式4 + + + + + + + container通用样式5 + +
+ + + + + + + + +
+ + container特有样式 + + + + + + + + + +
+ + +
+ + 动画样式 + + + container动画样式1 + + + + + + + container动画样式2 + + + + + +
+
+ +
+
+ +
+
+ + 通用属性 + + + container通用属性1 + + + + + + + container通用属性2 + + + + + + + container通用属性3 + + + + + + + container特有属性4 + + + +
+
+
+
+ + 通用事件 + + + container通用事件1 + + + + + container通用事件2 + + + + + container通用事件3 + + + + +
+
+
+
+ + 通用方法 + + + div通用方法1 + +
+
+ + div通用方法2 + + + + + div通用方法3 + + + + + div特有方法 + + + + + + + + + +
+
+ +
+
+ +
+
+ + 渐变样式 + + + div渐变样式1 + + + + + div渐变样式2 + + + + + div渐变样式3 + + + + + div渐变样式4 + + + +
+
+
+
+ + 无障碍 + + + div无障碍1 + + + +
+
+
+
+ + 原子布局 + + + div原子布局1 + +
+ + + + + + + + + + + + +
+ + div原子布局2 + +
+ + + + + + + + + + + + +
+ + div原子布局3 + +
+ + + + + + + + + + + + +
+
+
+
+ + 多模输入 + + + div多模输入1 + + + +
+
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/gridContainer/index.js b/ace/ace_standard/src/main/js/default/pages/gridContainer/index.js new file mode 100644 index 0000000000000000000000000000000000000000..8e29a6a47e061d228212fb97750851528fac2527 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/gridContainer/index.js @@ -0,0 +1,479 @@ +import prompt from '@system.prompt'; +export default { + onShow(){ + // 通用属性 + var prop1 = this.$element('prop1'); + this.get() + + var name1 = prop1.dataSet.name + var prop2 = this.$refs.prop2; + var name2 = prop2.dataSet.name + prompt.showToast({ + message: 'prop1--' + name1 + '\nprop2--' + name2 + }); + }, + + get(){ + console.info("getColumns:"+this.$element('function4').getColumns()) + console.info("getGutterWidth:"+this.$element('function4').getGutterWidth()) + console.info("getColumnWidth:"+this.$element('function4').getColumnWidth()) + console.info("getSizeType:"+this.$element('function4').getSizeType()) + },4 + touchStart(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchstart:\n' + message + }); + }, + + touchMove(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchMove:\n' +message + }); + }, + + touchEnd(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchEnd:\n' +message + }); + }, + + touchCancel(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchCancel:\n' +message + }); + }, + + click(){ + prompt.showToast({ + message: 'click' + }); + }, + + doubleClick(){ + prompt.showToast({ + message: 'doubleClick' + }); + }, + + longPress(){ + prompt.showToast({ + message: 'longPress' + }); + }, + + focus(){ + prompt.showToast({ + message: 'focus' + }); + }, + + blur(){ + prompt.showToast({ + message: 'blur' + }); + }, + + key(event){ + var code = event.code; + var action = event.action; + var repeatCount = event.repeatCount; + var timestampStart = event.timestampStart; + var message = 'code--' + code + ',action--' + action + + ',repeatCount--' + repeatCount + ',timestampStart--' + timestampStart; + prompt.showToast({ + message: 'key:\n' + message + }); + }, + + swipe(event){ + var direction = event.direction; + var distance = event.distance; + var message = 'direction--' + direction + ',distance--' + distance; + prompt.showToast({ + message: 'swipe:\n' + message + }); + }, + + attached(){ + prompt.showToast({ + message: 'attached' + }); + }, + + detached(){ + prompt.showToast({ + message: 'detached' + }); + }, + + pinchStart(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchStart:\n' + message + }); + }, + + pinchUpdate(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchUpdate:\n' + message + }); + }, + + pinchEnd(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchUpdate:\n' + message + }); + }, + + pinchCancel(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchCancel:\n' + message + }); + }, + + dragStart(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragStart:\n' + message + }); + }, + + drag(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'drag:\n' + message + }); + }, + + dragEnd(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragEnd:\n' + message + }); + }, + + dragEnter(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragEnter:\n' + message + }); + }, + + dragOver(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragOver:\n' + message + }); + }, + + dragLeave(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragLeave:\n' + message + }); + }, + + drop(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'drop:\n' + message + }); + }, + + functionTest1(event){ + var function1 = this.$element('function1'); + function1.focus(true) + var rect = function1.getBoundingClientRect(); + var width = rect.width; + var height = rect.height; + var left = rect.left; + var top = rect.top; + var message = 'width--' + width + ',height--' + height + + ',left--' + left + ',top--' + top; + prompt.showToast({ + message: 'function1 rect:\n' + message + }); + }, + + functionTest2(event){ + var function2 = this.$element('function2'); + let observer = function2.createIntersectionObserver({ + ratios: [0.2, 0], // number + }); + observer.observe((isVisible, ratio)=> { + console.info('this element is ' + isVisible + 'ratio is ' + ratio) + prompt.showToast({ + message: 'function2 observer:\n' + 'isVisible--' + isVisible + ',ratio--' + ratio + }); + }) + + observer.unobserve() + }, + + functionTest3(event){ + var function3 = this.$element('function3'); + var options = { + duration: 1500, + easing: 'friction', + delay: 100, + fill: 'forwards', + iterations: 2, + direction: 'normal', + }; + var frames = [ + { + transform: { + translate: '-120px', + rotate:'10deg', + scale:0.2, + skew:'40deg' + }, + opacity: 0.1, + offset: 0.0, + width: '40%', + height:'20px', + backgroundColor:'#ff0000', + backgroundPosition:'10px 20px', + transformOrigin:'left top' + }, + { + transform: { + translateX: '0px', + translateY: '5px', + rotateX:'10deg', + rotateY:'10deg', + scaleX:0.5, + scaleY:0.7, + skewX:'22deg', + skewY:'30deg' + }, + opacity: 0.6, + offset: 2.0, + width: '60%', + height:'30px', + backgroundColor:'#ff00ff', + backgroundPosition:'15px 25px', + transformOrigin:'center top' + }, + { + transform: { + translateX: '100px', + translateY: '0px', + translateZ: '20px', + rotateX:'0deg', + rotateY:'0deg', + rotateZ:'30deg', + scaleX:1, + scaleY:1, + scaleZ:2, + skewX:'0', + skewY:'0', + skewZ:'30deg' + }, + opacity: 1, + offset: 0.0, + width: '100%', + height:'30px', + backgroundColor:'#ffff00', + backgroundPosition:'0px', + transformOrigin:'center center' + }, + ]; + + var animation = function3.animate(frames, options); + animation.play() + animation.onfinish = function(){ + prompt.showToast({ + message: 'The animation is finished.' + }); + }; + + animation.oncancel = function(){ + prompt.showToast({ + message: 'The animation is canceled.' + }); + }; + + animation.onrepeat = function(){ + prompt.showToast({ + message: 'The animation is repeated.' + }); + }; + + setTimeout(() => { + animation.reverse() + }, 500) + + setTimeout(() => { + animation.pause() + }, 1000) + + setTimeout(() => { + animation.cancel() + }, 1500) + }, + + functionTest4(event){ + var function4 = this.$element('function4'); + var scrollOffset = function4.getScrollOffset(); + var x = scrollOffset.x; + var y = scrollOffset.y; + var message = 'x--' + x + ',y--' + y; + prompt.showToast({ + message: 'functionTest4 scrollOffset:\n' + message + }); + + var scrollParam = { + dx:60, + dy:0, + smooth:true + } + function4.scrollBy(scrollParam) + }, + + reachStart(){ + prompt.showToast({ + message: 'reachStart' + }); + }, + + reachEnd(){ + prompt.showToast({ + message: 'reachEnd' + }); + }, + + reachTop(){ + prompt.showToast({ + message: 'reachTop' + }); + }, + + reachBottom(){ + prompt.showToast({ + message: 'reachBottom' + }); + } +} diff --git a/ace/ace_standard/src/main/js/default/pages/gridRow/index.css b/ace/ace_standard/src/main/js/default/pages/gridRow/index.css new file mode 100644 index 0000000000000000000000000000000000000000..9edf054ca3daaeff9e781d11730e6157f67c95b1 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/gridRow/index.css @@ -0,0 +1,483 @@ +/** + * 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; +} + +.sub-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.style-container{ + flex-direction: column; + height: 70%; +} + +.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/image.png'); + 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; +} + +.style7 { + flex-direction: column; + flex-wrap:wrap; + justify-content:center; + align-items: center; + align-content:space-around; + display: flex; + height: 40px; + background-color: blue; +} + +.flex-item { + width: 20px; + height: 20px; + border-radius: 16px; +} + +.style8{ + flex-direction: row; + flex-wrap:nowrap; + scrollbar-color: yellow; + scrollbar-width: 10px; + overscroll-effect:spring; + height: 20px; + overflow:scroll; + flex-wrap:wrap; + justify-content:center; + align-items: center; + align-content:space-around; +} + +.style9{ + display: grid; + height: 20px; + grid-template-columns: 20% 20%; + grid-columns-gap: 14px; + grid-rows-gap: 4px; + grid-template-rows: 15% 15%; +} + +.color-primary { + background-color: mediumpurple; +} + +.color-warning { + background-color: pink; +} + +.color-success { + background-color: cornflowerblue; +} + +.grid-child { + width: 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; + flex-weight: 1; +} + +.event1{ + width: 60%; + flex-weight: 1; + background-color: yellow; +} + +.event2{ + width: 70%; + flex-weight: 1; + background-color: red; +} + +.event3{ + width: 80%; + flex-weight: 1; + background-color: #ad4e2a; +} + +.event4{ + flex-direction: row; + width: 90%; + flex-weight: 1; + overflow:scroll; +} + +.event5{ + flex-direction: column; + width: 100%; + height: 90px; + overflow:scroll; +} + +.prop-container{ + flex-direction: column; +} + +#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; + margin: 5px; + height: 70px; +} + +.ani-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.ani1{ + color: #72ac33; + 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); + 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) + } + 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; +} + +.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); +} + +.accessibility-container{ + flex-direction: column; +} + +.accessibility1{ + background-color: #321124; + margin: 5px; + width: 90%; + height: 30px; +} + +.atom-container{ + flex-direction: column; +} + +.multiMode-container{ + flex-direction: column; +} + +.multiMode1{ + background-color: #978666; + width: 100%; + height: 30px; + margin: 5px; +} + +.function-container{ + flex-direction: column; +} + +.function1{ + background-color: #ff0000; + width: 60%; + height: 20px; +} + +.function2{ + background-color: #00ff00; + width: 60%; + height: 20px; +} + +.function3{ + background-color: #0000ff; + width: 100%; + height: 20px; +} + +.function4{ + flex-direction: row; + width: 60%; + height: 20px; + overflow:scroll; +} +.container-style { + width: 100%; + height: 50px; + background-color: #b8b8bf; +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/gridRow/index.hml b/ace/ace_standard/src/main/js/default/pages/gridRow/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..b0bfd1d9e2359514894673f1af922949df234178 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/gridRow/index.hml @@ -0,0 +1,310 @@ + + +
+
+
+ + 通用样式 + + + div通用样式1 + + + + + + + div通用样式2 + + + + + + + div通用样式3 + + + + + + + div通用样式4 + + + + + + + div通用样式5 + + + + + + + + + div特有样式 + + + + + + + + + + + + +
+ + +
+ + 动画样式 + + + div动画样式1 + + + + + + + div动画样式2 + + + + + +
+
+ +
+
+ +
+
+ + 通用属性 + + + div通用属性1 + + + + + + + div通用属性2 + + + + + + + div通用属性3 + + + + + +
+
+
+
+ + 通用事件 + + + div通用事件1 + + + + + + + div通用事件2 + + + + + + + div通用事件3 + + + + + +
+
+
+
+ + 通用方法 + + + div通用方法1 + + +
+
+ + div通用方法2 + + + + + div通用方法3 + + + +
+
+ +
+
+ +
+
+ + 渐变样式 + + + div渐变样式1 + + + + + div渐变样式2 + + + + + div渐变样式3 + + + + + div渐变样式4 + + + +
+
+
+
+ + 无障碍 + + + div无障碍1 + + + +
+
+
+
+ + 原子布局 + + + div原子布局1 + +
+ + + + + + + + + + + + +
+ + div原子布局2 + +
+ + + + + + + + + + + + +
+ + div原子布局3 + +
+ + + + + + + + + + + + +
+
+
+
+ + 多模输入 + + + div多模输入1 + + + +
+
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/gridRow/index.js b/ace/ace_standard/src/main/js/default/pages/gridRow/index.js new file mode 100644 index 0000000000000000000000000000000000000000..63acfb7777e16a39b52dca69f1805da84225f1c7 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/gridRow/index.js @@ -0,0 +1,473 @@ +import prompt from '@system.prompt'; + +export default { + + onShow(){ + // 通用属性 + var prop1 = this.$element('prop1'); + var name1 = prop1.dataSet.name + var prop2 = this.$refs.prop2; + var name2 = prop2.dataSet.name + prompt.showToast({ + message: 'prop1--' + name1 + '\nprop2--' + name2 + }); + }, + + touchStart(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchstart:\n' + message + }); + }, + + touchMove(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchMove:\n' +message + }); + }, + + touchEnd(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchEnd:\n' +message + }); + }, + + touchCancel(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchCancel:\n' +message + }); + }, + + click(){ + prompt.showToast({ + message: 'click' + }); + }, + + doubleClick(){ + prompt.showToast({ + message: 'doubleClick' + }); + }, + + longPress(){ + prompt.showToast({ + message: 'longPress' + }); + }, + + focus(){ + prompt.showToast({ + message: 'focus' + }); + }, + + blur(){ + prompt.showToast({ + message: 'blur' + }); + }, + + key(event){ + var code = event.code; + var action = event.action; + var repeatCount = event.repeatCount; + var timestampStart = event.timestampStart; + var message = 'code--' + code + ',action--' + action + + ',repeatCount--' + repeatCount + ',timestampStart--' + timestampStart; + prompt.showToast({ + message: 'key:\n' + message + }); + }, + + swipe(event){ + var direction = event.direction; + var distance = event.distance; + var message = 'direction--' + direction + ',distance--' + distance; + prompt.showToast({ + message: 'swipe:\n' + message + }); + }, + + attached(){ + prompt.showToast({ + message: 'attached' + }); + }, + + detached(){ + prompt.showToast({ + message: 'detached' + }); + }, + + pinchStart(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchStart:\n' + message + }); + }, + + pinchUpdate(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchUpdate:\n' + message + }); + }, + + pinchEnd(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchUpdate:\n' + message + }); + }, + + pinchCancel(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchCancel:\n' + message + }); + }, + + dragStart(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragStart:\n' + message + }); + }, + + drag(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'drag:\n' + message + }); + }, + + dragEnd(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragEnd:\n' + message + }); + }, + + dragEnter(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragEnter:\n' + message + }); + }, + + dragOver(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragOver:\n' + message + }); + }, + + dragLeave(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragLeave:\n' + message + }); + }, + + drop(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'drop:\n' + message + }); + }, + + functionTest1(event){ + var function1 = this.$element('function1'); + function1.focus(true) + var rect = function1.getBoundingClientRect(); + var width = rect.width; + var height = rect.height; + var left = rect.left; + var top = rect.top; + var message = 'width--' + width + ',height--' + height + + ',left--' + left + ',top--' + top; + prompt.showToast({ + message: 'function1 rect:\n' + message + }); + }, + + functionTest2(event){ + var function2 = this.$element('function2'); + let observer = function2.createIntersectionObserver({ + ratios: [0.2, 0], // number + }); + observer.observe((isVisible, ratio)=> { + console.info('this element is ' + isVisible + 'ratio is ' + ratio) + prompt.showToast({ + message: 'function2 observer:\n' + 'isVisible--' + isVisible + ',ratio--' + ratio + }); + }) + + observer.unobserve() + }, + + functionTest3(event){ + var function3 = this.$element('function3'); + var options = { + duration: 1500, + easing: 'friction', + delay: 100, + fill: 'forwards', + iterations: 2, + direction: 'normal', + }; + var frames = [ + { + transform: { + translate: '-120px', + rotate:'10deg', + scale:0.2, + skew:'40deg' + }, + opacity: 0.1, + offset: 0.0, + width: '40%', + height:'20px', + backgroundColor:'#ff0000', + backgroundPosition:'10px 20px', + transformOrigin:'left top' + }, + { + transform: { + translateX: '0px', + translateY: '5px', + rotateX:'10deg', + rotateY:'10deg', + scaleX:0.5, + scaleY:0.7, + skewX:'22deg', + skewY:'30deg' + }, + opacity: 0.6, + offset: 2.0, + width: '60%', + height:'30px', + backgroundColor:'#ff00ff', + backgroundPosition:'15px 25px', + transformOrigin:'center top' + }, + { + transform: { + translateX: '100px', + translateY: '0px', + translateZ: '20px', + rotateX:'0deg', + rotateY:'0deg', + rotateZ:'30deg', + scaleX:1, + scaleY:1, + scaleZ:2, + skewX:'0', + skewY:'0', + skewZ:'30deg' + }, + opacity: 1, + offset: 0.0, + width: '100%', + height:'30px', + backgroundColor:'#ffff00', + backgroundPosition:'0px', + transformOrigin:'center center' + }, + ]; + + var animation = function3.animate(frames, options); + animation.play() + animation.onfinish = function(){ + prompt.showToast({ + message: 'The animation is finished.' + }); + }; + + animation.oncancel = function(){ + prompt.showToast({ + message: 'The animation is canceled.' + }); + }; + + animation.onrepeat = function(){ + prompt.showToast({ + message: 'The animation is repeated.' + }); + }; + + setTimeout(() => { + animation.reverse() + }, 500) + + setTimeout(() => { + animation.pause() + }, 1000) + + setTimeout(() => { + animation.cancel() + }, 1500) + }, + + functionTest4(event){ + var function4 = this.$element('function4'); + var scrollOffset = function4.getScrollOffset(); + var x = scrollOffset.x; + var y = scrollOffset.y; + var message = 'x--' + x + ',y--' + y; + prompt.showToast({ + message: 'functionTest4 scrollOffset:\n' + message + }); + + var scrollParam = { + dx:60, + dy:0, + smooth:true + } + function4.scrollBy(scrollParam) + }, + + reachStart(){ + prompt.showToast({ + message: 'reachStart' + }); + }, + + reachEnd(){ + prompt.showToast({ + message: 'reachEnd' + }); + }, + + reachTop(){ + prompt.showToast({ + message: 'reachTop' + }); + }, + + reachBottom(){ + prompt.showToast({ + message: 'reachBottom' + }); + } +} diff --git a/ace/ace_standard/src/main/js/default/pages/line/index.css b/ace/ace_standard/src/main/js/default/pages/line/index.css new file mode 100644 index 0000000000000000000000000000000000000000..883af7d1fd94729b28b41201b94a9e758a0f82bc --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/line/index.css @@ -0,0 +1,369 @@ +/** + * 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; +} + +.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: 100px; + height: 50px; + 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/image.png'); + background-size:cover; + background-repeat: repeat-x; + background-position: center; + flex:1; + flex-grow: 2; + flex-basis: 10px; + flex-shrink: 1; +} + +.style4{ + width: 85%; + height: 7%; + padding: 10px; + margin: 5px; + border: 2px solid #000000; +} + +.contain1{ + width: 100%; + height: 70px; + flex-direction: column; +} + +.style5{ + width: 80%; + height: 50px; + 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: 100px; + height: 50px; + position: absolute; + left: 10px; + top: 50px; + 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: 2; + align-items: center; +} + +#prop1 { + background-color: mediumslateblue; + width: 100%; + margin: 3px 5px; +} + +.prop2 { + background-color: pink; + width: 100%; + margin: 3px 5px; +} + +.prop3 { + background-color: darkseagreen; + width: 100%; + margin: 3px 5px; +} + +.prop4 { + background-color: yellowgreen; + width: 100%; + margin: 3px 5px; +} + +.prop5 { + background-color: cornflowerblue; + width: 100%; + margin: 3px 5px; +} + +.prop6 { + background-color: burlywood; + width: 100%; + margin: 3px 5px; +} + +.prop7 { + background-color: tomato; + width: 100%; + margin: 3px 5px; +} + +.prop8 { + background-color: darkblue; + width: 100%; + margin: 3px 5px; +} + +.prop9 { + background-color: blueviolet; + width: 100%; + margin: 3px 5px; +} + + +.ani-container{ + flex-direction: column; + height: 100%; + flex-weight: 0.8; +} + +.ani1{ + color: #72ac33; + stroke-width: 55px; + 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; + stroke-width: 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; + flex-weight: 1; +} + +.gradient1{ + stroke-width: 30px; + margin: 5px; + background: linear-gradient(red, #00ff00); +} + +.gradient2{ + stroke-width: 30px; + margin: 5px; + background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0)); +} + +.gradient3{ + stroke-width: 30px; + margin: 5px; + background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%); +} + +.gradient4{ + stroke-width: 30px; + margin: 5px; + background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px); +} + +.access-container{ + flex-direction: column; +} + +.access1{ + color: #321124; + stroke-width: 30px; + margin: 5px; +} + +.atom-container{ + flex-direction: column; +} + +.multimode-container{ + flex-direction: column; +} + +.multimode1{ + color: #978666; + stroke-width: 30px; + margin: 5px; +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/line/index.hml b/ace/ace_standard/src/main/js/default/pages/line/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..f3f5410cb16f4c632103779c4ffab3bb8fcd2908 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/line/index.hml @@ -0,0 +1,207 @@ +
+
+ + 通用样式 + + + line通用样式1 + + + + + + line通用样式2 + + + + + + line通用样式3 + + + + + + line通用样式4 + + + + + + line通用样式5 + +
+ + + + + + +
+
+ + + +
+
+ + 通用属性 + + + line通用属性1 + + + + + + + line通用属性2 + + + + + + + line通用属性3 + + + + + + line通用属性4 + + + + + + line通用属性5 + + + + + + + line通用属性6 + + + + + + + line通用属性7 + + + + + + + line通用属性8 + + + + + + + line通用属性9 + + + + + +
+ + +
+ + 动画样式 + + + line动画样式1 + + + + + + path动画样式2 + + + + +
+
+ + + + +
+
+ + 渐变样式 + + + line渐变样式1 + + + + + + line渐变样式2 + + + + + + line渐变样式3 + + + + + + line渐变样式4 + + + + +
+ + +
+ + 无障碍 + + + line无障碍1 + + + + +
+ + + +
+ + 多模输入 + + + line多模输入1 + + + + +
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/line/index.js b/ace/ace_standard/src/main/js/default/pages/line/index.js new file mode 100644 index 0000000000000000000000000000000000000000..260427920b4544e4c535477afa5a313bc1697f85 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/line/index.js @@ -0,0 +1,26 @@ +/** + * 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. + */ +export default { + data: { + title: "" + }, + onShow(){ + // 通用属性 + var prop1 = this.$element("prop1"); + var name1 = prop1.dataSet.a + var prop2 = this.$refs.prop2; + var name2 = prop2.dataSet.a + } +} \ 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/index.css new file mode 100644 index 0000000000000000000000000000000000000000..a8de94ded8dbf0356080a2ade9b0e30a2a910e2a --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_CanvasGradient/index.css @@ -0,0 +1,480 @@ +/** + * 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); +} + +.accessibility-container{ + flex-direction: column; +} + +.accessibility1{ + width: 100%; + height: 30px; +} + +.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_CanvasGradient/index.hml b/ace/ace_standard/src/main/js/default/pages/obj_CanvasGradient/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..8d90041679bef595eb507f3af40136ae8f165eb4 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_CanvasGradient/index.hml @@ -0,0 +1,29 @@ + + +
+
+
+ + CanvasGradient对象的方法 + + + 方法1 + + +
+
+ +
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/index.js new file mode 100644 index 0000000000000000000000000000000000000000..6c28adff32a1ee4f784d89624268279743e81def --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_CanvasGradient/index.js @@ -0,0 +1,35 @@ +/** + * 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.functionTest() + }, + functionTest() { + const el =this.$refs.canvas; + const ctx =el.getContext('2d'); + const gradient = ctx.createLinearGradient(0,0,200,0); + gradient.addColorStop(0,'#00ffff'); + gradient.addColorStop(1,'#ffff00'); + ctx.fillStyle=gradient; + ctx.fillRect(20,20,300,100); + }, + +} \ No newline at end of file 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/index.css new file mode 100644 index 0000000000000000000000000000000000000000..a8de94ded8dbf0356080a2ade9b0e30a2a910e2a --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_CanvasRenderingContext2D/index.css @@ -0,0 +1,480 @@ +/** + * 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); +} + +.accessibility-container{ + flex-direction: column; +} + +.accessibility1{ + width: 100%; + height: 30px; +} + +.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_CanvasRenderingContext2D/index.hml b/ace/ace_standard/src/main/js/default/pages/obj_CanvasRenderingContext2D/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..cd3f2d9be7915c9ece4c1478945ae7c8df4a702f --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_CanvasRenderingContext2D/index.hml @@ -0,0 +1,171 @@ + + +
+
+
+ + 对象的属性 + + + 属性1 + + + + + 属性2 + + + + + 属性3 + + + + + 属性4 + + + + + 属性5 + + + + + 属性6 + + + + + 属性7 + + + + + 属性8 + + + + + 属性9 + + + +
+
+ + + + +
+
+ + 属性10 + + + + + 属性11 + + + + + 属性12 + + + + + + + + + 对象的方法 + + + 方法1 + + + + + 方法2 + + + + + 方法3 + + + + + 方法4 + + + + 方法5 + + +
+
+ + + + +
+
+ + 方法6 + + + + 方法7 + + + + 方法8 + + + + 方法9 + + + + 方法10 + + + + 方法11 + + + + 方法12 + + + + 方法13 + + + + 方法14 + + + + 方法15 + + +
+
+ +
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/index.js new file mode 100644 index 0000000000000000000000000000000000000000..cae268cf0b1d5212bf23e5b67f48872fa01479bf --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_CanvasRenderingContext2D/index.js @@ -0,0 +1,287 @@ +/** + * 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.functionTouch1() + this.functionTouch2() + this.functionTouch3() + this.functionTouch4() + this.functionTouch5() + this.functionTouch6() + this.functionTouch7() + this.functionTouch8() + this.functionTouch9() + this.functionTouch10() + this.functionTouch11() + this.functionTouch12() + this.functionTouch13() + this.functionTouch14() + this.functionTouch15() + }, + 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.strokeStyle = '#0000ff'; + 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 = 30; + ctx.shadowColor = 'rgb(0,0,0)'; + ctx.fillStyle = 'rgb(255,0,0)'; + ctx.fillRect(20, 20, 70, 50); + }, + props11() { + const el =this.$refs.canvas11; + const ctx = el.getContext('2d'); + ctx.shadowBlur = 10; + ctx.shadowOffsetX = 20; + ctx.shadowOffsetY = 20; + ctx.shadowColor = 'rgb(0,0,0)'; + ctx.fillStyle = 'rgb(255,0,0)'; + ctx.fillRect(10, 0, 70, 50); + }, + props12() { + const el =this.$refs.canvas12; + 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); + }; + }, + + functionTouch1() { + const el =this.$refs.function1; + const ctx = el.getContext('2d'); + ctx.fillStyle = 'rgb(0,0,255)'; + ctx.fillRect(0, 0, 100, 40); + ctx.clearRect(20, 10, 60, 20); + }, + functionTouch2() { + const el =this.$refs.function2; + const ctx = el.getContext('2d'); + ctx.font = '18px sans-serif'; + ctx.strokeText("Hello World!", 0, 20); + }, + functionTouch3() { + const el =this.$refs.function3; + const ctx = el.getContext('2d'); + ctx.font = '16px sans-serif'; + var txt = 'Hello World'; + ctx.fillText("width:" + ctx.measureText(txt).width, 0, 10); + ctx.fillText(txt, 0, 25); + }, + functionTouch4() { + const el =this.$refs.function4; + const ctx = el.getContext('2d'); + ctx.beginPath(); + ctx.moveTo(5, 5); + ctx.lineTo(70, 5); + ctx.lineTo(40, 60); + ctx.closePath(); + ctx.stroke(); + }, + functionTouch5() { + const el =this.$refs.function5; + const ctx = el.getContext('2d'); + var img = new Image(); + img.src = 'common/images/sun.png'; + var pat = ctx.createPattern(img, 'repeat'); + ctx.fillStyle = pat; + ctx.fillRect(20, 0, 60, 50); + }, + functionTouch6() { + const el =this.$refs.function6; + const ctx = el.getContext('2d'); + ctx.beginPath(); + ctx.moveTo(10, 10); + ctx.bezierCurveTo(20, 40, 80, 40, 100, 10); + ctx.stroke(); + }, + functionTouch7() { + const el =this.$refs.function7; + const ctx = el.getContext('2d'); + ctx.beginPath(); + ctx.moveTo(10, 10); + ctx.quadraticCurveTo(50, 50, 100, 10); + ctx.stroke(); + }, + functionTouch8() { + const el =this.$refs.function8; + const ctx = el.getContext('2d'); + ctx.moveTo(30, 20); + ctx.arcTo(70, 10, 70, 20, 30); // Create an arc + ctx.stroke(); + }, + functionTouch9() { + const el =this.$refs.function9; + const ctx = el.getContext('2d'); + ctx.beginPath(); + ctx.ellipse(50, 50, 30, 60, Math.PI * 0.25, Math.PI * 0.5, Math.PI, 1); + ctx.stroke(); + }, + functionTouch10() { + const el =this.$refs.function10; + const ctx = el.getContext('2d'); + ctx.rect(10, 0, 60, 60); // Create a 100*100 rectangle at (20, 20) + ctx.fill(); // Draw it in default setting + }, + functionTouch11() { + const el =this.$refs.function11; + const ctx = el.getContext('2d'); + ctx.rect(10, 0, 50, 50); + ctx.stroke(); + ctx.clip(); + // Draw red rectangle after clip + ctx.fillStyle = "rgb(255,0,0)"; + ctx.fillRect(0, 0, 40, 40); + }, + functionTouch12() { + const el =this.$refs.function12; + const ctx = el.getContext('2d'); + ctx.rotate(45 * Math.PI / 180); // Rotate the rectangle 45 degrees + ctx.fillRect(20, 0, 20, 20); + }, + functionTouch13() { + const el =this.$refs.function13; + const ctx = el.getContext('2d'); + ctx.strokeRect(10, 10, 25, 25); + ctx.scale(1.5, 1.5);// Scale to 200% + ctx.strokeRect(10, 10, 20, 20); + }, + functionTouch14() { + const el =this.$refs.function14; + const ctx = el.getContext('2d'); + ctx.fillStyle = 'rgb(0,0,0)'; + ctx.fillRect(0, 0, 30, 30) + ctx.transform(1, 0.5, -0.5, 1, 3, 3); + ctx.fillStyle = 'rgb(255,0,0)'; + ctx.fillRect(0, 0, 30, 30); + ctx.transform(1, 0.5, -0.5, 1, 3, 3); + ctx.fillStyle = 'rgb(0,0,255)'; + ctx.fillRect(0, 0, 30, 30); + }, + functionTouch15() { + const el =this.$refs.function15; + const ctx = el.getContext('2d'); + ctx.fillRect(10, 10, 30, 30); + ctx.translate(50, 10); + ctx.fillRect(10, 10, 30, 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_Image/index.css new file mode 100644 index 0000000000000000000000000000000000000000..a8de94ded8dbf0356080a2ade9b0e30a2a910e2a --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_Image/index.css @@ -0,0 +1,480 @@ +/** + * 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); +} + +.accessibility-container{ + flex-direction: column; +} + +.accessibility1{ + width: 100%; + height: 30px; +} + +.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_Image/index.hml b/ace/ace_standard/src/main/js/default/pages/obj_Image/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..d6f936112de5c5f37ea2ee96b67d62d96c95820e --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_Image/index.hml @@ -0,0 +1,30 @@ + + +
+
+
+ + Image对象的属性 + + + 属性1 + + + +
+
+ +
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/index.js new file mode 100644 index 0000000000000000000000000000000000000000..520fbf4f756d304cd3cb3f0ec99d9f95950c6fea --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_Image/index.js @@ -0,0 +1,43 @@ +/** + * 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() + }, + 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, 250); + prompt.showToast({ + message: 'Image load success: width=' + img.width + ',height=' + img.height + }); + }; + img.onerror = function() { + console.log('Image load fail'); + }; + }, + +} \ No newline at end of file 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_ImageBitmap/index.css new file mode 100644 index 0000000000000000000000000000000000000000..a8de94ded8dbf0356080a2ade9b0e30a2a910e2a --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_ImageBitmap/index.css @@ -0,0 +1,480 @@ +/** + * 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); +} + +.accessibility-container{ + flex-direction: column; +} + +.accessibility1{ + width: 100%; + height: 30px; +} + +.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_ImageBitmap/index.hml b/ace/ace_standard/src/main/js/default/pages/obj_ImageBitmap/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..72c83c2f5afc57939321fcfa033d2b71c60bbac6 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_ImageBitmap/index.hml @@ -0,0 +1,30 @@ + + +
+
+
+ + ImageBitmap对象的属性 + + + 属性1 + + + +
+
+ +
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/index.js new file mode 100644 index 0000000000000000000000000000000000000000..f6ab3d8c7190ef95c185ec47059af6eaf4f47a4b --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_ImageBitmap/index.js @@ -0,0 +1,46 @@ +/** + * 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() + }, + props1() { + const canvas =this.$refs.canvas1 + var ctx = canvas.getContext('2d'); + var offscreen = new OffscreenCanvas(200,120); + var offscreenCanvasCtx = offscreen.getContext("2d"); + + offscreenCanvasCtx.rect(10, 10, 100, 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), + duration: 3000 + }); + console.log(JSON.stringify(bitmap)) + }, + +} \ 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_ImageData/index.css new file mode 100644 index 0000000000000000000000000000000000000000..a8de94ded8dbf0356080a2ade9b0e30a2a910e2a --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_ImageData/index.css @@ -0,0 +1,480 @@ +/** + * 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); +} + +.accessibility-container{ + flex-direction: column; +} + +.accessibility1{ + width: 100%; + height: 30px; +} + +.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/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..2cea2845cdeb32005511542ee732cb4b5f23f1ae --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_ImageData/index.hml @@ -0,0 +1,30 @@ + + +
+
+
+ + ImageData对象的属性 + + + 属性1 + + + +
+
+ +
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/index.js new file mode 100644 index 0000000000000000000000000000000000000000..bb9c25909ff6b9a55cafe3fa9fafcbd51ac5567f --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_ImageData/index.js @@ -0,0 +1,38 @@ +/** + * 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() + }, + props1() { + const el =this.$refs.canvas1; + const ctx = el.getContext('2d'); + ctx.fillRect(0,0,200,200) + var imageData = ctx.createImageData(1,1) + prompt.showToast({ + message:JSON.stringify(imageData), + duration:5000 + }) + console.log(JSON.stringify(imageData)) + }, + +} \ No newline at end of file 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_OffscreenCanvas/index.css new file mode 100644 index 0000000000000000000000000000000000000000..a8de94ded8dbf0356080a2ade9b0e30a2a910e2a --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/index.css @@ -0,0 +1,480 @@ +/** + * 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); +} + +.accessibility-container{ + flex-direction: column; +} + +.accessibility1{ + width: 100%; + height: 30px; +} + +.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/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..a6f52d62c6f116faa456b3574b56449d848584e4 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/index.hml @@ -0,0 +1,46 @@ + + +
+
+
+ + OffscreenCanvas对象的属性 + + + 属性1 + + + +
+
+ + + + +
+
+ + OffscreenCanvas对象的方法 + + + 方法1 + + +
+
+ + +
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/index.js new file mode 100644 index 0000000000000000000000000000000000000000..6fb9d61df9093777a3ba941ba0805d8e3cb7c9a5 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/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.functionTouch1() + }, + 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, 100, 100); + prompt.showToast({ + message: 'OffscreenCanvas width='+offscreen.width+',OffscreenCanvas height='+offscreen.height + }); + console.log('OffscreenCanvas width='+offscreen.width+',OffscreenCanvas height='+offscreen.height) + var bitmap = offscreen.transferToImageBitmap(); + ctx.transferFromImageBitmap(bitmap); + }, + + functionTouch1() { + const el =this.$refs.function1 + const ctx = el.getContext('2d'); + var offscreen = new OffscreenCanvas(500,500); + var offscreenCanvasCtx = offscreen.getContext("2d"); + var img = new Image(); + img.src = 'common/images/image.png'; + offscreenCanvasCtx.drawImage(img, 0, 0, 100, 100); + var dataURL = offscreen.toDataURL(); + var bitmap = offscreen.transferToImageBitmap(); + ctx.transferFromImageBitmap(bitmap); + prompt.showToast({ + message: 'offscreenCanvasCtx='+offscreenCanvasCtx+',dataURL='+dataURL+',bitmap='+JSON.stringify(bitmap) + }); + console.log('offscreenCanvasCtx='+offscreenCanvasCtx+',dataURL='+dataURL+',bitmap='+JSON.stringify(bitmap)); //data:image/png;base64,xxxxxx + + }, + +} \ 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_OffscreenCanvasRenderingContext2D/index.css new file mode 100644 index 0000000000000000000000000000000000000000..a8de94ded8dbf0356080a2ade9b0e30a2a910e2a --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/index.css @@ -0,0 +1,480 @@ +/** + * 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); +} + +.accessibility-container{ + flex-direction: column; +} + +.accessibility1{ + width: 100%; + height: 30px; +} + +.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/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..ad9128ce22167dc289a0476fbf78e262e5845db3 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/index.hml @@ -0,0 +1,171 @@ + + +
+
+
+ + 对象的属性 + + + 属性1 + + + + + 属性2 + + + + + 属性3 + + + + + 属性4 + + + + + 属性5 + + + + + 属性6 + + + + + 属性7 + + + + + 属性8 + + + + + 属性9 + + + +
+
+ + + + +
+
+ + 属性10 + + + + + 属性11 + + + + + 属性12 + + + + + + + + + 对象的方法 + + + 方法1 + + + + + 方法2 + + + + + 方法3 + + + + + 方法4 + + + + 方法5 + + +
+
+ + + + +
+
+ + 方法6 + + + + 方法7 + + + + 方法8 + + + + 方法9 + + + + 方法10 + + + + 方法11 + + + + 方法12 + + + + 方法13 + + + + 方法14 + + + + 方法15 + + +
+
+ +
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/index.js new file mode 100644 index 0000000000000000000000000000000000000000..dd5f1ac9dcf258b09e25a0f8e0982f6418a53b13 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/index.js @@ -0,0 +1,342 @@ +/** + * 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, + textValue: 0, + textValue2: 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.functionTouch1() + this.functionTouch2() + this.functionTouch3() + this.functionTouch4() + this.functionTouch5() + this.functionTouch6() + this.functionTouch7() + this.functionTouch8() + this.functionTouch9() + this.functionTouch10() + this.functionTouch11() + this.functionTouch12() + this.functionTouch13() + this.functionTouch14() + this.functionTouch15() + }, + 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.strokeStyle = '#0000ff'; + 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 = 30; + ctx.shadowColor = 'rgb(0,0,0)'; + ctx.fillStyle = 'rgb(255,0,0)'; + ctx.fillRect(20, 20, 70, 50); + }, + props11() { + const el =this.$refs.canvas11; + const ctx = el.getContext('2d'); + ctx.shadowBlur = 10; + ctx.shadowOffsetX = 20; + ctx.shadowOffsetY = 20; + ctx.shadowColor = 'rgb(0,0,0)'; + ctx.fillStyle = 'rgb(255,0,0)'; + ctx.fillRect(10, 0, 70, 50); + }, + props12() { + var ctx = this.$refs.canvas12.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); + }, + + functionTouch1() { + const el =this.$refs.function1; + const ctx = el.getContext('2d'); + ctx.fillStyle = 'rgb(0,0,255)'; + ctx.fillRect(0, 0, 100, 40); + ctx.clearRect(20, 10, 60, 20); + }, + functionTouch2() { + const el =this.$refs.function2; + const ctx = el.getContext('2d'); + ctx.font = '18px sans-serif'; + ctx.strokeText("Hello World!", 0, 20); + }, + functionTouch3() { + const el =this.$refs.function3; + const ctx = el.getContext('2d'); + ctx.font = '14px sans-serif'; + var txt = 'Hello World'; + ctx.fillText("width:" + ctx.measureText(txt).width, 0, 10); + ctx.fillText(txt, 0, 25); + }, + functionTouch4() { + const el =this.$refs.function4; + const ctx = el.getContext('2d'); + ctx.beginPath(); + ctx.moveTo(5, 5); + ctx.lineTo(70, 5); + ctx.lineTo(40, 60); + ctx.closePath(); + ctx.stroke(); + }, + functionTouch5() { + const el =this.$refs.function5; + const ctx = el.getContext('2d'); + var img = new Image(); + img.src = 'common/images/sun.png'; + var pat = ctx.createPattern(img, 'repeat'); + ctx.fillStyle = pat; + ctx.fillRect(20, 0, 60, 50); + }, + functionTouch6() { + const el =this.$refs.function6; + const ctx = el.getContext('2d'); + ctx.beginPath(); + ctx.moveTo(10, 10); + ctx.bezierCurveTo(20, 40, 80, 40, 100, 10); + ctx.stroke(); + }, + functionTouch7() { + const el =this.$refs.function7; + const ctx = el.getContext('2d'); + ctx.beginPath(); + ctx.moveTo(10, 10); + ctx.quadraticCurveTo(50, 50, 100, 10); + ctx.stroke(); + }, + functionTouch8() { + const el =this.$refs.function8; + const ctx = el.getContext('2d'); + ctx.moveTo(30, 20); + ctx.arcTo(70, 10, 70, 20, 30); // Create an arc + ctx.stroke(); + }, + functionTouch9() { + const el =this.$refs.function9; + const ctx = el.getContext('2d'); + ctx.beginPath(); + ctx.ellipse(50, 50, 30, 60, Math.PI * 0.25, Math.PI * 0.5, Math.PI, 1); + ctx.stroke(); + }, + functionTouch10() { + const el =this.$refs.function10; + const ctx = el.getContext('2d'); + ctx.rect(10, 0, 60, 60); // Create a 100*100 rectangle at (20, 20) + ctx.fill(); // Draw it in default setting + }, + functionTouch11() { + const el =this.$refs.function11; + const ctx = el.getContext('2d'); + ctx.rect(10, 0, 50, 50); + ctx.stroke(); + ctx.clip(); + // Draw red rectangle after clip + ctx.fillStyle = "rgb(255,0,0)"; + ctx.fillRect(0, 0, 40, 40); + }, + functionTouch12() { + const el =this.$refs.function12; + const ctx = el.getContext('2d'); + ctx.rotate(45 * Math.PI / 180); // Rotate the rectangle 45 degrees + ctx.fillRect(20, 0, 20, 20); + }, + functionTouch13() { + var canvas = this.$refs.function13.getContext('2d'); + var offscreen = new OffscreenCanvas(100,40); + var offscreenCanvasCtx = offscreen.getContext("2d"); + + offscreenCanvasCtx.rect(10, 10, 40, 40); + offscreenCanvasCtx.fill(); + this.textValue = offscreenCanvasCtx.isPointInPath(30, 20); + + var bitmap = offscreen.transferToImageBitmap(); + canvas.transferFromImageBitmap(bitmap); + + prompt.showToast({ + message: 'function success: textValue=' + this.textValue + }); + }, + functionTouch14() { + var canvas = this.$refs.function14.getContext('2d'); + var offscreen = new OffscreenCanvas(100,40); + var offscreenCanvasCtx = offscreen.getContext("2d"); + + offscreenCanvasCtx.rect(10, 10, 30, 30); + offscreenCanvasCtx.stroke(); + this.textValue2 = offscreenCanvasCtx.isPointInStroke(20, 10); + + var bitmap = offscreen.transferToImageBitmap(); + canvas.transferFromImageBitmap(bitmap); + prompt.showToast({ + message: 'function success: textValue2=' + this.textValue2 + }); + }, + functionTouch15() { + var canvas = this.$refs.function15.getContext('2d'); + var offscreen = new OffscreenCanvas(100,50); + var offscreenCanvasCtx = offscreen.getContext("2d"); + + offscreenCanvasCtx.transform(1, 0, 1.7, 1, 0, 0); + offscreenCanvasCtx.fillStyle = 'gray'; + offscreenCanvasCtx.fillRect(15, 10, 20, 10); + offscreenCanvasCtx.fillRect(15, 30, 20, 10); + + // Non-skewed rectangles + offscreenCanvasCtx.resetTransform(); + offscreenCanvasCtx.fillStyle = 'red'; + offscreenCanvasCtx.fillRect(10, 10, 20, 10); + offscreenCanvasCtx.fillRect(10, 30, 20, 10); + + var bitmap = offscreen.transferToImageBitmap(); + canvas.transferFromImageBitmap(bitmap); + } + +} \ No newline at end of file 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_Path2D/index.css new file mode 100644 index 0000000000000000000000000000000000000000..a8de94ded8dbf0356080a2ade9b0e30a2a910e2a --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_Path2D/index.css @@ -0,0 +1,480 @@ +/** + * 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); +} + +.accessibility-container{ + flex-direction: column; +} + +.accessibility1{ + width: 100%; + height: 30px; +} + +.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/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..667e7728fd2adde262bed883737b0ef0555ba641 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_Path2D/index.hml @@ -0,0 +1,72 @@ + + +
+
+
+ + Path2D对象的方法 + + + 方法1 + + + + + 方法2 + + + + + 方法3 + + + + + 方法4 + + + + 方法5 + + +
+
+ + + + +
+
+ + 方法6 + + + + 方法7 + + + + 方法8 + + + + 方法9 + + +
+
+ +
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/index.js new file mode 100644 index 0000000000000000000000000000000000000000..6a50fdfd3a0e57555fd308cd3843748b80899d09 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/obj_Path2D/index.js @@ -0,0 +1,106 @@ +/** + * 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.functionTouch1() + this.functionTouch2() + this.functionTouch3() + this.functionTouch4() + this.functionTouch5() + this.functionTouch6() + this.functionTouch7() + this.functionTouch8() + this.functionTouch9() + }, + + functionTouch1() { + const el =this.$refs.function1; + const ctx = el.getContext('2d'); + var path1 = ctx.createPath2D("M80 20 L40 100 L120 100 Z"); + var path2 = ctx.createPath2D(); + path2.addPath(path1); + ctx.stroke(path2); + }, + functionTouch2() { + const el =this.$refs.function2; + const ctx = el.getContext('2d'); + var path = ctx.createPath2D("M80 20 L40 100 L120 100 Z"); + path.setTransform(0.8, 0, 0, 0.4, 0, 0); + ctx.stroke(path); + + }, + functionTouch3() { + const el =this.$refs.function3; + const ctx = el.getContext('2d'); + var path = ctx.createPath2D(); + path.moveTo(80, 40); + path.lineTo(120, 40); + path.lineTo(80, 80); + path.closePath(); + ctx.stroke(path); + }, + functionTouch4() { + const el =this.$refs.function4; + const ctx = el.getContext('2d'); + var path = ctx.createPath2D(); + path.moveTo(10, 10); + path.bezierCurveTo(10, 50, 100, 50, 100, 10); + ctx.stroke(path); + }, + functionTouch5() { + const el =this.$refs.function5; + const ctx = el.getContext('2d'); + var path = ctx.createPath2D(); + path.moveTo(10, 10); + path.quadraticCurveTo(50, 50, 100, 10); + ctx.stroke(path); + }, + functionTouch6() { + const el =this.$refs.function6; + const ctx = el.getContext('2d'); + var path = ctx.createPath2D(); + path.arc(80, 50, 40, 0, 6.28); + ctx.stroke(path); + }, + functionTouch7() { + const el =this.$refs.function7; + const ctx = el.getContext('2d'); + var path = ctx.createPath2D(); + path.arcTo(75, 10, 75, 35, 25); + ctx.stroke(path); + }, + functionTouch8() { + const el =this.$refs.function8; + const ctx =el.getContext('2d'); + var path = ctx.createPath2D(); + path.ellipse(50, 50, 25, 50, Math.PI * 0.25, Math.PI * 0.5, Math.PI, 1); + ctx.stroke(path); + }, + functionTouch9() { + const el =this.$refs.function9; + const ctx = el.getContext('2d'); + var path = ctx.createPath2D(); + path.rect(20, 20, 100, 100); + ctx.stroke(path); + }, + +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/path/index.css b/ace/ace_standard/src/main/js/default/pages/path/index.css new file mode 100644 index 0000000000000000000000000000000000000000..b84f8de1247874530c9a743357430dba4246b7c4 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/path/index.css @@ -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. + */ + +/* xxx.css */ +.container { + flex-direction:row; + width:100%; + height:100%; + padding: 1px; +} + +.sub-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.prop-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; +} + +.access-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +#prop1 { + color: #ad4e2a; + stroke-width: 10px; + margin: 5px; +} + +.prop2 { + color: #343524; + stroke-width: 15px; + margin: 5px; +} + +.prop4 { + color: #456345; + stroke-width: 25px; + margin: 5px; +} + +.prop5 { + color: #831834; + stroke-width: 40px; + margin: 5px; + height: 70px; +} + +.ani-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.ani1{ + color: #72ac33; + stroke-width: 55px; + 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; + stroke-width: 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{ + stroke-width: 30px; + margin: 5px; + background: linear-gradient(red, #00ff00); +} + +.gradient2{ + stroke-width: 30px; + margin: 5px; + background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0)); +} + +.gradient3{ + stroke-width: 30px; + margin: 5px; + background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%); +} + +.gradient4{ + stroke-width: 30px; + margin: 5px; + background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px); +} + +.access-container{ + flex-direction: column; +} + +.access1{ + color: #321124; + stroke-width: 30px; + margin: 5px; +} + +.atom-container{ + flex-direction: column; +} + +.multimode-container{ + flex-direction: column; +} + +.multimode1{ + color: #978666; + stroke-width: 30px; + margin: 5px; +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/path/index.hml b/ace/ace_standard/src/main/js/default/pages/path/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..d407389d0c8de322f45e964edf891d29b7d84ab7 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/path/index.hml @@ -0,0 +1,161 @@ +
+
+ + 通用属性 + + + path通用属性1 + + + + + + + path通用属性2 + + + + + + + path通用属性3 + + + + + + + + + + + + + + + + + + + path动画属性 + + + + + + + + + + + + +
+ + +
+
+ + 无障碍 + + + path无障碍1 + + + + + + +
+ + +
+ + 多模输入 + + + path多模输入1 + + + + + + +
+ + +
+ + 动画样式 + + + path动画样式1 + + + + + + + path动画样式2 + + + + + +
+
+ + +
+
+ + 渐变样式 + + + path渐变样式1 + + + + + + + path渐变样式2 + + + + + + + path渐变样式3 + + + + + + + path渐变样式4 + + + + + +
+ + +
+
diff --git a/ace/ace_standard/src/main/js/default/pages/path/index.js b/ace/ace_standard/src/main/js/default/pages/path/index.js new file mode 100644 index 0000000000000000000000000000000000000000..d2db94ec51fc888feecf2835afdfa2b417ef24a4 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/path/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. + */ + +export default { + data: { + title: "" + }, + onShow(){ + // 通用属性 + var prop1 = this.$element("prop1"); + var name1 = prop1.dataSet.a + var prop2 = this.$refs.prop2; + var name2 = prop2.dataSet.a + } +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/polygon/index.css b/ace/ace_standard/src/main/js/default/pages/polygon/index.css new file mode 100644 index 0000000000000000000000000000000000000000..730148d1c563d0528b67cf8e90a860ebeee8d998 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/polygon/index.css @@ -0,0 +1,343 @@ +/** + * 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; +} + +.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{ + min-width: 25px; + min-height: 10px; + max-width: 300px; + max-height: 100px; + 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{ + 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{ + 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/image.png'); + background-size:cover; + background-repeat: repeat-x; + background-position: center; + flex:1; + flex-grow: 2; + flex-basis: 10px; + flex-shrink: 1; +} + +.style4{ + padding: 10px; + margin: 5px; + border: 2px solid #000000; +} + +.contain1{ + width: 100%; + height: 70px; + flex-direction: column; +} + +.style5{ + 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: 80px; + 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; +} + +.style7 { + margin-bottom: 50px; + margin-top: 10px; + color: green; + stroke-width: 30px; +} + +.prop-container{ + flex-direction: column; + height: 100%; + flex-weight: 2; +} +#prop1 { + background-color: mediumslateblue; + width: 100%; + margin: 3px 5px; +} +.prop2 { + background-color: pink; + width: 100%; + margin: 3px 5px; +} + +.prop3 { + background-color: darkseagreen; + width: 100%; + margin: 3px 5px; +} + +.prop4 { + background-color: yellowgreen; + width: 100%; + margin: 3px 5px; +} + +.prop5 { + background-color: cornflowerblue; + width: 100%; + margin: 3px 5px; +} + +.prop6 { + background-color: burlywood; + width: 100%; + margin: 3px 5px; +} + +.ani-container{ + flex-direction: column; + height: 100%; + flex-weight: 0.5; +} + +.ani1{ + color: #72ac33; + stroke-width: 55px; + 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; + stroke-width: 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{ + stroke-width: 30px; + margin: 5px; + background: linear-gradient(red, #00ff00); +} + +.gradient2{ + stroke-width: 30px; + margin: 5px; + background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0)); +} + +.gradient3{ + stroke-width: 30px; + margin: 5px; + background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%); +} + +.gradient4{ + stroke-width: 30px; + margin: 5px; + background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px); +} + +.access-container{ + flex-direction: column; +} + +.access1{ + color: #321124; + stroke-width: 30px; + margin: 5px; +} + +.atom-container{ + flex-direction: column; +} + +.multimode-container{ + flex-direction: column; +} + +.multimode1{ + color: #978666; + stroke-width: 30px; + margin: 5px; +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/polygon/index.hml b/ace/ace_standard/src/main/js/default/pages/polygon/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..08ba4262b679371ab573818db94ae17249677a5c --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/polygon/index.hml @@ -0,0 +1,222 @@ +
+
+ + 通用样式 + + + polygon通用样式1 + + + + + + polygon通用样式2 + + + + + + + polygon通用样式3 + + + + + + polygon通用样式4 + + + + + + polygon通用样式5 + +
+ + + + + + +
+
+ + +
+
+ + 通用属性 + + + polyline通用属性1 + + + + + + polyline通用属性2 + + + + + + polyline通用属性3 + + + + + + + polyline通用属性4 + + + + + + + polyline通用属性5 + + + + + + + polyline通用属性6 + + + + +
+ + +
+ + 动画样式 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + +
+
+ + 渐变样式 + + + polygon渐变样式1 + + + + + + polygon渐变样式2 + + + + + + polygon渐变样式3 + + + + + + polygon渐变样式4 + + + + +
+ + +
+ + 无障碍 + + + polygon无障碍1 + + + + +
+ + + +
+ + 多模输入 + + + polygon多模输入1 + + + + + + + + + +
+
+
+ diff --git a/ace/ace_standard/src/main/js/default/pages/polygon/index.js b/ace/ace_standard/src/main/js/default/pages/polygon/index.js new file mode 100644 index 0000000000000000000000000000000000000000..d2db94ec51fc888feecf2835afdfa2b417ef24a4 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/polygon/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. + */ + +export default { + data: { + title: "" + }, + onShow(){ + // 通用属性 + var prop1 = this.$element("prop1"); + var name1 = prop1.dataSet.a + var prop2 = this.$refs.prop2; + var name2 = prop2.dataSet.a + } +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/polyline/index.css b/ace/ace_standard/src/main/js/default/pages/polyline/index.css new file mode 100644 index 0000000000000000000000000000000000000000..635b27b231a28d8d4165bf5083357b7867815dc9 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/polyline/index.css @@ -0,0 +1,343 @@ +/** + * 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; +} + +.sub-container{ + flex-direction: column; + height: 100%; + flex-weight: 1.2; +} + +.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{ + min-width: 25px; + min-height: 10px; + max-width: 300px; + max-height: 100px; + 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{ + 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{ + 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/image.png'); + background-size:cover; + background-repeat: repeat-x; + background-position: center; + flex:1; + flex-grow: 2; + flex-basis: 10px; + flex-shrink: 1; +} + +.style4{ + padding: 10px; + margin: 5px; + border: 2px solid #000000; +} + +.contain1{ + width: 100%; + height: 70px; + flex-direction: column; +} + +.style5{ + 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{ + position: absolute; + left: 10px; + top: 80px; + 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; +} + +.style7 { + margin-bottom: 50px; + margin-top: 10px; + color: green; + stroke-width: 30px; +} + +.prop-container{ + flex-direction: column; + height: 100%; + flex-weight: 2.6; +} + +#prop1 { + background-color: mediumslateblue; + width: 100%; + margin: 3px 5px; +} + +.prop2 { + background-color: pink; + width: 100%; + margin: 3px 5px; +} + +.prop3 { + background-color: darkseagreen; + width: 100%; + margin: 3px 5px; +} + +.prop4 { + background-color: yellowgreen; + width: 100%; + margin: 3px 5px; +} + +.prop5 { + background-color: cornflowerblue; + width: 100%; + margin: 3px 5px; +} + +.prop6 { + background-color: burlywood; + width: 100%; + margin: 3px 5px; +} + +.ani-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.ani1{ + color: #72ac33; + stroke-width: 55px; + 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; + stroke-width: 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{ + stroke-width: 30px; + margin: 5px; + background: linear-gradient(red, #00ff00); +} + +.gradient2{ + stroke-width: 30px; + margin: 5px; + background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0)); +} + +.gradient3{ + stroke-width: 30px; + margin: 5px; + background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%); +} + +.gradient4{ + stroke-width: 30px; + margin: 5px; + background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px); +} + +.access-container{ + flex-direction: column; +} + +.access1{ + color: #321124; + stroke-width: 30px; + margin: 5px; +} + +.atom-container{ + flex-direction: column; +} + +.multimode-container{ + flex-direction: column; +} + +.multimode1{ + color: #978666; + stroke-width: 30px; + margin: 5px; +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/polyline/index.hml b/ace/ace_standard/src/main/js/default/pages/polyline/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..7142c70769d49b03d90e224f1a58837d648c35a1 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/polyline/index.hml @@ -0,0 +1,199 @@ +
+
+ + 通用样式 + + + polyline通用样式1 + + + + + + polyline通用样式2 + + + + + + + polyline通用样式3 + + + + + + polyline通用样式4 + + + + + + polyline通用样式5 + +
+ + + + + + +
+
+ + +
+
+ + 通用属性 + + + polyline通用属性1 + + + + + + polyline通用属性2 + + + + + + polyline通用属性3 + + + + + + + polyline通用属性4 + + + + + + + polyline通用属性5 + + + + + + + polyline通用属性6 + + + + +
+ + +
+ + 动画样式 + + + polyline动画样式1 + + + + + + path动画样式2 + + + + +
+
+ + + + +
+
+ + 渐变样式 + + + polyline渐变样式1 + + + + + + polyline渐变样式2 + + + + + + polyline渐变样式3 + + + + + + polyline渐变样式4 + + + + +
+ + +
+ + 无障碍 + + + polyline无障碍1 + + + + +
+ + + +
+ + 多模输入 + + + polyline多模输入1 + + + + + +
+
+
+ diff --git a/ace/ace_standard/src/main/js/default/pages/polyline/index.js b/ace/ace_standard/src/main/js/default/pages/polyline/index.js new file mode 100644 index 0000000000000000000000000000000000000000..d2db94ec51fc888feecf2835afdfa2b417ef24a4 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/polyline/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. + */ + +export default { + data: { + title: "" + }, + onShow(){ + // 通用属性 + var prop1 = this.$element("prop1"); + var name1 = prop1.dataSet.a + var prop2 = this.$refs.prop2; + var name2 = prop2.dataSet.a + } +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/rect/index.css b/ace/ace_standard/src/main/js/default/pages/rect/index.css new file mode 100644 index 0000000000000000000000000000000000000000..bc3e0c4f38c4c52ebd537ed0854a4aa9041f957b --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/rect/index.css @@ -0,0 +1,325 @@ +.container { + flex-direction:row; + width:100%; + height:100%; + padding: 1px; +} + +.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.5; +} + +/*#prop1 {*/ +/* margin: 5px;*/ +/*}*/ + +/*.prop2 {*/ +/* color: #343524;*/ +/* stroke-width: 15px;*/ +/* margin: 5px;*/ +/*}*/ +/*.prop3{*/ +/* color: #679855;*/ +/* stroke-width: 15px;*/ +/* margin: 5px;*/ +/*}*/ + +/*.prop4 {*/ +/* color: #456345;*/ +/* stroke-width: 25px;*/ +/* margin: 5px;*/ +/*}*/ + +/*.prop5 {*/ +/* color: #831834;*/ +/* stroke-width: 40px;*/ +/* margin: 5px;*/ +/* height: 70px;*/ +/*}*/ + +.ani-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.ani1{ + color: #72ac33; + stroke-width: 55px; + 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; + stroke-width: 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{ + stroke-width: 30px; + margin: 5px; + background: linear-gradient(red, #00ff00); +} + +.gradient2{ + stroke-width: 30px; + margin: 5px; + background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0)); +} + +.gradient3{ + stroke-width: 30px; + margin: 5px; + background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%); +} + +.gradient4{ + stroke-width: 30px; + margin: 5px; + background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px); +} + +.access-container{ + flex-direction: column; +} + +.access1{ + color: #321124; + stroke-width: 30px; + margin: 5px; +} + +.atom-container{ + flex-direction: column; +} + +.multimode-container{ + flex-direction: column; +} + +.multimode1{ +/* color: #978666;*/ +/* stroke-width: 30px;*/ + margin: 5px; +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/rect/index.hml b/ace/ace_standard/src/main/js/default/pages/rect/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..1ddc05a604a411435c5fb9bc7c1190b5aab6fd6c --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/rect/index.hml @@ -0,0 +1,173 @@ +
+
+ + 通用样式 + + + rect通用样式1 + + + + rect通用样式2 + + + + + + rect通用样式3 + + + + + + rect通用样式4 + + + + + + rect通用样式5 + +
+ + + + + + +
+
+ + +
+
+ + 通用属性 + + + rect通用属性1 + + + + + + + + rect通用属性2 + + + + + + + + rect通用属性3 + + + + + + + + + rect特有属性4 + + + + + + +
+ + +
+ + 动画样式 + + + rect动画样式1 + + + + + + + + rect动画样式2 + + + + + + + +
+
+ + + + +
+
+ + 渐变样式 + + + rect渐变样式1 + + + + + + rect渐变样式2 + + + + + + rect渐变样式3 + + + + + + rect渐变样式4 + + + + +
+ + +
+ + 无障碍 + + + rect无障碍1 + + + + +
+ + + +
+ + 多模输入 + + + rect多模输入1 + + + + +
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/rect/index.js b/ace/ace_standard/src/main/js/default/pages/rect/index.js new file mode 100644 index 0000000000000000000000000000000000000000..260427920b4544e4c535477afa5a313bc1697f85 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/rect/index.js @@ -0,0 +1,26 @@ +/** + * 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. + */ +export default { + data: { + title: "" + }, + onShow(){ + // 通用属性 + var prop1 = this.$element("prop1"); + var name1 = prop1.dataSet.a + var prop2 = this.$refs.prop2; + var name2 = prop2.dataSet.a + } +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/svg/index.css b/ace/ace_standard/src/main/js/default/pages/svg/index.css new file mode 100644 index 0000000000000000000000000000000000000000..5db8642c811fd5ebd38df87e6af8d831e8b2916b --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/svg/index.css @@ -0,0 +1,326 @@ +.container { + flex-direction:row; + width:100%; + height:100%; + padding: 1px; +} + +.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%;*/ + height:150px; + 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/image.png'); + 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.5; +} + +/*#prop1 {*/ +/* margin: 5px;*/ +/*}*/ + +/*.prop2 {*/ +/* color: #343524;*/ +/* stroke-width: 15px;*/ +/* margin: 5px;*/ +/*}*/ +/*.prop3{*/ +/* color: #679855;*/ +/* stroke-width: 15px;*/ +/* margin: 5px;*/ +/*}*/ + +/*.prop4 {*/ +/* color: #456345;*/ +/* stroke-width: 25px;*/ +/* margin: 5px;*/ +/*}*/ + +/*.prop5 {*/ +/* color: #831834;*/ +/* stroke-width: 40px;*/ +/* margin: 5px;*/ +/* height: 70px;*/ +/*}*/ + +.ani-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.ani1{ + color: #72ac33; + stroke-width: 55px; + 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; + stroke-width: 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{ + stroke-width: 30px; + margin: 5px; + background: linear-gradient(red, #00ff00); +} + +.gradient2{ + stroke-width: 30px; + margin: 5px; + background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0)); +} + +.gradient3{ + stroke-width: 30px; + margin: 5px; + background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%); +} + +.gradient4{ + stroke-width: 30px; + margin: 5px; + background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px); +} + +.access-container{ + flex-direction: column; +} + +.access1{ + color: #321124; + stroke-width: 30px; + margin: 5px; +} + +.atom-container{ + flex-direction: column; +} + +.multimode-container{ + flex-direction: column; +} + +.multimode1{ +/* color: #978666;*/ +/* stroke-width: 30px;*/ + margin: 5px; +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/svg/index.hml b/ace/ace_standard/src/main/js/default/pages/svg/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..e6409e5b3288ab92c7ee0f7250ac9a4d8b9df6ea --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/svg/index.hml @@ -0,0 +1,228 @@ +
+
+ + 通用样式 + + + svg通用样式1 + + + + + + + svg通用样式2 + + + + + + + svg通用样式3 + + + + + + svg通用样式4 + + + + + + svg通用样式5 + +
+ + + + + + +
+
+ + + +
+
+ + 通用属性 + + + svg通用属性1 + + + + + + + + svg通用属性2 + + + + + + + + svg通用属性3 + + + + + + + + + svg特有属性4 + + + + +
+ + +
+ + 动画样式 + + + svg动画样式1 + + + + + + svg动画样式2 + + + + +
+
+ + + + +
+
+ + 渐变样式 + + + svg渐变样式1 + + + + + + svg渐变样式2 + + + + + + svg渐变样式3 + + + + + + svg渐变样式4 + + + + +
+ + +
+ + 无障碍 + + + svg无障碍1 + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + 多模输入 + + + svg多模输入1 + + + + +
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/svg/index.js b/ace/ace_standard/src/main/js/default/pages/svg/index.js new file mode 100644 index 0000000000000000000000000000000000000000..260427920b4544e4c535477afa5a313bc1697f85 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/svg/index.js @@ -0,0 +1,26 @@ +/** + * 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. + */ +export default { + data: { + title: "" + }, + onShow(){ + // 通用属性 + var prop1 = this.$element("prop1"); + var name1 = prop1.dataSet.a + var prop2 = this.$refs.prop2; + var name2 = prop2.dataSet.a + } +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/svg_text/index.css b/ace/ace_standard/src/main/js/default/pages/svg_text/index.css new file mode 100644 index 0000000000000000000000000000000000000000..27e4a87fd5ca14ab1f11a2d74650596287b54611 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/svg_text/index.css @@ -0,0 +1,174 @@ +.container { + flex-direction:row; + width:100%; + height:100%; + padding: 1px; +} + +.sub-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; +} + +.contain1{ + width: 100%; + height: 70px; + flex-direction: column; +} + +.prop-container{ + flex-direction: column; + height: 100%; + flex-weight: 2; +} + +.ani-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.ani1{ + color: #72ac33; + stroke-width: 55px; + 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; + stroke-width: 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{ + margin: 5px; + background: linear-gradient(red, #00ff00); +} + +.gradient2{ + margin: 5px; + background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0)); +} + +.gradient3{ + margin: 5px; + background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%); +} + +.gradient4{ + stroke-width: 30px; + margin: 5px; + background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px); +} + +.access-container{ + flex-direction: column; +} + +.access1{ + color: #321124; + background-color: #321124; + stroke-width: 30px; + margin: 5px; +} + +.multimode-container{ + flex-direction: column; +} + +.multimode1{ + background-color: #978666; + margin: 5px; +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/svg_text/index.hml b/ace/ace_standard/src/main/js/default/pages/svg_text/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..7449be8798ab22c943089ebe9804a73aa7293be1 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/svg_text/index.hml @@ -0,0 +1,130 @@ +
+
+
+ + 通用属性 + + + svg_text通用属性1 + + + x: 5% ; y: 20 + dx: 10% ; dy: 10 + + + svg_text通用属性2 + + + rotate: 30 + rotate: -30 + + + svg_text通用属性3 + + + font-size: 22px + fill: #00ff00 + + + svg_text通用属性4 + + + fill-opacity: 0.5 + opacity: 0.7 + + + svg_text通用属性5 + + + stroke: black + stroke-width: 2 + stroke-opacity: 0.5 + +
+ + +
+ + 动画样式 + + + svg_text动画样式1 + + + svg_text + + + svg_text动画样式2 + + + svg_text + +
+
+ + +
+
+ + 渐变样式 + + + svg_text渐变样式1 + + + svg_text + + + svg_text渐变样式2 + + + svg_text + + + svg_text渐变样式3 + + + svg_text + + + svg_text渐变样式4 + + + svg_text + +
+ + + +
+ + 无障碍 + + + svg_text无障碍1 + + + svg_text + +
+ + + +
+ + 多模输入 + + + svg_text多模输入1 + + + svg_text + +
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/svg_text/index.js b/ace/ace_standard/src/main/js/default/pages/svg_text/index.js new file mode 100644 index 0000000000000000000000000000000000000000..87eb2e4aa01893ea2e7816dc2c71ff94460b3415 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/svg_text/index.js @@ -0,0 +1,24 @@ +/** + * 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. + */ + +export default { + onShow(){ + // 通用属性 + var prop1 = this.$element("prop1"); + var name1 = prop1.dataSet.a + var prop2 = this.$refs.prop2; + var name2 = prop2.dataSet.a + } +} diff --git a/ace/ace_standard/src/main/js/default/pages/textPath/index.css b/ace/ace_standard/src/main/js/default/pages/textPath/index.css new file mode 100644 index 0000000000000000000000000000000000000000..6d86e3f7a430ef7e493b53488bfc7e1334e30bb0 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/textPath/index.css @@ -0,0 +1,173 @@ +.container { + flex-direction:row; + width:100%; + height:100%; + padding: 1px; +} + +.sub-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; +} + +.contain1{ + width: 100%; + height: 70px; + flex-direction: column; +} + +.prop-container{ + flex-direction: column; + height: 100%; + flex-weight: 2; +} + +.ani-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.ani1{ + color: #72ac33; + stroke-width: 55px; + 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; + stroke-width: 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{ + margin: 5px; + background: linear-gradient(red, #00ff00); +} + +.gradient2{ + margin: 5px; + background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0)); +} + +.gradient3{ + margin: 5px; + background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%); +} + +.gradient4{ + stroke-width: 30px; + margin: 5px; + background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px); +} + +.access-container{ + flex-direction: column; +} + +.access1{ + background-color: #321124; + stroke-width: 30px; + margin: 5px; +} + +.multimode-container{ + flex-direction: column; +} + +.multimode1{ + background-color: #978666; + margin: 5px; +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/textPath/index.hml b/ace/ace_standard/src/main/js/default/pages/textPath/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..1ad329f55ecb794e6aabf57ffdde1cc49e91b5b0 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/textPath/index.hml @@ -0,0 +1,199 @@ +
+
+
+ + 通用属性 + + + textPath通用属性1 + + + + + + textPath + + + textPath + + + + + textPath通用属性2 + + + + + + textPath + + + textPath + + + textPath + + + + + + textPath通用属性3 + + + + + + textPath + + + textPath + + + +
+ + +
+ + 动画样式 + + + textPath动画样式1 + + + + + textPath + + + textPath + + + + + textPath动画样式2 + + + + + textPath + + + textPath + + + +
+
+ + + + +
+
+ + 渐变样式 + + + textPath渐变样式1 + + + + + textPath + + + + + textPath渐变样式2 + + + + + textPath + + + + + textPath渐变样式3 + + + + + textPath + + + + + textPath渐变样式4 + + + + + textPath + + + +
+ + +
+ + 无障碍 + + + textPath无障碍1 + + + + + textPath + + + +
+ + + +
+ + 多模输入 + + + textPath多模输入1 + + + + + textPath + + + +
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/textPath/index.js b/ace/ace_standard/src/main/js/default/pages/textPath/index.js new file mode 100644 index 0000000000000000000000000000000000000000..bb29005fc5c93670676d6debec44b80f964e4116 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/textPath/index.js @@ -0,0 +1,18 @@ +/** + * 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. + */ + +export default { + +} diff --git a/ace/ace_standard/src/main/js/default/pages/tspan/index.css b/ace/ace_standard/src/main/js/default/pages/tspan/index.css new file mode 100644 index 0000000000000000000000000000000000000000..f06b9aa88659a0bfeab789453d4a672116d0d044 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/tspan/index.css @@ -0,0 +1,171 @@ +.container { + flex-direction:row; + width:100%; + height:100%; + padding: 1px; +} + +.sub-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; +} + +.contain1{ + width: 100%; + height: 70px; + flex-direction: column; +} + +.prop-container{ + flex-direction: column; + height: 100%; + flex-weight: 2; +} + +.ani-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.ani1{ + color: #72ac33; + stroke-width: 55px; + 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; + stroke-width: 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{ + margin: 5px; + background: linear-gradient(red, #00ff00); +} + +.gradient2{ + margin: 5px; + background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0)); +} + +.gradient3{ + margin: 5px; + background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 255, 0) 60%); +} + +.gradient4{ + stroke-width: 30px; + margin: 5px; + background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px); +} + +.access-container{ + flex-direction: column; +} +.access1{ + background-color: #321124; + margin: 5px; +} + +.multimode-container{ + flex-direction: column; +} + +.multimode1{ + margin: 5px; + background-color: #978666; +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/tspan/index.hml b/ace/ace_standard/src/main/js/default/pages/tspan/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..9b6c3fa6747321b1e34bf5101de4278f6f59aee9 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/tspan/index.hml @@ -0,0 +1,185 @@ +
+
+
+ + 通用属性 + + + tspan通用属性1 + + + + + X: 0; Y: 60 + + + dx: 10; dy: 40 + + + font-size: 25px + + + + + tspan通用属性2 + + + + + rotate: 30 + + + rotate: -30 + + + fill: red + + + fill: #ff00ff + + + + + + tspan通用属性3 + + + + + opacity: 0.5 + + + fill-opacity: 0.8 + + + stroke: red + + + stroke-width: 2 + + + stroke-opacity: 0.5 + + + +
+ + +
+ + 动画样式 + + + tspan动画样式1 + + + + + tspan + + + + + tspan动画样式2 + + + + + tspan + + + +
+
+ + + + +
+
+ + 渐变样式 + + + tspan渐变样式1 + + + + + tspan + + + + + tspan渐变样式2 + + + + + tspan + + + + + tspan渐变样式3 + + + + + tspan + + + + + tspan渐变样式4 + + + + + tspan + + + +
+ + +
+ + 无障碍 + + + tspan无障碍1 + + + + + tspan + + + +
+ + + +
+ + 多模输入 + + + tspan多模输入1 + + + + + tspan + + + +
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/tspan/index.js b/ace/ace_standard/src/main/js/default/pages/tspan/index.js new file mode 100644 index 0000000000000000000000000000000000000000..bb29005fc5c93670676d6debec44b80f964e4116 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/tspan/index.js @@ -0,0 +1,18 @@ +/** + * 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. + */ + +export default { + +} diff --git a/ace/ace_standard/src/main/js/default/pages/video/index.css b/ace/ace_standard/src/main/js/default/pages/video/index.css new file mode 100644 index 0000000000000000000000000000000000000000..6fadacc4a8b214100ae8f84d0f88ca484484b026 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/video/index.css @@ -0,0 +1,379 @@ +/** + * 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. + */ + +.container { + flex-direction:row; + width:100%; + height:100%; + padding: 1px; +} + +.sub-container{ + flex-direction: column; + height: 100%; + flex-weight: 1; +} + +.title{ + width: 100%; + height: 50px; + font-size: 18px; + margin: 2px; + padding: 2px; + font-weight: bold; + text-align: center; +} +.title-style-2{ + height: 30px; +} + +.sub-title{ + width: 100%; + height: 50px; + font-size: 14px; + text-align: left; + margin: 2px; + padding: 2px; +} +.sub-title-2{ + height: 20px; +} +.sub-title-3{ + font-size: 12px; +} + +.style1{ + width: 100%; + height: 100%; + min-width: 25px; + min-height: 10px; + max-width: 300px; + max-height: 100px; + padding-left: 5px; + padding-top: 5px; + padding-right: 5px; + padding-bottom: 5px; + margin-left: 5px; + margin-top: 5px; + margin-right: 5px; + 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: 300px; + height: 100px; + 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%; + height: 100px; + 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/image.png'); + background-size:cover; + background-repeat: repeat-x; + background-position: center; + flex:1; + flex-grow: 2; +/* flex-basis: 10px;*/ + flex-shrink: 1; +} + +.style4{ + width: 100%; + height: 15%; + padding: 10px; + margin: 5px; + border: 2px solid #000000; +} + +.contain1{ + width: 100%; +/* height: 100px;*/ +/* flex-direction: column;*/ +} + +.style5{ + width: 90%; + height: 60px; + 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: 100px; + height: 70px; + position: absolute; + left: 10px; + top: 70px; + 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; +} + +.style7 { + width: 100px; + height: 100px; + border: 1px solid #000000; + object-fit: fill; +} + +.color-primary { + background-color: mediumpurple; +} + +.color-warning { + background-color: pink; +} + +.color-success { + background-color: cornflowerblue; +} + +.grid-child { + width: 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; + flex-weight: 1; +} + +.event1{ + width: 90%; + flex-weight: 1; + background-color: yellow; +} + +.event2{ + width: 90%; + flex-weight: 1; + background-color: red; +} + +.event3{ + width: 90%; + flex-weight: 1; + background-color: #ad4e2a; +} + +.event4{ + flex-direction: row; + width: 90%; + flex-weight: 1; + overflow:scroll; +} + +.event5{ + flex-direction: column; + width: 100%; + height: 90px; + overflow:scroll; +} + +.prop-container{ + flex-direction: column; +} + +#prop1 { + height: 20px; + background-color: mediumslateblue; + width: 100%; + margin: 5px; +} + +.prop2 { + height: 20px; + background-color: pink; + width: 100%; + margin: 5px; +} + +.prop3 { + height: 20px; + background-color: darkseagreen; + width: 100%; + margin: 5px; +} + +.prop4 { + height: 50px; + background-color: darkseagreen; + width: 100%; + margin: 5px; +} + +.prop5 { + height: 50px; + background-color: darkseagreen; + width: 100%; + margin: 5px; +} + +.atom-container{ + flex-direction: column; +} + +.function-container{ + flex-direction: column; +} + +.function1{ + background-color: #ff0000; + width: 90%; + height: 45px; +} + +.function2{ + background-color: #00ff00; + width: 90%; + height: 45px; +} + +.function3{ + background-color: #0000ff; + width: 90%; + height: 45px; +} + +.function4{ + flex-direction: row; + width: 90%; + height: 45px; +} + +.function5{ + flex-direction: row; + width: 90%; + height: 45px; +} +.function6{ + flex-direction: row; + width: 90%; + height: 45px; +} +.function7{ + flex-direction: row; + width: 90%; + height: 45px; +} +.function8{ + flex-direction: row; + width: 90%; + height: 45px; +} +.function9{ + flex-direction: row; + width: 90%; + height: 45px; +} \ No newline at end of file diff --git a/ace/ace_standard/src/main/js/default/pages/video/index.hml b/ace/ace_standard/src/main/js/default/pages/video/index.hml new file mode 100644 index 0000000000000000000000000000000000000000..7a3b0aa7df79d565ca2ed791c12128e0478f63b0 --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/video/index.hml @@ -0,0 +1,183 @@ +
+
+ + 通用样式 + + + video通用样式1 + + + + video通用样式2 + + + + video通用样式3 + + + + video通用样式4 + + + + div通用样式5 + +
+ + +
+ + video特有样式 + + +
+
+
+
+
+ + 通用属性 + + + video通用属性1 + + + + video通用属性2 + + + + video通用属性3 + + + + video特有属性 + + + +
+
+
+
+ + 通用事件 + + + video通用事件1 + + + + video通用事件2 + + + + video通用事件3 + + + + video特有事件1 + + +
+
+ +
+
+ +
+
+ + 特有方法 + + + video特有方法1 + + + + video特有方法2 + + + + video特有方法3 + + + + video特有方法4 + + + + video特有方法5 + + + + video特有方法6 + + +
+ +
+
+
+ + 通用方法 + + + video通用方法1 + + + + div通用方法2 + + + + div通用方法3 + + +
+
+
diff --git a/ace/ace_standard/src/main/js/default/pages/video/index.js b/ace/ace_standard/src/main/js/default/pages/video/index.js new file mode 100644 index 0000000000000000000000000000000000000000..4c41e5707510edbd47e86f7560ff4ee312fd0c0e --- /dev/null +++ b/ace/ace_standard/src/main/js/default/pages/video/index.js @@ -0,0 +1,685 @@ +// @ts-nocheck +/** + * 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'; + +var options = { + duration: 1500, + easing: 'friction', + delay: 100, + fill: 'forwards', + iterations: 2, + direction: 'normal', +}; +var frames = [ + { + transform: { + translate: '-120px', + rotate:'10deg', + scale:0.2, + skew:'40deg' + }, + opacity: 0.1, + offset: 0.0, + width: '40%', + height:'20px', + backgroundColor:'#ff0000', + backgroundPosition:'10px 20px', + transformOrigin:'left top' + }, + { + transform: { + translateX: '0px', + translateY: '5px', + rotateX:'10deg', + rotateY:'10deg', + scaleX:0.5, + scaleY:0.7, + skewX:'22deg', + skewY:'30deg' + }, + opacity: 0.6, + offset: 2.0, + width: '60%', + height:'30px', + backgroundColor:'#ff00ff', + backgroundPosition:'15px 25px', + transformOrigin:'center top' + }, + { + transform: { + translateX: '100px', + translateY: '0px', + translateZ: '20px', + rotateX:'0deg', + rotateY:'0deg', + rotateZ:'30deg', + scaleX:1, + scaleY:1, + scaleZ:2, + skewX:'0', + skewY:'0', + skewZ:'30deg' + }, + opacity: 1, + offset: 0.0, + width: '100%', + height:'30px', + backgroundColor:'#ffff00', + backgroundPosition:'0px', + transformOrigin:'center center' + }, +]; + +export default { + + onShow(){ + // 通用属性 + var prop1 = this.$element('prop1'); + var name1 = prop1.dataSet.name + var prop2 = this.$refs.prop2; + var name2 = prop2.dataSet.name + prompt.showToast({ + message: 'prop1--' + name1 + '\nprop2--' + name2 + }); + + var styleValues = this.getStyleValues(); + var propsValues = this.getPropValues(); + + globalThis.value = { + styleValues:styleValues, + propsValues:propsValues + } + }, + + getStyleValues(){ + var styleValue1 = this.$element("style1").getInspector() + var styleValue2 = this.$element("style2").getInspector() + var styleValue3 = this.$element("style3").getInspector() + var styleValue4 = this.$element("style4").getInspector() + var styleValue5 = this.$element("style5").getInspector() + var styleValue6 = this.$element("style6").getInspector() + var styleValue7 = this.$element("style7").getInspector() + + return { + style1:styleValue1, + style2:styleValue2, + style3:styleValue3, + style4:styleValue4, + style5:styleValue5, + style6:styleValue6, + style7:styleValue7 + } + }, + + getPropValues(){ + var propValue1 = this.$element("prop1").getInspector() + var propValue2 = this.$element("prop2").getInspector() + var propValue3 = this.$element("prop3").getInspector() + + return { + prop1:propValue1, + prop2:propValue2, + prop3:propValue3 + } + }, + + touchStart(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchstart:\n' + message + }); + }, + + touchMove(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchMove:\n' +message + }); + }, + + touchEnd(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchEnd:\n' +message + }); + }, + + touchCancel(event){ + var globalX = event.touches[0].globalX + var globalY = event.touches[0].globalY + var localX = event.touches[0].localX + var localY = event.touches[0].localY + var size = event.touches[0].size + var force = event.touches[0].force + var changeGlobalX = event.changedTouches[0].globalX + var changeGlobalY = event.changedTouches[0].globalY + var changeLocalX = event.changedTouches[0].localX + var changeLocalY = event.changedTouches[0].localY + var changeSize = event.changedTouches[0].size + var changeForce = event.changedTouches[0].force + var message = 'globalX--' + globalX + ',globalY--' + globalY + + ',localX--' + localX + ',localY--' + localY + ',size--' + size + ',force--' + force + + ',changeGlobalX--' + changeGlobalX + ',changeGlobalY--' + changeGlobalY + + ',changeLocalX--' + changeLocalX + ',changeLocalY--' + changeLocalY + + ',changeSize--' + changeSize + ',changeForce--' + changeForce; + prompt.showToast({ + message: 'touchCancel:\n' +message + }); + }, + + click(){ + prompt.showToast({ + message: 'click' + }); + }, + + doubleClick(){ + prompt.showToast({ + message: 'doubleClick' + }); + }, + + longPress(){ + prompt.showToast({ + message: 'longPress' + }); + }, + + focus(){ + prompt.showToast({ + message: 'focus' + }); + }, + + blur(){ + prompt.showToast({ + message: 'blur' + }); + }, + + key(event){ + var code = event.code; + var action = event.action; + var repeatCount = event.repeatCount; + var timestampStart = event.timestampStart; + var message = 'code--' + code + ',action--' + action + + ',repeatCount--' + repeatCount + ',timestampStart--' + timestampStart; + prompt.showToast({ + message: 'key:\n' + message + }); + }, + + swipe(event){ + var direction = event.direction; + var distance = event.distance; + var message = 'direction--' + direction + ',distance--' + distance; + prompt.showToast({ + message: 'swipe:\n' + message + }); + }, + + attached(){ + prompt.showToast({ + message: 'attached' + }); + }, + + detached(){ + prompt.showToast({ + message: 'detached' + }); + }, + + pinchStart(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchStart:\n' + message + }); + }, + + pinchUpdate(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchUpdate:\n' + message + }); + }, + + pinchEnd(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchUpdate:\n' + message + }); + }, + + pinchCancel(event){ + var scale = event.scale + var pinchCenterX = event.pinchCenterX + var pinchCenterY = event.pinchCenterY + var message = 'scale--' + scale + ',pinchCenterX--' + pinchCenterX + + ',pinchCenterY--' + pinchCenterY; + prompt.showToast({ + message: 'pinchCancel:\n' + message + }); + }, + + dragStart(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragStart:\n' + message + }); + }, + + drag(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'drag:\n' + message + }); + }, + + dragEnd(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragEnd:\n' + message + }); + }, + + dragEnter(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragEnter:\n' + message + }); + }, + + dragOver(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragOver:\n' + message + }); + }, + + dragLeave(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'dragLeave:\n' + message + }); + }, + + drop(event){ + var type = event.type + var globalX = event.globalX + var globalY = event.globalY + var timestamp = event.timestamp + var message = 'type--' + type + ',globalX--' + globalX + + ',globalY--' + globalY + ',timestamp--' + timestamp; + prompt.showToast({ + message: 'drop:\n' + message + }); + }, + + functionTest1(event){ + var function1 = this.$element('function1'); + function1.focus(true) + var rect = function1.getBoundingClientRect(); + var width = rect.width; + var height = rect.height; + var left = rect.left; + var top = rect.top; + var message = 'width--' + width + ',height--' + height + + ',left--' + left + ',top--' + top; + prompt.showToast({ + message: 'function1 rect:\n' + message + }); + }, + + functionTest2(event){ + var function2 = this.$element('function2'); + let observer = function2.createIntersectionObserver({ + ratios: [0.2, 0], // number + }); + observer.observe((isVisible, ratio)=> { + console.info('this element is ' + isVisible + 'ratio is ' + ratio) + prompt.showToast({ + message: 'function2 observer:\n' + 'isVisible--' + isVisible + ',ratio--' + ratio + }); + }) + + observer.unobserve() + }, + + functionTest3(event){ + var function3 = this.$element('function3'); + + var animation = function3.animate(frames, options); + animation.play() + animation.onfinish = function(){ + prompt.showToast({ + message: 'The animation is finished.' + }); + }; + + animation.oncancel = function(){ + prompt.showToast({ + message: 'The animation is canceled.' + }); + }; + + animation.onrepeat = function(){ + prompt.showToast({ + message: 'The animation is repeated.' + }); + }; + + setTimeout(() => { + animation.reverse() + }, 500) + + setTimeout(() => { + animation.pause() + }, 1000) + + setTimeout(() => { + animation.cancel() + }, 1500) + }, + + functionTest4(){ + var function4 = this.$element('function4'); + function4.start(); + prompt.showToast({ + message: 'function4 video start.' + }); + }, + functionTest5(){ + var function5 = this.$element('function5'); + function5.pause(); + prompt.showToast({ + message: 'function5 video pause.' + }) + }, + functionTest6(){ + var function6 = this.$element('function6'); + function6.setCurrentTime({ + currenttime: 2 + }); + prompt.showToast({ + message: 'function6 video setCurrentTime.' + }) + }, + functionTest7(){ + var function7 = this.$element('function7'); + function7.requestFullscreen({ + screenOrientation : "default" + }); + prompt.showToast({ + message: 'function7 video requestFullscreen.' + }) + + }, + functionTest8(){ + var function8 = this.$element('function8'); + function8.exitFullscreen(); + prompt.showToast({ + message: 'function8 video exitFullscreen.' + }) + }, + functionTest9(){ + var function9 = this.$element('function9'); + function9.stop(); + prompt.showToast({ + message: 'function9 video stop.' + }) + }, + + reachStart(){ + prompt.showToast({ + message: 'reachStart' + }); + }, + + reachEnd(){ + prompt.showToast({ + message: 'reachEnd' + }); + }, + + reachTop(){ + prompt.showToast({ + message: 'reachTop' + }); + }, + + reachBottom(){ + prompt.showToast({ + message: 'reachBottom' + }); + }, + prepared() { + prompt.showToast({ + message: 'prepared' + }); + }, + start() { + prompt.showToast({ + message: 'start' + }); + }, + pause() { + prompt.showToast({ + message: 'pause' + }); + }, + finish() { + prompt.showToast({ + message: 'finish' + }); + }, + error() { + prompt.showToast({ + message: 'error' + }); + }, + seeking() { + prompt.showToast({ + message: 'seeking' + }); + }, + seeked() { + prompt.showToast({ + message: 'seeked' + }); + }, + timeupdate() { + prompt.showToast({ + message: 'timeupdate' + }); + }, + fullscreenchange() { + prompt.showToast({ + message: 'fullscreenchange' + }); + }, + stop() { + prompt.showToast({ + message: 'stop' + }); + } +} + + + +//export default { +// data: { +// title: '', +// time: '', +// controls: false, +// loop: false, +// videoSpeed: 1.0 +// }, +// prepared(data) { +// this.title = '视频准备完成，时间：' + data.duration + 's'; +// }, +// startVideo() { +// this.title = "视频播放" +// }, +// pauseVideo() { +// this.title = "暂停播放" +// }, +// finishVideo() { +// this.title = "播放结束" +// }, +// errorVideo() { +// this.title = "播放失败" +// }, +// seekingVideo(data) { +// this.title = '操作进度条至：' + data.currenttime + 's'; +// }, +// seekedVideo(data) { +// this.title = '操作进度条结束，转至：' + data.currenttime + 's'; +// }, +// timeupdateVideo(data) { +// this.time = '播放进度: ' + data.currenttime + 's'; +// }, +// stopVideo() { +// this.title = '操作进度条结束，转至：' + data.currenttime + 's'; +// }, +// play() { +// this.$element('video_1').start(); +// }, +// suspend() { +// this.$element('video_1').pause(); +// }, +// stop() { +// this.$element('video_1').stop(); +// }, +// stopVideo() { +// this.time = '请求停止播放'; +// }, +// showControls() { +// this.controls = !this.controls; +// }, +// isLoop() { +// this.loop = !this.loop; +// }, +// speed(flg) { +// if(flg == '0.5'){ +// this.videoSpeed = 0.5; +// }else if(flg == '1'){ +// this.videoSpeed = 1.0; +// }else if(flg == '2'){ +// this.videoSpeed = 2.0; +// } +// }, +// setCurrentTime(flg) { +// let data = { +// currenttime: flg +// } +// this.$element('video_1').setCurrentTime(data); +// }, +// requestFullscreen() { +// this.$element('video_1').requestFullscreen({screenOrientation : "default"}); +// } +//} diff --git a/multimedia/audio/audio.iml b/multimedia/audio/audio.iml new file mode 100644 index 0000000000000000000000000000000000000000..87f35a14e3d2bde02403f1a80e95aac42b471173 --- /dev/null +++ b/multimedia/audio/audio.iml @@ -0,0 +1,11 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/multimedia/media/media_js_standard/audioPlayer/audioPlayer.iml b/multimedia/media/media_js_standard/audioPlayer/audioPlayer.iml new file mode 100644 index 0000000000000000000000000000000000000000..f76df2b77e1e8cd214994f4bf0512d5bde4cf377 --- /dev/null +++ b/multimedia/media/media_js_standard/audioPlayer/audioPlayer.iml @@ -0,0 +1,11 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/multimedia/media/media_js_standard/audioRecorder/audioRecorder.iml b/multimedia/media/media_js_standard/audioRecorder/audioRecorder.iml new file mode 100644 index 0000000000000000000000000000000000000000..f76df2b77e1e8cd214994f4bf0512d5bde4cf377 --- /dev/null +++ b/multimedia/media/media_js_standard/audioRecorder/audioRecorder.iml @@ -0,0 +1,11 @@ + + + + + + + + + + + \ No newline at end of file