Skip to content

X
Xts Acts

OpenHarmony / Xts Acts
大约 1 年 前同步成功

通知 9
Star 22
Fork 0
X
Xts Acts

体验新版 GitCode，发现更多精彩内容 >>

提交 5bd1ab66 编写于 作者: B bayanxing
浏览文件
操作

add test cases 

Signed-off-by: Nbayanxing <bayanxing@kaihongdigi.com>
上级 5f460e4f
隐藏空白更改
内联 并排
Showing with 17623 addition and 1 deletion
ace/ace_standard/src/main/config.json
浏览文件 @ 5bd1ab66
...@@ -93,7 +93,35 @@ ...@@ -93,7 +93,35 @@
"pages/swiper/index", "pages/swiper/index",
"pages/tabs/index", "pages/tabs/index",
"pages/tab-bar/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", "name": "default",
"window": { "window": {
......
ace/ace_standard/src/main/js/default/pages/animate/index.css 0 → 100644
浏览文件 @ 5bd1ab66
.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;
}
ace/ace_standard/src/main/js/default/pages/animate/index.hml 0 → 100644
浏览文件 @ 5bd1ab66
<div class="container">
<div>
<div class="outerBox">
<text class="title">
动画效果1
</text>
<svg width="150" height="150" class="svg-style">
<circle cx="60" cy="60" r="50" stroke-width="4" fill="white" stroke="blue">
<animate attributeName="r" from="0" to="30" dur="2000" repeatCount="1"></animate>
</circle>
<circle cx="110" cy="110" r="50" stroke-width="4" fill="white" stroke="blue">
<animate attributeName="r" from="0" to="30" dur="2000" repeatCount="1" fill="freeze"></animate>
</circle>
</svg>
</div>
<div class="outerBox">
<text class="title">
动画效果2
</text>
<svg width="150" height="150" class="svg-style">
<rect x="25" y="25" width="100" height="100" fill="red" rx="0" ry="20">
<animate attributeName="rx" from="0" to="30" keyTimes="0;0.25;0.75;1" keySplines="0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1"
dur="1000" repeatCount="indefinite">
</animate>
</rect>
</svg>
</div>
</div>
<div>
<div class="outerBox">
<text class="title">
动画效果3
</text>
<svg width="150" height="150" class="svg-style">
<text x="25" y="25" font-size="30px" fill="red">
animate
<animate attributeName="y" values="25;90;150;80" keyTimes="0;0.25;0.75;1" keySplines="0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1"
dur="5000" repeatCount="indefinite">
</animate>
<animate attributeName="x" values="25;100;30;0" keyTimes="0;0.25;0.75;1" keySplines="0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1"
dur="5000" repeatCount="indefinite">
</animate>
<animate attributeName="fill" values="red;blue;#00ff00;#888888" keyTimes="0;0.25;0.75;1" keySplines="0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1"
dur="5000" repeatCount="indefinite">
</animate>
</text>
</svg>
</div>
<div class="outerBox">
<text class="title">
动画效果4
</text>
<svg width="150" height="150" class="svg-style">
<path d="M0,0 Q40,40 60,80 Q90,60 100,120 Q100,0 150,150" stroke="red"
fill="none"></path>
<text>
<textpath fill="blue" path="M0,0 Q40,40 60,80 Q90,60 100,120 Q100,0 150,150"
font-size="16px" startOffset="0%">
animate
<animate attributeName="startOffset" values="0%;40%;60%;80%" keyTimes="0.5;0.25;0.75;1" keySplines="0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1"
dur="5000" repeatCount="indefinite">
</animate>
</textpath>
</text>
</svg>
</div>
</div>
<div>
<div class="outerBox">
<text class="title">
动画效果5
</text>
<svg width="150" height="150" class="svg-style">
<rect x="25" y="25" width="100" height="100" fill="red" rx="0" ry="20">
<animate attributeName="fill" from="red" to="#ff00ff" dur="3000" repeatCount="indefinite" calcMode="discrete">
</animate>
</rect>
</svg>
</div>
<div class="outerBox">
<text class="title">
动画效果6
</text>
<svg width="150" height="150" class="svg-style">
<rect x="25" y="25" width="100" height="100" fill="red" rx="0" ry="20">
<animate attributeName="fill" from="red" to="#ff00ff" dur="3000" repeatCount="indefinite">
</animate>
</rect>
</svg>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/animate/index.js 0 → 100644
浏览文件 @ 5bd1ab66
/*
* 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 {
}
ace/ace_standard/src/main/js/default/pages/animateMotion/index.css 0 → 100644
浏览文件 @ 5bd1ab66
.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
ace/ace_standard/src/main/js/default/pages/animateMotion/index.hml 0 → 100644
浏览文件 @ 5bd1ab66
<div class="container">
<div>
<div class="outerBox">
<text class="title">
动画效果1
</text>
<svg width="150" height="120" class="svg-style">
<path fill="none" stroke="blue" stroke-width="3" d="m20,60 c0,-100 120,100 120,0 c0,-100 -120,100 -120,0 z"></path>
<path fill="red" d="M-5,-10 L15,0 L-5,10 L0,0 Z">
<animateMotion dur="2000" repeatCount="indefinite" rotate="auto" keyPoints="0;0.2;0.4;0.6;0.8;1" path="m20,60 c0,-100 120,100 120,0 c0,-100 -120,100 -120,0 z">
</animateMotion>
</path>>
</svg>
</div>
<div class="outerBox">
<text class="title">
动画效果2
</text>
<svg width="150" height="120" class="svg-style">
<path fill="none" stroke="blue" stroke-width="3" d="m20,60 c0,-100 120,100 120,0 c0,-100 -120,100 -120,0 z"></path>
<path fill="red" d="M-5,-10 L15,0 L-5,10 L0,0 Z">
<animateMotion dur="2000" repeatCount="1" rotate="auto" keyPoints="0;0.2;0.4;0.6;0.8;1" path="m20,60 c0,-100 120,100 120,0 c0,-100 -120,100 -120,0 z">
</animateMotion>
</path>
</svg>
</div>
</div>
<div>
<div class="outerBox">
<text class="title">
动画效果3
</text>
<svg width="150" height="120" class="svg-style">
<path fill="none" stroke="blue" stroke-width="3" d="m20,60 c0,-100 120,100 120,0 c0,-100 -120,100 -120,0 z"></path>
<path fill="red" d="M-5,-10 L15,0 L-5,10 L0,0 Z">
<animateMotion dur="2000" repeatCount="indefinite" rotate="auto-reverse" path="m20,60 c0,-100 120,100 120,0 c0,-100 -120,100 -120,0 z">
</animateMotion>
</path>
</svg>
</div>
<div class="outerBox">
<text class="title">
动画效果4
</text>
<svg width="150" height="120" class="svg-style">
<path fill="none" stroke="blue" stroke-width="3" d="m20,60 c0,-100 120,100 120,0 c0,-100 -120,100 -120,0 z"></path>
<path fill="red" d="M-5,-10 L15,0 L-5,10 L0,0 Z">
<animateMotion dur="2000" repeatCount="1" fill="freeze" rotate="5" path="m20,60 c0,-100 120,100 120,0 c0,-100 -120,100 -120, 0 z">
</animateMotion>
</path>
</svg>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/animateTransform/index.css 0 → 100644
浏览文件 @ 5bd1ab66
.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;
}
ace/ace_standard/src/main/js/default/pages/animateTransform/index.hml 0 → 100644
浏览文件 @ 5bd1ab66
<div class="container">
<div>
<div class="outerBox">
<text class="title">
动画效果1
</text>
<svg width="150" height="150" class="svg-style">
<circle cx="40" cy="40" r="20" stroke-width="4" fill="white" stroke="blue">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 100 120"
to="150 60 90" dur="3s" repeatCount="indefinite">
</animateTransform>
</circle>
</svg>
</div>
<div class="outerBox">
<text class="title">
动画效果2
</text>
<svg width="150" height="150" class="svg-style">
<circle cx="30" cy="100" r="20" stroke-width="4" fill="white" stroke="blue">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0"
to="-100" dur="3s" repeatCount="1">
</animateTransform>
</circle>
</svg>
</div>
</div>
<div>
<div class="outerBox">
<text class="title">
动画效果3
</text>
<svg width="150" height="150" class="svg-style">
<ellipse cx="50" cy="50" rx="30" ry="20" fill="blue">
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="2" dur="3s"
repeatCount="indefinite">
</animateTransform>
</ellipse>
</svg>
</div>
<div class="outerBox">
<text class="title">
动画效果4
</text>
<svg width="150" height="150" class="svg-style">
<ellipse cx="50" cy="50" rx="30" ry="20" fill="blue">
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="2" dur="3s"
repeatCount="1" fill="freeze">
</animateTransform>
</ellipse>
</svg>
</div>
</div>
<div>
<div class="outerBox">
<text class="title">
动画效果5
</text>
<svg width="150" height="150" class="svg-style">
<line x1="10" x2="90" y1="75" y2="75" stroke-width="10" stroke="black" stroke-linecap="square">
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="100"
dur="3s" repeatCount="indefinite">
</animateTransform>
</line>
</svg>
</div>
<div class="outerBox">
<text class="title">
动画效果6
</text>
<svg width="150" height="150" class="svg-style">
<line x1="10" x2="90" y1="35" y2="35" stroke-width="10" stroke="black" stroke-linecap="square">
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="0 0" to="0 100"
dur="3s" repeatCount="indefinite">
</animateTransform>
</line>
</svg>
</div>
</div>
<div>
<div class="outerBox">
<text class="title">
动画效果7
</text>
<svg width="150" height="150" class="svg-style">
<path stroke="black" fill="none" stroke-linejoin="miter" stroke-miterlimit="1" id="p2"
d="M1,19 l17,-13 l7,23 m0,0 l13.5,33 l13.5 ,-43 m0,0 l32 ,-13 l42 ,13 m0,0 l10.75,93">
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="3"
dur="3s" repeatCount="indefinite">
</animateTransform>
</path>
</svg>
</div>
<div class="outerBox">
<text class="title">
动画效果8
</text>
<svg width="150" height="150" class="svg-style">
<path stroke="black" fill="none" stroke-linejoin="miter" stroke-miterlimit="1" id="p2"
d="M1,19 l17,-13 l7,23 m0,0 l13.5,33 l13.5 ,-43 m0,0 l32 ,-13 l42 ,13 m0,0 l10.75,93">
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1 1" to="2 6"
dur="3s" repeatCount="indefinite">
</animateTransform>
</path>
</svg>
</div>
</div>
<div>
<div class="outerBox">
<text class="title">
动画效果9
</text>
<svg width="150" height="150" class="svg-style">
<polygon points="10,20 40,40 30,60" fill="black">
<animateTransform attributeName="transform" attributeType="XML" type="skewX" from="10" to="80" dur="3s"
repeatCount="indefinite">
</animateTransform>
</polygon>
</svg>
</div>
<div class="outerBox">
<text class="title">
动画效果10
</text>
<svg width="150" height="150" class="svg-style">
<polygon points="10,20 40,40 30,60" fill="black">
<animateTransform attributeName="transform" attributeType="XML" type="skewY" from="10" to="80" dur="3s"
repeatCount="indefinite">
</animateTransform>
</polygon>
</svg>
</div>
</div>
<div>
<div class="outerBox">
<text class="title">
动画效果11
</text>
<svg width="150" height="150" class="svg-style">
<polyline points="10,150 50,125 50,150 100,100" fill="white" stroke="black">
<animateTransform attributeName="transform" attributeType="XML" type="skewX" from="0" to="80" dur="3s"
repeatCount="indefinite">
</animateTransform>
<animateTransform attributeName="transform" attributeType="XML" type="skewY" from="150" to="90" dur="3s"
repeatCount="indefinite">
</animateTransform>
</polyline>
</svg>
</div>
<div class="outerBox">
<text class="title">
动画效果12
</text>
<svg width="150" height="150" class="svg-style">
<rect width="100" height="100" x="25" y="25" stroke-width="10" stroke="red" rx="10" ry="10"
stroke-dasharray="5 3" stroke-dashoffset="3">
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="2"
dur="3s" repeatCount="indefinite">
</animateTransform>
<animate attributeName="stroke" from="red" to="#ff00ff" dur="3000" repeatCount="indefinite">
</animate>
</rect>
</svg>
</div>
</div>
<div>
<div class="outerBox">
<text class="title">
动画效果13
</text>
<svg width="150" height="150" class="svg-style">
<text x="10" y="10" fill="#D2691E" font-size="12">
animateTransform
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="5"
dur="3s" repeatCount="indefinite">
</animateTransform>
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="0 0" to="0 90"
dur="3s" repeatCount="indefinite">
</animateTransform>
</text>
</svg>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/canvas/index.css 0 → 100644
浏览文件 @ 5bd1ab66
/**
* 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;
}
ace/ace_standard/src/main/js/default/pages/canvas/index.hml 0 → 100644
浏览文件 @ 5bd1ab66
<!--/**
* 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.
*/-->
<div class="container">
<div class="sub-container">
<div class="style-container">
<text class="title">
通用样式
</text>
<text class="sub-title">
canvas通用样式1
</text>
<canvas class="style1">
</canvas>
<text class="sub-title">
canvas通用样式2
</text>
<canvas class="style2">
</canvas>
<text class="sub-title">
canvas通用样式3
</text>
<canvas class="style3">
</canvas>
<text class="sub-title">
canvas通用样式4
</text>
<canvas class="style4">
</canvas>
<text class="sub-title">
canvas通用样式5
</text>
<div class="contain1">
<canvas class="style5">
</canvas>
<canvas class="style6">
</canvas>
</div>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="event-container" >
<text class="title">
通用事件
</text>
<text class="sub-title">
canvas通用事件1
</text>
<canvas class ="event1" ontouchstart="touchStart" ontouchmove="touchMove"
ontouchend="touchEnd" ontouchcancel="touchCancel">
</canvas>
<text class="sub-title">
canvas通用事件2
</text>
<canvas class ="event2" onclick="click" ondoubleclick="doubleClick"
onlongpress="longPress" onfocus="focus" onblur="blur" onkey="key"
onswipe="swipe" onattached="attached" ondetached="detached">
</canvas>
<text class="sub-title">
canvas通用事件3
</text>
<canvas class ="event3" onpinchstart="pinchStart" onpinchupdate="pinchUpdate"
onpinchend="pinchEnd" onpinchcancel="pinchCancel"
ondragstart="dragStart" ondrag="drag"
ondragend="dragEnd" ondragenter="dragEnter"
ondragover="dragOver" ondragleave="dragLeave"
ondrop="drop">
</canvas>
</div>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="true">
</divider>
<div class="sub-container">
<div class="prop-container">
<text class="title">
通用属性
</text>
<text class="sub-title">
canvas通用属性1
</text>
<canvas id="prop1" class="prop1"
disabled = "true" focusable ="true"
data-name ="prop1"
dir ="rtl">
</canvas>
<text class="sub-title">
canvas通用属性2
</text>
<canvas class="prop2" ref ="prop2"
disabled = "false" focusable ="false"
data-name ="prop2"
dir ="ltr">
</canvas>
<text class="sub-title">
canvas通用属性3
</text>
<canvas style="color: #679855; margin: 5px;" class="prop3">
</canvas>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="function-container">
<text class="title">
通用方法
</text>
<text class="sub-title">
canvas通用方法1
</text>
<canvas id="function1" ref="function1" class="function1" ontouchstart="functionTest1"></canvas>
<text class="sub-title">
canvas通用方法2
</text>
<canvas id="function2" ref="function2" class="function2" ontouchstart="functionTest2"></canvas>
<text class="sub-title">
canvas通用方法3
</text>
<canvas id="function3" ref="function3" class="function3" ontouchstart="functionTest3"></canvas>
<text class="sub-title">
canvas特有方法4
</text>
<canvas id="function4" ref="function4" style="width: 100%;height: 40px;background-color: #ffff00;" onclick="functionTest4"></canvas>
<text class="sub-title">
canvas特有方法5
</text>
<canvas id="function5" style="width:100%;height:30px;background-color: #ffff00; margin-bottom: 10px;" ref="function5" onclick="functionTest5"></canvas>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="ani-container">
<text class="title">
动画样式
</text>
<text class="sub-title">
canvas动画样式1
</text>
<canvas class="ani1" >
</canvas>
<text class="sub-title">
canvas动画样式2
</text>
<canvas class="ani2" >
</canvas>
</div>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="true">
</divider>
<div class="sub-container">
<div class="gradient-container">
<text class="title">
渐变样式
</text>
<text class="sub-title">
canvas渐变样式1
</text>
<canvas class="gradient1">
</canvas>
<text class="sub-title">
canvas渐变样式2
</text>
<canvas class="gradient2">
</canvas>
<text class="sub-title">
canvas渐变样式3
</text>
<canvas class="gradient3">
</canvas>
<text class="sub-title">
canvas渐变样式4
</text>
<canvas class="gradient4">
</canvas>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="access-container">
<text class="title">
无障碍
</text>
<text class="sub-title">
canvas无障碍1
</text>
<canvas class="access1" accessibilitygroup ="true"
accessibilitytext="这是canvas"
accessibilitydescription="点击此按键会弹出一个对话框"
accessibilityimportance="no-hide-descendants">
</canvas>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="atom-container">
<text class="title">
原子布局
</text>
<text class="sub-title">
canvas原子布局1
</text>
<div style="flex-direction: row;height: 30px;width: 100%;">
<canvas style="width:20px;height:20px;background-color: blue;display-index: 1;">
</canvas>
<canvas style="width:30px; height:20px;background-color: black;display-index: 5;">
</canvas>
<canvas style="width:40px; height:20px;background-color: yellow;display-index: 4;">
</canvas>
<canvas style="width:10px; height:20px;background-color: red;display-index: 3;">
</canvas>
<canvas style="width:25px; height:20px;background-color:pink;display-index: 7;">
</canvas>
<canvas style="width:15px; height:20px;background-color: palegoldenrod;display-index: 2;">
</canvas>
</div>
<text class="sub-title">
canvas原子布局2
</text>
<div style="flex-direction: row;height: 30px;width: 100%;">
<canvas style="height:20px;background-color: blue;flex-weight: 1;">
</canvas>
<canvas style="height:20px;background-color: black;flex-weight: 5;">
</canvas>
<canvas style="height:20px;background-color: yellow;flex-weight: 4;">
</canvas>
<canvas style="height:20px;background-color: red;flex-weight: 3;">
</canvas>
<canvas style="height:20px;background-color:pink;flex-weight: 7;">
</canvas>
<canvas style="height:20px;background-color: palegoldenrod;flex-weight: 2;">
</canvas>
</div>
<text class="sub-title">
canvas原子布局3
</text>
<div style="flex-direction: row;height:60px;width: 100%;">
<canvas style="width:30px;background-color: blue;aspect-ratio: 0.6;">
</canvas>
<canvas style="width:30px;background-color: black;aspect-ratio:0.5;">
</canvas>
<canvas style="width:30px;background-color: yellow;aspect-ratio: 1.5;">
</canvas>
<canvas style="width:30px;background-color: red;aspect-ratio: 1.3;">
</canvas>
<canvas style="width:30px;background-color:pink;aspect-ratio: 1;">
</canvas>
<canvas style="width:30px;background-color: palegoldenrod;aspect-ratio:2;">
</canvas>
</div>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="multiMode-container">
<text class="title">
多模输入
</text>
<text class="sub-title">
canvas多模输入1
</text>
<canvas class="multiMode1" voicelabel = "voice"
subscriptflag="on" subscriptlabel="div" scenelabel="common">
</canvas>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/canvas/index.js 0 → 100644
浏览文件 @ 5bd1ab66
/**
* 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
ace/ace_standard/src/main/js/default/pages/circle/index.css 0 → 100644
浏览文件 @ 5bd1ab66
/**
* 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
ace/ace_standard/src/main/js/default/pages/circle/index.hml 0 → 100644
浏览文件 @ 5bd1ab66
<div class="container">
<div class="style-container">
<text class="title">
通用样式
</text>
<text class="sub-title">
circle通用样式1
</text>
<circle class="style1" cx="40" cy="5" r="20" fill="white" stroke="red" stroke="blue" stroke-width="3" ></circle>
<text class="sub-title">
circle通用样式2
</text>
<circle class="style2" cx="40" cy="22" r="20" fill="white" stroke="red" stroke="blue" stroke-width="4" fill-opacity="0"></circle>
<text class="sub-title">
circle通用样式3
</text>
<svg class="style3" x="0" y="0" width="100" height="100" >
<circle cx="40" cy="50" r="30" fill="white" stroke="blue" stroke="blue" stroke-width="4" fill-opacity="0"></circle>
</svg>
<text class="sub-title">
circle通用样式4
</text>
<circle class="style4" cx="25" cy="25" r="20" fill="white" stroke="block" stroke="blue" stroke-width="4" fill-opacity="0"></circle>
<text class="sub-title">
circle通用样式5
</text>
<div class="contain1">
<circle class="style5" cx="40" cy="30" r="20" fill="white" stroke="blue" stroke="blue" stroke-width="4" fill-opacity="0"></circle>
<circle class="style6" cx="40" cy="30" r="20" fill="white" stroke="blue" stroke="blue" stroke-width="4" fill-opacity="0"></circle>
</div>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="true">
</divider>
<div class="sub-container">
<div class="prop-container">
<text class="title">
通用属性
</text>
<text class="sub-title">
circle通用属性1
</text>
<svg x="0" y="0" width="200" height="50" >
<circle class="prop1" id="prop1" data-name ="prop1" cx="50" cy="20" r="15" stroke-width="3" fill="red" stroke="blue" fill-opacity="0.5"></circle>
</svg>
<text class="sub-title">
circle通用属性2
</text>
<svg x="0" y="0" width="200" height="50" >
<circle class="prop2" ref="prop2" data-name ="prop2" cx="50" cy="20" r="15" stroke-width="3" fill="red" stroke="blue" opacity="0.4"></circle>
</svg>
<text class="sub-title">
circle通用属性3
</text>
<svg x="0" y="0" width="200" height="50" fill="white">
<circle class="prop3" id="prop3" cx="50" cy="20" r="15" stroke-width="4" fill="red" stroke="blue"></circle>
</svg>
<text class="sub-title">
circle通用属性4
</text>
<svg x="0" y="0" width="200" height="50" fill="white">
<circle class="prop4" id="prop4" cx="50" cy="20" r="15" stroke-width="5" stroke="red" stroke-dasharray="10 5" stroke-dashoffset="3"></circle>
</svg>
<text class="sub-title">
circle通用属性5
</text>
<svg x="0" y="0" width="200" height="50" fill="white" fill-opacity="0">
<circle class="prop5" id="prop5" cx="50" cy="30" r="15" stroke="blue" stroke-width="4" transform="rotate(-10)"></circle>
</svg>
<text class="sub-title">
circle通用属性6
</text>
<svg x="0" y="0" width="200" height="50" fill="white" fill-opacity="0">
<circle class="prop6" id="prop6" cx="20" cy="30" r="15" stroke="blue" stroke-width="4" transform="translate(20)"></circle>
</svg>
<text class="sub-title">
circle通用属性7
</text>
<svg x="0" y="0" width="200" height="50" fill="white" fill-opacity="0">
<circle class="prop7" id="prop7" cx="80" cy="40" r="15" stroke="blue" stroke-width="4" transform="skewY(-10)"></circle>
</svg>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="ani-container">
<text class="title">
动画样式
</text>
<text class="sub-title">
circle动画样式1
</text>
<svg fill="white" width="200" height="40">
<circle cx="100" cy="20" r="15" stroke-width="4" fill="white" stroke="blue">
<animate attributeName="stroke-width" from="4" to="10" calcMode="discrete" dur="2000" repeatCount="indefinite"></animate>
<animate attributeName="stroke" values="red;blue" dur="2000" repeatCount="indefinite"></animate>
</circle>
<circle cx="60" cy="20" r="15" fill="blue">
<animate attributeName="fill" values="red;blue" dur="2000" repeatCount="indefinite"></animate>
</circle>
<circle cx="20" cy="20" r="15" fill="blue">
<animate attributeName="fill-opacity" from="1.0" to="0.5" dur="2000" repeatCount="indefinite"></animate>
</circle>
</svg>
<text class="sub-title">
circle动画样式2
</text>
<svg fill="white" width="200" height="120">
<circle cx="0" cy="20" r="20" stroke-width="4" fill="white" stroke="blue">
<animate attributeName="r" from="0" to="30" dur="2000" repeatCount="indefinite"></animate>
<animate attributeName="cx" from="40" to="80" dur="2000" repeatCount="indefinite"></animate>
</circle>
<circle cx="30" cy="20" r="20" stroke-width="10" stroke="red" stroke-dasharray="60 10" stroke-dashoffset="3">
<animate attributeName="stroke-opacity" from="1.0" to="0.5" dur="2000" repeatCount="indefinite"></animate>
<animate attributeName="stroke-dashoffset" values="30;0;30" dur="500" repeatCount="indefinite"></animate>
<animate attributeName="cy" from="20" to="400" dur="3000" repeatCount="indefinite"></animate>
</circle>
<circle cx="30" cy="20" r="5" fill="blue">
<animate attributeName="cy" from="20" to="400" dur="3000" repeatCount="indefinite"></animate>
</circle>
</svg>
</div>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="true">
</divider>
<div class="sub-container">
<div class="gradient-container">
<text class="title">
渐变样式
</text>
<text class="sub-title">
circle渐变样式1
</text>
<circle class="gradient1" cx="60" cy="45" r="35" fill="white" fill-opacity="0" stroke="block" stroke-dasharray="5 3" stroke-dashoffset="3"></circle>
<text class="sub-title">
circle渐变样式2
</text>
<circle class="gradient2" cx="60" cy="45" r="35" fill="white" fill-opacity="0" stroke="blue" ></circle>
<text class="sub-title">
circle渐变样式3
</text>
<circle class="gradient3" cx="60" cy="45" r="35" fill="pink" stroke="yellow" stroke="blue" ></circle>
<text class="sub-title">
circle渐变样式4
</text>
<circle class="gradient4" cx="60" cy="45" r="35" fill="white" stroke="red" stroke="blue"></circle>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="access-container">
<text class="title">
无障碍
</text>
<text class="sub-title">
circle无障碍1
</text>
<circle class="access1" accessibilitygroup ="true"
accessibilitytext="这是circle"
accessibilitydescription="点击此按键会弹出一个对话框"
accessibilityimportance="no-hide-descendants"
cx="50" cy="35" r="30" fill="#978666" stroke="#00FF00"></circle>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="multimode-container">
<text class="title">
多模输入
</text>
<text class="sub-title">
circle多模输入1
</text>
<circle class="multimode1" width="200" height="80" voicelabel = "voice"
subscriptflag="on" subscriptlabel="circle" scenelabel="common"
cx="50" cy="35" r="30" stroke-width="4" fill="#978666" stroke="block"></circle>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/circle/index.js 0 → 100644
浏览文件 @ 5bd1ab66
/**
* 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
ace/ace_standard/src/main/js/default/pages/ellipse/index.css 0 → 100644
浏览文件 @ 5bd1ab66
/**
* 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
ace/ace_standard/src/main/js/default/pages/ellipse/index.hml 0 → 100644
浏览文件 @ 5bd1ab66
<div class="container">
<div class="style-container">
<text class="title">
通用样式
</text>
<text class="sub-title">
ellipse通用样式1
</text>
<ellipse class="style1" id="style1" cx="35" cy="10" rx="40" ry="10" stroke-width="3"
stroke="red" fill-opacity="0"></ellipse>
<text class="sub-title">
ellipse通用样式2
</text>
<ellipse class="style2" id="style2" cx="40" cy="25" rx="40" ry="20"
stroke-width="3" stroke="red" stroke-dasharray="10 5" stroke-dashoffset="3" fill-opacity="0"></ellipse>
<text class="sub-title">
ellipse通用样式3
</text>
<svg x="0" y="0" width="200" height="200" fill="white" fill-opacity="0">
<ellipse class="style3" id="style3" cx="40" cy="25" rx="40" ry="20"
stroke-width="3" stroke="red" ></ellipse>
</svg>
<text class="sub-title">
ellipse通用样式4
</text>
<ellipse class="style4" id="style4" cx="40" cy="15" rx="40" ry="20" stroke-width="3"
stroke="block" stroke-dasharray="10 5" stroke-dashoffset="3"></ellipse>
<text class="sub-title">
ellipse通用样式5
</text>
<div class="contain1">
<ellipse class="style5" id="style5" cx="50" cy="25" rx="40" ry="20" stroke-width="3"
fill="white" stroke="red" stroke-dasharray="10 5" stroke-dashoffset="3"></ellipse>
<ellipse class="style6" id="style6" cx="50" cy="25" rx="40" ry="20" stroke-width="3"
fill="yellow" stroke="green" ></ellipse>
</div>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="true">
</divider>
<div class="sub-container">
<div class="prop-container">
<text class="title">
通用属性
</text>
<text class="sub-title">
circle通用属性1
</text>
<svg x="0" y="0" width="200" height="50" >
<ellipse class="prop1" id="prop1" data-name ="prop1" cx="50" cy="18" rx="30" ry="15"
stroke="blue" stroke-width="4" fill-opacity="0.5"></ellipse>
</svg>
<text class="sub-title">
circle通用属性2
</text>
<svg x="0" y="0" width="200" height="50" >
<ellipse class="prop2" ref="prop2" data-name ="prop2" cx="50" cy="18" rx="30" ry="15"
stroke-width="3" fill="red" stroke="blue"></ellipse>
</svg>
<text class="sub-title">
circle通用属性3
</text>
<svg x="0" y="0" width="200" height="50" fill="white">
<ellipse class="prop3" id="prop3" data-name ="prop1" cx="50" cy="18" rx="30" ry="15"
stroke="blue" stroke-width="4" fill-opacity="0.5"></ellipse>
</svg>
<text class="sub-title">
circle通用属性4
</text>
<svg x="0" y="0" width="200" height="50" fill="white">
<ellipse class="prop4" id="prop4" data-name ="prop1" cx="50" cy="18" rx="30" ry="15"
stroke-width="3" stroke="red" stroke-dasharray="10 5" stroke-dashoffset="3"></ellipse>
</svg>
<text class="sub-title">
circle通用属性5
</text>
<svg x="0" y="0" width="200" height="50" fill="white" fill-opacity="0">
<ellipse class="prop5" id="prop5" data-name ="prop1" cx="50" cy="25" rx="30" ry="15"
stroke-width="3" stroke="red" stroke-dasharray="10 5" stroke-dashoffset="3" transform="rotate(-10)"></ellipse>
</svg>
<text class="sub-title">
circle通用属性6
</text>
<svg x="0" y="0" width="200" height="150" fill="white" fill-opacity="0">
<ellipse class="prop6" id="prop6" data-name ="prop1" cx="50" cy="8" rx="50" ry="15"
stroke-width="3" stroke="blue" stroke-dasharray="10 5" stroke-dashoffset="3" transform="skewY(45)"></ellipse>
</svg>
<text class="sub-title">
circle通用属性7
</text>
<svg x="0" y="0" width="200" height="50" fill="white" fill-opacity="0">
<ellipse class="prop7" id="prop7" data-name ="prop1" cx="50" cy="25" rx="30" ry="15"
stroke-width="3" stroke="yellow" stroke-dasharray="10 5" stroke-dashoffset="3" transform="skewY(-10)"></ellipse>
</svg>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="ani-container">
<text class="title">
动画样式
</text>
<text class="sub-title">
ellipse动画样式1
</text>
<svg class="ani1" width="100" height="100" >
<ellipse cx="30" cy="50" rx="20" ry="40" stroke-width="3" fill="red" stroke="blue" ></ellipse>
</svg>
<text class="sub-title">
ellipse动画样式2
</text>
<svg class="ani2" width="100" height="100" >
<ellipse cx="60" cy="50" rx="20" ry="40" stroke-width="3" fill="red" stroke="blue" ></ellipse>
</svg>
</div>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="true">
</divider>
<div class="sub-container">
<div class="gradient-container">
<text class="title">
渐变样式
</text>
<text class="sub-title">
ellipse渐变样式1
</text>
<svg class="gradient1" x="0" y="0" width="200" height="100" >
<ellipse cx="60" cy="45" rx="20" ry="40" fill="white" fill-opacity="0" stroke-width="3" fill="red" stroke="block" ></ellipse>
</svg>
<text class="sub-title">
ellipse渐变样式2
</text>
<svg class="gradient2" x="0" y="0" width="200" height="100" >
<ellipse cx="60" cy="45" rx="20" ry="40" fill="white" fill-opacity="0" stroke-width="3" fill="red" stroke="blue" ></ellipse>
</svg>
<text class="sub-title">
ellipse渐变样式3
</text>
<svg class="gradient3" x="0" y="0" width="200" height="100" >
<ellipse cx="60" cy="45" rx="20" ry="40" fill="white" fill-opacity="0" stroke-width="3" fill="red" stroke="yellow" ></ellipse>
</svg>
<text class="sub-title">
ellipse渐变样式4
</text>
<svg class="gradient4" x="0" y="0" width="200" height="100" >
<ellipse cx="60" cy="45" rx="20" ry="40" fill="white" fill-opacity="0" stroke-width="3" fill="red" stroke="red" ></ellipse>
</svg>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="access-container">
<text class="title">
无障碍
</text>
<text class="sub-title">
ellipse无障碍1
</text>
<svg class="access1" accessibilitygroup ="true"
accessibilitytext="这是ellipse"
accessibilitydescription="点击此按键会弹出一个对话框"
accessibilityimportance="no-hide-descendants"
width="200" height="80">
<ellipse cx="50" cy="35" rx="20" ry="30" fill="white" fill-opacity="0" stroke-width="3" fill="red" stroke="#00FF00" ></ellipse>
</svg>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="multimode-container">
<text class="title">
多模输入
</text>
<text class="sub-title">
ellipse多模输入1
</text>
<svg class="multimode1" width="200" height="80" voicelabel = "voice"
subscriptflag="on" subscriptlabel="divider" scenelabel="common">
<ellipse cx="50" cy="25" rx="40" ry="20" fill="white" fill-opacity="0" stroke-width="3" fill="red" stroke="#978666" ></ellipse>
</svg>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/ellipse/index.js 0 → 100644
浏览文件 @ 5bd1ab66
/**
* 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
ace/ace_standard/src/main/js/default/pages/gridCol/index.css 0 → 100644
浏览文件 @ 5bd1ab66
/**
* 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
ace/ace_standard/src/main/js/default/pages/gridCol/index.hml 0 → 100644
浏览文件 @ 5bd1ab66
<!--/**
* 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.
*/-->
<div class="container">
<div class="sub-container">
<div class="style-container">
<text class="title">
通用样式
</text>
<text class="sub-title">
grid-col通用样式1
</text>
<grid-row class="container-style">
<grid-col class="style1" >
</grid-col>
</grid-row>
<text class="sub-title">
grid-col通用样式2
</text>
<grid-row class="container-style">
<grid-col class="style2" >
</grid-col>
</grid-row>
<text class="sub-title">
grid-col通用样式3
</text>
<grid-row class="container-style">
<grid-col class="style3" >
</grid-col>
</grid-row>
<text class="sub-title">
grid-col通用样式4
</text>
<grid-row class="container-style">
<grid-col class="style4" >
</grid-col>
</grid-row>
<text class="sub-title">
grid-col通用样式5
</text>
<grid-row class="contain1">
<grid-col class="style5" >
</grid-col>
<grid-col class="style6" >
</grid-col>
</grid-row>
<text class="sub-title">
grid-col特有样式
</text>
<grid-row class="style7">
<grid-col class="flex-item color-primary">
</grid-col>
<grid-col class="flex-item color-warning">
</grid-col>
<grid-col class="flex-item color-success">
</grid-col>
</grid-row>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="ani-container">
<text class="title">
动画样式
</text>
<text class="sub-title">
grid-col动画样式1
</text>
<grid-row class="container-style">
<grid-col class="ani1" >
</grid-col>
</grid-row>
<text class="sub-title">
grid-col动画样式2
</text>
<grid-row class="container-style">
<grid-col class="ani2" >
</grid-col>
</grid-row>
</div>
</div>
<div style="background-color: #000000; width: 2px; height: 100%;">
</div>
<div class="sub-container">
<div class="prop-container">
<text class="title">
通用属性
</text>
<text class="sub-title">
grid-col通用属性1
</text>
<grid-row class="container-style">
<grid-col id="prop1" class="prop1"
disabled = "true" focusable ="true"
data-name ="prop1" click-effect="spring-medium"
dir ="rtl">
</grid-col>
</grid-row>
<text class="sub-title">
grid-col通用属性2
</text>
<grid-row class="container-style">
<grid-col class="prop2" ref ="prop2"
disabled = "false" focusable ="false"
data-name ="prop2" click-effect="spring-large"
dir ="ltr">
</grid-col>
</grid-row>
<text class="sub-title">
grid-col通用属性3
</text>
<grid-row class="container-style">
<grid-col style="color: #679855; margin: 5px;" class="prop3">
</grid-col>
</grid-row>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="event-container" >
<text class="title">
通用事件
</text>
<text class="sub-title">
grid-col通用事件1
</text>
<grid-row class="container-style">
<grid-col class ="event1" ontouchstart="touchStart" ontouchmove="touchMove"
ontouchend="touchEnd" ontouchcancel="touchCancel">
</grid-col>
</grid-row>
<text class="sub-title">
grid-col通用事件2
</text>
<grid-row class="container-style">
<grid-col class ="event2" onclick="click" ondoubleclick="doubleClick"
onlongpress="longPress" onfocus="focus" onblur="blur" onkey="key"
onswipe="swipe" onattached="attached" ondetached="detached">
</grid-col>
</grid-row>
<text class="sub-title">
grid-col通用事件3
</text>
<grid-row class="container-style">
<grid-col class ="event3" onpinchstart="pinchStart" onpinchupdate="pinchUpdate"
onpinchend="pinchEnd" onpinchcancel="pinchCancel"
ondragstart="dragStart" ondrag="drag"
ondragend="dragEnd" ondragenter="dragEnter"
ondragover="dragOver" ondragleave="dragLeave"
ondrop="drop">
</grid-col>
</grid-row>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="function-container">
<text class="title">
通用方法
</text>
<text class="sub-title">
grid-col通用方法1
</text>
<div id="function1" class="function1" ontouchstart="functionTest1">
</div>
<text class="sub-title">
grid-col通用方法2
</text>
<grid-col id="function2" class="function2" ontouchstart="functionTest2">
</grid-col>
<text class="sub-title">
grid-col通用方法3
</text>
<grid-col id="function3" class="function3" ontouchstart="functionTest3">
</grid-col>
</div>
</div>
<div style="background-color: #000000; width: 2px; height: 100%;">
</div>
<div class="sub-container">
<div class="gradient-container">
<text class="title">
渐变样式
</text>
<text class="sub-title">
grid-col渐变样式1
</text>
<grid-col class="gradient1">
</grid-col>
<text class="sub-title">
grid-col渐变样式2
</text>
<grid-col class="gradient2">
</grid-col>
<text class="sub-title">
grid-col渐变样式3
</text>
<grid-col class="gradient3">
</grid-col>
<text class="sub-title">
grid-col渐变样式4
</text>
<grid-col class="gradient4">
</grid-col>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="accessibility-container">
<text class="title">
无障碍
</text>
<text class="sub-title">
grid-col无障碍1
</text>
<grid-col class="accessibility1" accessibilitygroup ="true"
accessibilitytext="这是div"
accessibilitydescription="点击此按键会弹出一个对话框"
accessibilityimportance="no-hide-descendants">
</grid-col>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="atom-container">
<text class="title">
原子布局
</text>
<text class="sub-title">
grid-col原子布局1
</text>
<div style="flex-direction: row;height: 30px;width: 100%;">
<grid-col style="width:20px;height:20px;background-color: blue;display-index: 1;">
</grid-col>
<grid-col style="width:30px; height:20px;background-color: black;display-index: 5;">
</grid-col>
<grid-col style="width:40px; height:20px;background-color: yellow;display-index: 4;">
</grid-col>
<grid-col style="width:10px; height:20px;background-color: red;display-index: 3;">
</grid-col>
<grid-col style="width:25px; height:20px;background-color:pink;display-index: 7;">
</grid-col>
<grid-col style="width:15px; height:20px;background-color: palegoldenrod;display-index: 2;">
</grid-col>
</div>
<text class="sub-title">
grid-col原子布局2
</text>
<div style="flex-direction: row;height: 30px;width: 100%;">
<grid-col style="height:20px;background-color: blue;flex-weight: 1;">
</grid-col>
<grid-col style="height:20px;background-color: black;flex-weight: 5;">
</grid-col>
<grid-col style="height:20px;background-color: yellow;flex-weight: 4;">
</grid-col>
<grid-col style="height:20px;background-color: red;flex-weight: 3;">
</grid-col>
<grid-col style="height:20px;background-color:pink;flex-weight: 7;">
</grid-col>
<grid-col style="height:20px;background-color: palegoldenrod;flex-weight: 2;">
</grid-col>
</div>
<text class="sub-title">
grid-col原子布局3
</text>
<div style="flex-direction: row;height:60px;width: 100%;">
<grid-col style="width:30px;background-color: blue;aspect-ratio: 0.6;">
</grid-col>
<grid-col style="width:30px;background-color: black;aspect-ratio:0.5;">
</grid-col>
<grid-col style="width:30px;background-color: yellow;aspect-ratio: 1.5;">
</grid-col>
<grid-col style="width:30px;background-color: red;aspect-ratio: 1.3;">
</grid-col>
<grid-col style="width:30px;background-color:pink;aspect-ratio: 1;">
</grid-col>
<grid-col style="width:30px;background-color: palegoldenrod;aspect-ratio:2;">
</grid-col>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="multiMode-container">
<text class="title">
多模输入
</text>
<text class="sub-title">
grid-col多模输入1
grid-col多模输入1
</text>
<grid-col class="multiMode1" voicelabel = "voice"
subscriptflag="on" subscriptlabel="div" scenelabel="common">
</grid-col>
</div>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/gridCol/index.js 0 → 100644
浏览文件 @ 5bd1ab66
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'
});
}
}
ace/ace_standard/src/main/js/default/pages/gridContainer/index.css 0 → 100644
浏览文件 @ 5bd1ab66
/**
* 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
ace/ace_standard/src/main/js/default/pages/gridContainer/index.hml 0 → 100644
浏览文件 @ 5bd1ab66
<!--/**
* 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.
*/-->
<div class="container">
<div class="sub-container">
<div class="style-container">
<text class="title">
通用样式
</text>
<text class="sub-title">
container通用样式1
</text>
<grid-container class="style1" >
<grid-row class="row-style">
</grid-row>
</grid-container>
<text class="sub-title">
container通用样式2
</text>
<grid-container class="style2">
<grid-row class="row-style">
</grid-row>
</grid-container>
<text class="sub-title">
container通用样式3
</text>
<grid-container class="style3" >
<grid-row class="row-style">
</grid-row>
</grid-container>
<text class="sub-title">
container通用样式4
</text>
<grid-container class="style4" >
<grid-row class="row-style">
</grid-row>
</grid-container>
<text class="sub-title">
container通用样式5
</text>
<div class="contain1">
<grid-container class="style5" >
<grid-row class="row-style">
</grid-row>
</grid-container>
<grid-container class="style6">
<grid-row class="row-style">
</grid-row>
</grid-container>
</div>
<text class="sub-title">
container特有样式
</text>
<grid-container class="style7" style="background-color: orange;">
<grid-row class="flex-item color-primary">
</grid-row>
<grid-row class="flex-item color-warning">
</grid-row>
<grid-row class="flex-item color-success">
</grid-row>
</grid-container>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="ani-container">
<text class="title">
动画样式
</text>
<text class="sub-title">
container动画样式1
</text>
<grid-container class="ani1" >
<grid-row class="row-style">
</grid-row>
</grid-container>
<text class="sub-title">
container动画样式2
</text>
<grid-container class="ani2" >
<grid-row class="row-style">
</grid-row>
</grid-container>
</div>
</div>
<div style="background-color: #000000; width: 2px; height: 100%;">
</div>
<div class="sub-container">
<div class="prop-container">
<text class="title">
通用属性
</text>
<text class="sub-title">
container通用属性1
</text>
<grid-container id="prop1" class="prop1"
disabled = "true" focusable ="true"
data-name ="prop1" click-effect="spring-medium"
dir ="rtl">
<grid-row class="row-style">
</grid-row>
</grid-container>
<text class="sub-title">
container通用属性2
</text>
<grid-container class="prop2" ref ="prop2"
disabled = "false" focusable ="false"
data-name ="prop2" click-effect="spring-large"
dir ="ltr">
<grid-row class="row-style">
</grid-row>
</grid-container>
<text class="sub-title">
container通用属性3
</text>
<grid-container style="background-color: #679855; margin: 5px;" class="prop3">
<grid-row class="row-style">
</grid-row>
</grid-container>
<text class="sub-title">
container特有属性4
</text>
<grid-container class="prop4" vertical="false"
columns="xs" sizetype="xs"
gutter="30px" gridtemplate="default">
</grid-container>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="event-container" >
<text class="title">
通用事件
</text>
<text class="sub-title">
container通用事件1
</text>
<grid-container class ="event1" ontouchstart="touchStart" ontouchmove="touchMove"
ontouchend="touchEnd" ontouchcancel="touchCancel">
</grid-container>
<text class="sub-title">
container通用事件2
</text>
<grid-container class ="event2" onclick="click" ondoubleclick="doubleClick"
onlongpress="longPress" onfocus="focus" onblur="blur" onkey="key"
onswipe="swipe" onattached="attached" ondetached="detached">
</grid-container>
<text class="sub-title">
container通用事件3
</text>
<grid-container class ="event3" onpinchstart="pinchStart" onpinchupdate="pinchUpdate"
onpinchend="pinchEnd" onpinchcancel="pinchCancel"
ondragstart="dragStart" ondrag="drag"
ondragend="dragEnd" ondragenter="dragEnter"
ondragover="dragOver" ondragleave="dragLeave"
ondrop="drop">
</grid-container>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="function-container">
<text class="title">
通用方法
</text>
<text class="sub-title">
div通用方法1
</text>
<div id="function1" class="function1" ontouchstart="functionTest1">
</div>
<text class="sub-title">
div通用方法2
</text>
<grid-container id="function2" class="function2" ontouchstart="functionTest2">
</grid-container>
<text class="sub-title">
div通用方法3
</text>
<grid-container id="function3" class="function3" ontouchstart="functionTest3">
</grid-container>
<text class="sub-title">
div特有方法
</text>
<grid-container id="function4" columns="xs" sizetype="xs"
gutter="30px" gridtemplate="default" class="function4" ontouchstart="functionTest4">
<grid-row class="flex-item color-primary">
</grid-row>
<grid-row class="flex-item color-warning">
</grid-row>
<grid-row class="flex-item color-success">
</grid-row>
</grid-container>
</div>
</div>
<div style="background-color: #000000; width: 2px; height: 100%;">
</div>
<div class="sub-container">
<div class="gradient-container">
<text class="title">
渐变样式
</text>
<text class="sub-title">
div渐变样式1
</text>
<grid-container class="gradient1">
</grid-container>
<text class="sub-title">
div渐变样式2
</text>
<grid-container class="gradient2">
</grid-container>
<text class="sub-title">
div渐变样式3
</text>
<grid-container class="gradient3">
</grid-container>
<text class="sub-title">
div渐变样式4
</text>
<grid-container class="gradient4">
</grid-container>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="accessibility-container">
<text class="title">
无障碍
</text>
<text class="sub-title">
div无障碍1
</text>
<grid-container class="accessibility1" accessibilitygroup ="true"
accessibilitytext="这是div"
accessibilitydescription="点击此按键会弹出一个对话框"
accessibilityimportance="no-hide-descendants">
</grid-container>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="atom-container">
<text class="title">
原子布局
</text>
<text class="sub-title">
div原子布局1
</text>
<div style="flex-direction: row;height: 20px;width: 100%;">
<grid-container vertical="true" style="width:20px;height:30px;padding: 0;margin: 0%; background-color: blue;display-index: 1;">
</grid-container>
<grid-container vertical="true" style="width:30px;padding: 0;margin: 0%;background-color: black;display-index: 5;">
</grid-container>
<grid-container vertical="true" style="width:40px;padding: 0;margin: 0%; background-color: yellow;display-index: 4;">
</grid-container>
<grid-container vertical="true" style="width:10px;padding: 0;margin: 0%;background-color: red;display-index: 3;">
</grid-container>
<grid-container vertical="true" style="width:25px;padding: 0;margin: 0%;background-color:pink;display-index: 7;">
</grid-container>
<grid-container vertical="true" style="width:15px;padding: 0;margin: 0%;background-color: palegoldenrod;display-index: 2;">
</grid-container>
</div>
<text class="sub-title">
div原子布局2
</text>
<div style="flex-direction: row;height: 20px;width: 100%;">
<grid-container style="padding: 0;margin: 0%;background-color: blue;flex-weight: 1;">
</grid-container>
<grid-container style="padding: 0;margin: 0%;background-color: black;flex-weight: 5;">
</grid-container>
<grid-container style="padding: 0;margin: 0%;background-color: yellow;flex-weight: 4;">
</grid-container>
<grid-container style="padding: 0;margin: 0%;background-color: red;flex-weight: 3;">
</grid-container>
<grid-container style="padding: 0;margin: 0%;background-color:pink;flex-weight: 7;">
</grid-container>
<grid-container style="padding: 0;margin: 0%;background-color: palegoldenrod;flex-weight: 2;">
</grid-container>
</div>
<text class="sub-title">
div原子布局3
</text>
<div style="flex-direction: row;height:60px;width: 100%;">
<grid-container vertical="true" style="padding: 0;margin: 0%;width:30px;background-color: blue;aspect-ratio: 0.6;">
</grid-container>
<grid-container vertical="true" style="padding: 0;margin: 0%;width:30px;background-color: black;aspect-ratio:0.5;">
</grid-container>
<grid-container vertical="true" style="padding: 0;margin: 0%;width:30px;background-color: yellow;aspect-ratio: 1.5;">
</grid-container>
<grid-container vertical="true" style="padding: 0;margin: 0%;width:30px;background-color: red;aspect-ratio: 1.3;">
</grid-container>
<grid-container vertical="true" style="padding: 0;margin: 0%;width:30px;background-color:pink;aspect-ratio: 1;">
</grid-container>
<grid-container vertical="true" style="padding: 0;margin: 0%;width:30px;background-color: palegoldenrod;aspect-ratio:2;">
</grid-container>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="multiMode-container">
<text class="title">
多模输入
</text>
<text class="sub-title">
div多模输入1
</text>
<grid-container class="multimode1" voicelabel = "voice"
subscriptflag="on" subscriptlabel="divider" scenelabel="common">
</grid-container>
</div>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/gridContainer/index.js 0 → 100644
浏览文件 @ 5bd1ab66
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'
});
}
}
ace/ace_standard/src/main/js/default/pages/gridRow/index.css 0 → 100644
浏览文件 @ 5bd1ab66
/**
* 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
ace/ace_standard/src/main/js/default/pages/gridRow/index.hml 0 → 100644
浏览文件 @ 5bd1ab66
<!--/**
* 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.
*/-->
<div class="container">
<div class="sub-container">
<div class="style-container">
<text class="title">
通用样式
</text>
<text class="sub-title">
div通用样式1
</text>
<grid-container class="container-style">
<grid-row class="style1" >
</grid-row>
</grid-container>
<text class="sub-title">
div通用样式2
</text>
<grid-container class="container-style">
<grid-row class="style2" >
</grid-row>
</grid-container>
<text class="sub-title">
div通用样式3
</text>
<grid-container class="container-style">
<grid-row class="style3" >
</grid-row>
</grid-container>
<text class="sub-title">
div通用样式4
</text>
<grid-container class="container-style">
<grid-row class="style4" >
</grid-row>
</grid-container>
<text class="sub-title">
div通用样式5
</text>
<grid-container class="contain1">
<grid-row class="style5" >
</grid-row>
<grid-row class="style6" >
</grid-row>
</grid-container>
<text class="sub-title">
div特有样式
</text>
<grid-container class="style7">
<grid-row class="flex-item color-primary">
</grid-row>
<grid-row class="flex-item color-warning">
</grid-row>
<grid-row class="flex-item color-success">
</grid-row>
</grid-container>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="ani-container">
<text class="title">
动画样式
</text>
<text class="sub-title">
div动画样式1
</text>
<grid-container class="container-style">
<grid-row class="ani1" >
</grid-row>
</grid-container>
<text class="sub-title">
div动画样式2
</text>
<grid-container class="container-style">
<grid-row class="ani2" >
</grid-row>
</grid-container>
</div>
</div>
<div style="background-color: #000000; width: 2px; height: 100%;">
</div>
<div class="sub-container">
<div class="prop-container">
<text class="title">
通用属性
</text>
<text class="sub-title">
div通用属性1
</text>
<grid-container class="container-style">
<grid-row id="prop1" class="prop1"
disabled = "true" focusable ="true"
data-name ="prop1" click-effect="spring-medium"
dir ="rtl">
</grid-row>
</grid-container>
<text class="sub-title">
div通用属性2
</text>
<grid-container class="container-style">
<grid-row class="prop2" ref ="prop2"
disabled = "false" focusable ="false"
data-name ="prop2" click-effect="spring-large"
dir ="ltr">
</grid-row>
</grid-container>
<text class="sub-title">
div通用属性3
</text>
<grid-container class="container-style">
<grid-row style="color: #679855; margin: 5px;" class="prop3">
</grid-row>
</grid-container>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="event-container" >
<text class="title">
通用事件
</text>
<text class="sub-title">
div通用事件1
</text>
<grid-container class="container-style">
<grid-row class ="event1" ontouchstart="touchStart" ontouchmove="touchMove"
ontouchend="touchEnd" ontouchcancel="touchCancel">
</grid-row>
</grid-container>
<text class="sub-title">
div通用事件2
</text>
<grid-container class="container-style">
<grid-row class ="event2" onclick="click" ondoubleclick="doubleClick"
onlongpress="longPress" onfocus="focus" onblur="blur" onkey="key"
onswipe="swipe" onattached="attached" ondetached="detached">
</grid-row>
</grid-container>
<text class="sub-title">
div通用事件3
</text>
<grid-container class="container-style">
<grid-row class ="event3" onpinchstart="pinchStart" onpinchupdate="pinchUpdate"
onpinchend="pinchEnd" onpinchcancel="pinchCancel"
ondragstart="dragStart" ondrag="drag"
ondragend="dragEnd" ondragenter="dragEnter"
ondragover="dragOver" ondragleave="dragLeave"
ondrop="drop">
</grid-row>
</grid-container>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="function-container">
<text class="title">
通用方法
</text>
<text class="sub-title">
div通用方法1
</text>
<div id="function1" class="function1" ontouchstart="functionTest1">
</div>
<text class="sub-title">
div通用方法2
</text>
<grid-row id="function2" class="function2" ontouchstart="functionTest2">
</grid-row>
<text class="sub-title">
div通用方法3
</text>
<grid-row id="function3" class="function3" ontouchstart="functionTest3">
</grid-row>
</div>
</div>
<div style="background-color: #000000; width: 2px; height: 100%;">
</div>
<div class="sub-container">
<div class="gradient-container">
<text class="title">
渐变样式
</text>
<text class="sub-title">
div渐变样式1
</text>
<grid-row class="gradient1">
</grid-row>
<text class="sub-title">
div渐变样式2
</text>
<grid-row class="gradient2">
</grid-row>
<text class="sub-title">
div渐变样式3
</text>
<grid-row class="gradient3">
</grid-row>
<text class="sub-title">
div渐变样式4
</text>
<grid-row class="gradient4">
</grid-row>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="accessibility-container">
<text class="title">
无障碍
</text>
<text class="sub-title">
div无障碍1
</text>
<grid-row class="accessibility1" accessibilitygroup ="true"
accessibilitytext="这是div"
accessibilitydescription="点击此按键会弹出一个对话框"
accessibilityimportance="no-hide-descendants">
</grid-row>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="atom-container">
<text class="title">
原子布局
</text>
<text class="sub-title">
div原子布局1
</text>
<div style="flex-direction: row;height: 30px;width: 100%;">
<grid-row style="width:20px;height:20px;background-color: blue;display-index: 1;">
</grid-row>
<grid-row style="width:30px; height:20px;background-color: black;display-index: 5;">
</grid-row>
<grid-row style="width:40px; height:20px;background-color: yellow;display-index: 4;">
</grid-row>
<grid-row style="width:10px; height:20px;background-color: red;display-index: 3;">
</grid-row>
<grid-row style="width:25px; height:20px;background-color:pink;display-index: 7;">
</grid-row>
<grid-row style="width:15px; height:20px;background-color: palegoldenrod;display-index: 2;">
</grid-row>
</div>
<text class="sub-title">
div原子布局2
</text>
<div style="flex-direction: row;height: 30px;width: 100%;">
<grid-row style="height:20px;background-color: blue;flex-weight: 1;">
</grid-row>
<grid-row style="height:20px;background-color: black;flex-weight: 5;">
</grid-row>
<grid-row style="height:20px;background-color: yellow;flex-weight: 4;">
</grid-row>
<grid-row style="height:20px;background-color: red;flex-weight: 3;">
</grid-row>
<grid-row style="height:20px;background-color:pink;flex-weight: 7;">
</grid-row>
<grid-row style="height:20px;background-color: palegoldenrod;flex-weight: 2;">
</grid-row>
</div>
<text class="sub-title">
div原子布局3
</text>
<div style="flex-direction: row;height:60px;width: 100%;">
<grid-row style="width:30px;background-color: blue;aspect-ratio: 0.6;">
</grid-row>
<grid-row style="width:30px;background-color: black;aspect-ratio:0.5;">
</grid-row>
<grid-row style="width:30px;background-color: yellow;aspect-ratio: 1.5;">
</grid-row>
<grid-row style="width:30px;background-color: red;aspect-ratio: 1.3;">
</grid-row>
<grid-row style="width:30px;background-color:pink;aspect-ratio: 1;">
</grid-row>
<grid-row style="width:30px;background-color: palegoldenrod;aspect-ratio:2;">
</grid-row>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="multiMode-container">
<text class="title">
多模输入
</text>
<text class="sub-title">
div多模输入1
</text>
<grid-row class="multiMode1" voicelabel = "voice"
subscriptflag="on" subscriptlabel="div" scenelabel="common">
</grid-row>
</div>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/gridRow/index.js 0 → 100644
浏览文件 @ 5bd1ab66
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'
});
}
}
ace/ace_standard/src/main/js/default/pages/line/index.css 0 → 100644
浏览文件 @ 5bd1ab66
/**
* 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
ace/ace_standard/src/main/js/default/pages/line/index.hml 0 → 100644
浏览文件 @ 5bd1ab66
<div class="container">
<div class="style-container">
<text class="title">
通用样式
</text>
<text class="sub-title">
line通用样式1
</text>
<svg height="80">
<line class="style1" id="style1" x1="0" x2="70" y1="10" y2="10" stroke="green" stroke-width="4" ></line>
</svg>
<text class="sub-title">
line通用样式2
</text>
<svg height="20">
<line class="style2" id="style2" x1="0" x2="70" y1="10" y2="10" stroke="green" stroke-width="4" ></line>
</svg>
<text class="sub-title">
line通用样式3
</text>
<svg height="80">
<line class="style3" id="style3" x1="0" x2="70" y1="30" y2="30" stroke="blue" stroke-width="4" ></line>
</svg>
<text class="sub-title">
line通用样式4
</text>
<svg height="80">
<line class="style4" id="style4" x1="0" x2="70" y1="30" y2="30" stroke="blue" stroke-width="4" ></line>
</svg>
<text class="sub-title">
line通用样式5
</text>
<div class="contain1">
<svg >
<line class="style5" id="style4" x1="0" x2="70" y1="30" y2="30" stroke="blue" stroke-width="4" ></line>
</svg>
<svg >
<line class="style6" id="style4" x1="5" x2="70" y1="30" y2="30" stroke="blue" stroke-width="4" ></line>
</svg>
</div>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="true">
</divider>
<div class="sub-container">
<div class="prop-container">
<text class="title">
通用属性
</text>
<text class="sub-title">
line通用属性1
</text>
<svg width="200" height="50">
<line class="prop1" id="prop1" data-name ="prop1" x1="10" x2="80" y1="20" y2="20"
stroke="green" stroke-width="4" ></line>
</svg>
<text class="sub-title">
line通用属性2
</text>
<svg width="200" height="50">
<line class="prop2" ref="prop2" data-name ="prop2" x1="10" x2="80" y1="20" y2="20"
stroke="white" stroke-width="4" opacity="0.5"></line>
</svg>
<text class="sub-title">
line通用属性3
</text>
<svg width="200" height="50">
<line class="prop3" id="prop3" x1="10" x2="80" y1="20" y2="20" stroke="red"
stroke-width="4" stroke-dasharray="5 3" stroke-dashoffset="3"></line>
</svg>
<text class="sub-title">
line通用属性4
</text>
<svg width="200" height="50">
<line class="prop4" id="prop4" x1="10" x2="80" y1="20" y2="20" stroke="black"
stroke-width="4" stroke-linecap="round"></line>
</svg>
<text class="sub-title">
line通用属性5
</text>
<svg width="200" height="50">
<line class="prop5" id="prop5" x1="10" x2="80" y1="20" y2="20" stroke="black"
stroke-width="4" stroke-linecap="butt"></line>
</svg>
<text class="sub-title">
line通用属性6
</text>
<svg width="200" height="50">
<line class="prop6" id="prop6" x1="10" x2="80" y1="20" y2="20" stroke="black"
stroke-width="4" stroke-linecap="square"></line>
</svg>
<text class="sub-title">
line通用属性7
</text>
<svg width="200" height="50">
<line class="prop7" id="prop7" x1="10" x2="80" y1="20" y2="20" stroke="blue" stroke-width="4" transform="rotate(-5)"></line>
</svg>
<text class="sub-title">
line通用属性8
</text>
<svg width="200" height="50">
<line class="prop8" id="prop8" x1="10" x2="80" y1="20" y2="20" stroke="yellow" stroke-width="4" transform="skewX(20)"></line>
</svg>
<text class="sub-title">
line通用属性9
</text>
<svg width="200" height="50">
<line class="prop9" id="prop9" x1="10" x2="80" y1="10" y2="10" stroke="blue" stroke-width="4" transform="skewY(10)"></line>
</svg>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="ani-container">
<text class="title">
动画样式
</text>
<text class="sub-title">
line动画样式1
</text>
<svg class="ani1" width="100" height="100">
<line id="prop1" data-name ="prop1" x1="10" x2="80" y1="20" y2="20" stroke="blue" stroke-width="4" ></line>
</svg>
<text class="sub-title">
path动画样式2
</text>
<svg class="ani2" width="100" height="100">
<line id="prop1" data-name ="prop1" x1="10" x2="80" y1="20" y2="20" stroke="green" stroke-width="4" ></line>
</svg>
</div>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="true">
</divider>
<div class="sub-container">
<div class="gradient-container">
<text class="title">
渐变样式
</text>
<text class="sub-title">
line渐变样式1
</text>
<svg width="200" height="80">
<line class="gradient1" x1="10" x2="100" y1="40" y2="40" stroke="green" stroke-width="4" ></line>
</svg>
<text class="sub-title">
line渐变样式2
</text>
<svg width="200" height="80">
<line class="gradient2" x1="10" x2="100" y1="40" y2="40" stroke="blue" stroke-width="4" ></line>
</svg>
<text class="sub-title">
line渐变样式3
</text>
<svg width="200" height="80">
<line class="gradient3" x1="10" x2="100" y1="40" y2="40" stroke="yellow" stroke-width="4" ></line>
</svg>
<text class="sub-title">
line渐变样式4
</text>
<svg width="200" height="80">
<line class="gradient4" x1="10" x2="100" y1="40" y2="40" stroke="green" stroke-width="4" ></line>
</svg>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="access-container">
<text class="title">
无障碍
</text>
<text class="sub-title">
line无障碍1
</text>
<svg
width="200" height="80">
<line class="access1" accessibilitygroup ="true"
accessibilitytext="这是line"
accessibilitydescription="点击此按键会弹出一个对话框"
ccessibilityimportance="no-hide-descendants"
x1="10" x2="80" y1="20" y2="20" stroke="red" stroke-width="4" ></line>
</svg>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="multimode-container">
<text class="title">
多模输入
</text>
<text class="sub-title">
line多模输入1
</text>
<svg >
<line class="multimode1" width="200" height="100" voicelabel = "voice"
subscriptflag="on" subscriptlabel="line" scenelabel="common"
x1="10" x2="80" y1="20" y2="20" stroke="#978666" stroke-width="4" ></line>
</svg>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/line/index.js 0 → 100644
浏览文件 @ 5bd1ab66
/**
* 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
ace/ace_standard/src/main/js/default/pages/obj_CanvasGradient/index.css 0 → 100644
浏览文件 @ 5bd1ab66
/**
* 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%;
}
ace/ace_standard/src/main/js/default/pages/obj_CanvasGradient/index.hml 0 → 100644
浏览文件 @ 5bd1ab66
<!--/**
* 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.
*/-->
<div class="container">
<div class="sub-container">
<div class="prop-container">
<text class="title">
CanvasGradient对象的方法
</text>
<text class="sub-title">
方法1
</text>
<canvas ref="canvas" style="width: 100%; height: 200px; background-color: #ffff00;"></canvas>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/obj_CanvasGradient/index.js 0 → 100644
浏览文件 @ 5bd1ab66
/**
* 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
ace/ace_standard/src/main/js/default/pages/obj_CanvasRenderingContext2D/index.css 0 → 100644
浏览文件 @ 5bd1ab66
/**
* 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%;
}
ace/ace_standard/src/main/js/default/pages/obj_CanvasRenderingContext2D/index.hml 0 → 100644
浏览文件 @ 5bd1ab66
<!--/**
* 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.
*/-->
<div class="container">
<div class="sub-container">
<div class="prop-container">
<text class="title">
对象的属性
</text>
<text class="sub-title">
属性1
</text>
<canvas ref="canvas1" style="width: 100%; height: 30px;margin-top: 5px; ">
</canvas>
<text class="sub-title">
属性2
</text>
<canvas ref="canvas2" style="width: 100%; height: 30px;margin-top: 5px; ">
</canvas>
<text class="sub-title">
属性3
</text>
<canvas ref="canvas3" style="width: 100%; height: 20px;margin-top: 5px;">
</canvas>
<text class="sub-title">
属性4
</text>
<canvas ref="canvas4" style="width: 100%; height: 50px;margin-top: 5px;">
</canvas>
<text class="sub-title">
属性5
</text>
<canvas ref="canvas5" style="width: 100%; height: 40px;margin-top: 5px;">
</canvas>
<text class="sub-title">
属性6
</text>
<canvas ref="canvas6" style="width: 100%; height: 30px;margin-top: 5px;">
</canvas>
<text class="sub-title">
属性7
</text>
<canvas ref="canvas7" style="width: 100%; height: 80px;margin-top: 5px;">
</canvas>
<text class="sub-title">
属性8
</text>
<canvas ref="canvas8" style="width: 100%; height: 80px; background-color: #ffff00;margin-top: 5px;">
</canvas>
<text class="sub-title">
属性9
</text>
<canvas ref="canvas9" style="width: 100%; height: 70px;margin-top: 5px;">
</canvas>
</div>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="true">
</divider>
<div class="sub-container">
<div class="prop-container">
<text class="sub-title">
属性10
</text>
<canvas ref="canvas10" style="width: 100%; height: 90px;margin-top: 5px;">
</canvas>
<text class="sub-title">
属性11
</text>
<canvas ref="canvas11" style="width: 100%; height: 80px;margin-top: 5px;">
</canvas>
<text class="sub-title">
属性12
</text>
<canvas ref="canvas12" style="width: 100%; height: 40px;margin-bottom: 10px;margin-top: 5px;">
</canvas>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<text class="title">
对象的方法
</text>
<text class="sub-title">
方法1
</text>
<canvas style="width: 100%; height: 50px;margin-top: 5px;" ref="function1">
</canvas>
<text class="sub-title">
方法2
</text>
<canvas style="width: 100%; height: 30px;margin-top: 5px;" ref="function2">
</canvas>
<text class="sub-title">
方法3
</text>
<canvas style="width: 100%; height: 40px;margin-top: 5px;" ref="function3">
</canvas>
<text class="sub-title">
方法4
</text>
<canvas style="width: 100%; height: 70px;margin-top: 5px;" ref="function4"></canvas>
<text class="sub-title">
方法5
</text>
<canvas style="width: 100%; height: 50px;margin-top: 5px;" ref="function5"></canvas>
</div>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="true">
</divider>
<div class="sub-container">
<div class="function-container">
<text class="sub-title">
方法6
</text>
<canvas style="width: 100%; height: 40px;margin-top: 5px;" ref="function6"></canvas>
<text class="sub-title">
方法7
</text>
<canvas style="width: 100%; height: 40px;margin-top: 5px;" ref="function7"></canvas>
<text class="sub-title">
方法8
</text>
<canvas style="width: 100%; height: 50px;margin-top: 5px;" ref="function8"></canvas>
<text class="sub-title">
方法9
</text>
<canvas style="width: 100%; height: 100px;background-color: #ffff00;margin-top: 5px;" ref="function9"></canvas>
<text class="sub-title">
方法10
</text>
<canvas style="width: 100%; height: 60px;margin-top: 5px;" ref="function10"></canvas>
<text class="sub-title">
方法11
</text>
<canvas style="width: 100%; height: 70px;margin-top: 5px;" ref="function11"></canvas>
<text class="sub-title">
方法12
</text>
<canvas style="width: 100%; height: 60px;margin-top: 5px;" ref="function12"></canvas>
<text class="sub-title">
方法13
</text>
<canvas style="width: 100%; height: 60px;margin-top: 5px;" ref="function13"></canvas>
<text class="sub-title">
方法14
</text>
<canvas style="width: 100%; height: 60px;margin-top: 5px;" ref="function14"></canvas>
<text class="sub-title">
方法15
</text>
<canvas style="width: 100%; height: 60px;margin-top: 5px;" ref="function15"></canvas>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/obj_CanvasRenderingContext2D/index.js 0 → 100644
浏览文件 @ 5bd1ab66
/**
* 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
ace/ace_standard/src/main/js/default/pages/obj_Image/index.css 0 → 100644
浏览文件 @ 5bd1ab66
/**
* 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%;
}
ace/ace_standard/src/main/js/default/pages/obj_Image/index.hml 0 → 100644
浏览文件 @ 5bd1ab66
<!--/**
* 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.
*/-->
<div class="container">
<div class="sub-container">
<div class="prop-container">
<text class="title">
Image对象的属性
</text>
<text class="sub-title">
属性1
</text>
<canvas ref="canvas1" style="width: 100%; height: 300px; ">
</canvas>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/obj_Image/index.js 0 → 100644
浏览文件 @ 5bd1ab66
/**
* 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
ace/ace_standard/src/main/js/default/pages/obj_ImageBitmap/index.css 0 → 100644
浏览文件 @ 5bd1ab66
/**
* 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%;
}
ace/ace_standard/src/main/js/default/pages/obj_ImageBitmap/index.hml 0 → 100644
浏览文件 @ 5bd1ab66
<!--/**
* 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.
*/-->
<div class="container">
<div class="sub-container">
<div class="prop-container">
<text class="title">
ImageBitmap对象的属性
</text>
<text class="sub-title">
属性1
</text>
<canvas ref="canvas1" style="width: 100%; height: 300px;background-color: #ffff00; ">
</canvas>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/obj_ImageBitmap/index.js 0 → 100644
浏览文件 @ 5bd1ab66
/**
* 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
ace/ace_standard/src/main/js/default/pages/obj_ImageData/index.css 0 → 100644
浏览文件 @ 5bd1ab66
/**
* 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%;
}
ace/ace_standard/src/main/js/default/pages/obj_ImageData/index.hml 0 → 100644
浏览文件 @ 5bd1ab66
<!--/**
* 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.
*/-->
<div class="container">
<div class="sub-container">
<div class="prop-container">
<text class="title">
ImageData对象的属性
</text>
<text class="sub-title">
属性1
</text>
<canvas ref="canvas1" style="width: 100%; height: 300px; background-color: #ffff00;">
</canvas>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/obj_ImageData/index.js 0 → 100644
浏览文件 @ 5bd1ab66
/**
* 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
ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/index.css 0 → 100644
浏览文件 @ 5bd1ab66
/**
* 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%;
}
ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/index.hml 0 → 100644
浏览文件 @ 5bd1ab66
<!--/**
* 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.
*/-->
<div class="container">
<div class="sub-container">
<div class="prop-container">
<text class="title">
OffscreenCanvas对象的属性
</text>
<text class="sub-title">
属性1
</text>
<canvas ref="canvas1" style="width: 100%; height: 300px; ">
</canvas>
</div>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="true">
</divider>
<div class="sub-container">
<div class="function-container">
<text class="title">
OffscreenCanvas对象的方法
</text>
<text class="sub-title">
方法1
</text>
<canvas style="width: 100%; height: 300px;" ref="function1"></canvas>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/index.js 0 → 100644
浏览文件 @ 5bd1ab66
/**
* 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
ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/index.css 0 → 100644
浏览文件 @ 5bd1ab66
/**
* 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%;
}
ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/index.hml 0 → 100644
浏览文件 @ 5bd1ab66
<!--/**
* 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.
*/-->
<div class="container">
<div class="sub-container">
<div class="prop-container">
<text class="title">
对象的属性
</text>
<text class="sub-title">
属性1
</text>
<canvas ref="canvas1" style="width: 100%; height: 30px;margin-top: 5px; ">
</canvas>
<text class="sub-title">
属性2
</text>
<canvas ref="canvas2" style="width: 100%; height: 30px;margin-top: 5px; ">
</canvas>
<text class="sub-title">
属性3
</text>
<canvas ref="canvas3" style="width: 100%; height: 20px;margin-top: 5px;">
</canvas>
<text class="sub-title">
属性4
</text>
<canvas ref="canvas4" style="width: 100%; height: 50px;margin-top: 5px;">
</canvas>
<text class="sub-title">
属性5
</text>
<canvas ref="canvas5" style="width: 100%; height: 40px;margin-top: 5px;">
</canvas>
<text class="sub-title">
属性6
</text>
<canvas ref="canvas6" style="width: 100%; height: 30px;margin-top: 5px;">
</canvas>
<text class="sub-title">
属性7
</text>
<canvas ref="canvas7" style="width: 100%; height: 80px;margin-top: 5px;">
</canvas>
<text class="sub-title">
属性8
</text>
<canvas ref="canvas8" style="width: 100%; height: 80px; background-color: #ffff00;margin-top: 5px;">
</canvas>
<text class="sub-title">
属性9
</text>
<canvas ref="canvas9" style="width: 100%; height: 70px;margin-top: 5px;">
</canvas>
</div>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="true">
</divider>
<div class="sub-container">
<div class="prop-container">
<text class="sub-title">
属性10
</text>
<canvas ref="canvas10" style="width: 100%; height: 90px;margin-top: 5px;">
</canvas>
<text class="sub-title">
属性11
</text>
<canvas ref="canvas11" style="width: 100%; height: 80px;margin-top: 5px;">
</canvas>
<text class="sub-title">
属性12
</text>
<canvas ref="canvas12" style="width: 100%; height: 150px;margin-top: 5px;">
</canvas>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<text class="title">
对象的方法
</text>
<text class="sub-title">
方法1
</text>
<canvas style="width: 100%; height: 40px;margin-top: 5px;" ref="function1">
</canvas>
<text class="sub-title">
方法2
</text>
<canvas style="width: 100%; height: 30px;margin-top: 5px;" ref="function2">
</canvas>
<text class="sub-title">
方法3
</text>
<canvas style="width: 100%; height: 40px;margin-top: 5px;" ref="function3">
</canvas>
<text class="sub-title">
方法4
</text>
<canvas style="width: 100%; height: 70px;margin-top: 5px;" ref="function4"></canvas>
<text class="sub-title">
方法5
</text>
<canvas style="width: 100%; height: 50px;margin-top: 5px;" ref="function5"></canvas>
</div>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="true">
</divider>
<div class="sub-container">
<div class="function-container">
<text class="sub-title">
方法6
</text>
<canvas style="width: 100%; height: 40px;margin-top: 5px;" ref="function6"></canvas>
<text class="sub-title">
方法7
</text>
<canvas style="width: 100%; height: 40px;margin-top: 5px;" ref="function7"></canvas>
<text class="sub-title">
方法8
</text>
<canvas style="width: 100%; height: 50px;margin-top: 5px;" ref="function8"></canvas>
<text class="sub-title">
方法9
</text>
<canvas style="width: 100%; height: 100px;background-color: #ffff00;margin-top: 5px;" ref="function9"></canvas>
<text class="sub-title">
方法10
</text>
<canvas style="width: 100%; height: 60px;margin-top: 5px;" ref="function10"></canvas>
<text class="sub-title">
方法11
</text>
<canvas style="width: 100%; height: 70px;margin-top: 5px;" ref="function11"></canvas>
<text class="sub-title">
方法12
</text>
<canvas style="width: 100%; height: 50px;margin-top: 5px;" ref="function12"></canvas>
<text class="sub-title">
方法13
</text>
<canvas style="width: 100%; height: 50px;background-color: #ffff00;margin-top: 5px;" ref="function13"></canvas>
<text class="sub-title">
方法14
</text>
<canvas style="width: 100%; height: 50px;background-color: #ffff00;margin-top: 5px;" ref="function14"></canvas>
<text class="sub-title">
方法15
</text>
<canvas style="width: 100%; height: 50px;background-color: #ffff00;margin-top: 5px;" ref="function15"></canvas>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/index.js 0 → 100644
浏览文件 @ 5bd1ab66
/**
* 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
ace/ace_standard/src/main/js/default/pages/obj_Path2D/index.css 0 → 100644
浏览文件 @ 5bd1ab66
/**
* 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%;
}
ace/ace_standard/src/main/js/default/pages/obj_Path2D/index.hml 0 → 100644
浏览文件 @ 5bd1ab66
<!--/**
* 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.
*/-->
<div class="container">
<div class="sub-container">
<div class="prop-container">
<text class="title">
Path2D对象的方法
</text>
<text class="sub-title">
方法1
</text>
<canvas style="width: 100%; height: 110px;background-color: #ffff00;" ref="function1">
</canvas>
<text class="sub-title">
方法2
</text>
<canvas style="width: 100%; height: 80px;background-color: #ffff00;" ref="function2">
</canvas>
<text class="sub-title">
方法3
</text>
<canvas style="width: 100%; height: 100px;background-color: #ffff00;" ref="function3">
</canvas>
<text class="sub-title">
方法4
</text>
<canvas style="width: 100%; height: 60px;background-color: #ffff00;" ref="function4"></canvas>
<text class="sub-title">
方法5
</text>
<canvas style="width: 100%; height: 60px;background-color: #ffff00;" ref="function5"></canvas>
</div>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="true">
</divider>
<div class="sub-container">
<div class="function-container">
<text class="sub-title">
方法6
</text>
<canvas style="width: 100%; height: 100px;background-color: #ffff00;" ref="function6"></canvas>
<text class="sub-title">
方法7
</text>
<canvas style="width: 100%; height: 60px;background-color: #ffff00;" ref="function7"></canvas>
<text class="sub-title">
方法8
</text>
<canvas style="width: 100%; height: 110px;background-color: #ffff00;" ref="function8"></canvas>
<text class="sub-title">
方法9
</text>
<canvas style="width: 100%; height: 110px;background-color: #ffff00;" ref="function9"></canvas>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/obj_Path2D/index.js 0 → 100644
浏览文件 @ 5bd1ab66
/**
* 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
ace/ace_standard/src/main/js/default/pages/path/index.css 0 → 100644
浏览文件 @ 5bd1ab66
/**
* 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
ace/ace_standard/src/main/js/default/pages/path/index.hml 0 → 100644
浏览文件 @ 5bd1ab66
<div class="container">
<div class="prop-container">
<text class="title">
通用属性
</text>
<text class="sub-title">
path通用属性1
</text>
<svg width="200" height="120">
<path id="prop1" data-name ="prop1" d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z"
stroke="blue" stroke-width="3" fill="red" fill-opacity="0.5">
</path>
</svg>
<text class="sub-title">
path通用属性2
</text>
<svg width="200" height="120">
<path ref ="prop2" data-name ="prop2" d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z"
stroke="red" stroke-width="3" fill="white" stroke-dasharray="10 5" stroke-dashoffset="3">
</path>
</svg>
<text class="sub-title">
path通用属性3
</text>
<!-- <svg width="200" height="200">-->
<!-- <path d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z"-->
<!-- stroke="red" stroke-width="3" fill="white" stroke-dasharray="10 5" stroke-dashoffset="3" transform="skewY(-10)">-->
<!-- </path>-->
<!-- <path d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z"-->
<!-- stroke="red" stroke-width="3" fill="white" stroke-dasharray="10 5" stroke-dashoffset="3" transform="rotate(-10)">-->
<!-- </path>-->
<!-- </svg>-->
<svg fill="white" width="200" height="200">
<path fill="none" stroke="blue" stroke-width="3" d="m10,60 c0,-100 100,100 100,0 c0,-100 -100,100 -100,0 z"></path>
<path fill="none" stroke="blue" stroke-width="3" d="m10,130 c0,-100 100,100 100,0 c0,-100 -100,100 -100,0 z"></path>
<!-- <path fill="none" stroke="blue" stroke-width="3" d="m10,200 c0,-100 100,100 100,0 c0,-100 -100,100 -100,0 z"></path>-->
</svg>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<text class="sub-title">
path动画属性
</text>
<svg fill="white" width="200" height="200">
<path fill="none" stroke="green" stroke-width="3" d="m10,60 c0,-100 100,100 100,0 c0,-100 -100,100 -100,0 z"></path>
<path fill="none" stroke="green" stroke-width="3" d="m10,130 c0,-100 100,100 100,0 c0,-100 -100,100 -100,0 z"></path>
<path fill="red" d="M-5,-5 L10,0 L-5,5 L0,0 Z">
<animateMotion dur="2000" repeatCount="indefinite" rotate="auto-reverse"path="m10,60 c0,-100 100,100 100,0 c0,-100 -100,100 -100,0 z">
</animateMotion>
</path>
<path fill="red" d="M-5,-5 L10,0 L-5,5 L0,0 Z">
<animateMotion dur="2000" repeatCount="indefinite" rotate="45"path="m10,130 c0,-100 100,100 100,0 c0,-100 -100,100 -100,0 z"></animateMotion>
</path>
</svg>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="true">
</divider>
<div class="sub-container">
<div class="access-container">
<text class="title">
无障碍
</text>
<text class="sub-title">
path无障碍1
</text>
<svg class="access1" accessibilitygroup ="true"
accessibilitytext="这是path"
accessibilitydescription="点击此按键会弹出一个对话框"
ccessibilityimportance="no-hide-descendants"
width="200" height="100">
<path d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z"
fill="white" fill-opacity="0" stroke-width="3" fill="red" stroke="yellow">
</path>
</svg>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="multimode-container">
<text class="title">
多模输入
</text>
<text class="sub-title">
path多模输入1
</text>
<svg class="multimode1" width="100" height="100" voicelabel = "voice"
subscriptflag="on" subscriptlabel="divider" scenelabel="common">
<path d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z"
stroke="#978666" stroke-width="3" fill="white" fill-opacity="0">
</path>
</svg>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="ani-container">
<text class="title">
动画样式
</text>
<text class="sub-title">
path动画样式1
</text>
<svg class="ani1" width="100" height="100">
<path d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z"
stroke="blue" stroke-width="3" fill="red">
</path>
</svg>
<text class="sub-title">
path动画样式2
</text>
<svg class="ani2" width="100" height="100">
<path d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z"
stroke="blue" stroke-width="3" fill="red">
</path>
</svg>
</div>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="true">
</divider>
<div class="sub-container">
<div class="gradient-container">
<text class="title">
渐变样式
</text>
<text class="sub-title">
path渐变样式1
</text>
<svg class="gradient1" width="200" height="100">
<path d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z"
fill="white" fill-opacity="0" stroke-width="3" fill="red" stroke="block">
</path>
</svg>
<text class="sub-title">
path渐变样式2
</text>
<svg class="gradient2" width="200" height="100">
<path d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z"
fill="white" fill-opacity="0" stroke-width="3" fill="red" stroke="blue">
</path>
</svg>
<text class="sub-title">
path渐变样式3
</text>
<svg class="gradient3" width="200" height="100">
<path d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z"
fill="white" fill-opacity="0" stroke-width="3" fill="red" stroke="yellow">
</path>
</svg>
<text class="sub-title">
path渐变样式4
</text>
<svg class="gradient4" width="200" height="100">
<path d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z"
fill="white" fill-opacity="0" stroke-width="3" fill="red" stroke="red">
</path>
</svg>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/path/index.js 0 → 100644
浏览文件 @ 5bd1ab66
/**
* 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
ace/ace_standard/src/main/js/default/pages/polygon/index.css 0 → 100644
浏览文件 @ 5bd1ab66
/**
* 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
ace/ace_standard/src/main/js/default/pages/polygon/index.hml 0 → 100644
浏览文件 @ 5bd1ab66
<div class="container">
<div class="style-container">
<text class="title">
通用样式
</text>
<text class="sub-title">
polygon通用样式1
</text>
<svg class="style1" x="0" y="0" width="200" height="200" fill="white" fill-opacity="0">
<polygon stroke="blue" stroke-width="2"
points="5,50 20,20 20,50 40,20" stroke-dasharray="10 5" stroke-dashoffset="3"></polygon>
</svg>
<text class="sub-title">
polygon通用样式2
</text>
<svg class="style2" x="0" y="0" width="200" height="50" fill="white" fill-opacity="0">
<polygon fill="white" stroke="blue" stroke-width="2"
points="5,50 20,20 20,50 40,20" stroke-dasharray="10 5" stroke-dashoffset="3"></polygon>
</svg>
<text class="sub-title">
polygon通用样式3
</text>
<svg class="style3" x="0" y="0" width="200" height="50" fill="white" fill-opacity="0">
<polygon fill="white" stroke="red" stroke-width="2"
points="5,50 20,20 20,50 40,20" stroke-dasharray="10 5" stroke-dashoffset="3"></polygon>
</svg>
<text class="sub-title">
polygon通用样式4
</text>
<svg class="style4" x="0" y="0" width="200" height="80" fill="blue" >
<polygon fill="white" stroke="block" stroke-width="2"
points="10,70 50,10 50,65 90,10" stroke-dasharray="10 5" stroke-dashoffset="3"></polygon>
</svg>
<text class="sub-title">
polygon通用样式5
</text>
<div class="contain1">
<svg class="style5" x="0" y="0" width="100" height="200" fill="blue">
<polyline stroke="block" stroke-width="2"
points="10,70 50,10 50,65 90,10" stroke-dasharray="10 5" stroke-dashoffset="3"></polyline>
</svg>
<svg class="style6" x="0" y="0" width="100" height="200" fill="red" >
<polygon stroke="yellow" stroke-width="2"
points="10,70 50,10 50,65 90,10" stroke-dasharray="10 5" stroke-dashoffset="3"></polygon>
</svg>
</div>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="true">
</divider>
<div class="sub-container">
<div class="prop-container">
<text class="title">
通用属性
</text>
<text class="sub-title">
polyline通用属性1
</text>
<svg width="200" height="80">
<polygon id="prop1" data-name ="prop1" points="10,50 10,10 30,50 50,20" fill="red"
stroke="blue" fill-opacity="0.5"></polygon>
</svg>
<text class="sub-title">
polyline通用属性2
</text>
<svg width="200" height="80">
<polygon class="prop2" ref="prop2" data-name ="prop2" points="10,50 10,10 50,50 50,10"
fill="#ad4e2a" stroke="blue" ></polygon>
</svg>
<text class="sub-title">
polyline通用属性3
</text>
<svg width="200" height="80">
<polygon class="prop3" id="prop3" fill="white" stroke="blue" stroke-width="2"
points="10,50 50,10 40,45 80,5" stroke-dasharray="10 5" stroke-dashoffset="3"></polygon>
</svg>
<text class="sub-title">
polyline通用属性4
</text>
<svg width="200" height="80">
<polygon class="prop4" id="prop4"fill="red" stroke="blue" stroke-width="2"
points="10,50 50,10 40,45 80,5" stroke-dasharray="10 5" stroke-dashoffset="3" transform="rotate(-10)"></polygon>
</svg>
<text class="sub-title">
polyline通用属性5
</text>
<svg width="200" height="80">
<polygon class="prop5" id="prop5" fill="red" stroke="blue" stroke-width="2"
points="10,50 50,10 40,45 80,5" stroke-dasharray="10 5" stroke-dashoffset="3" transform="skewX(20)"></polygon>
</svg>
<text class="sub-title">
polyline通用属性6
</text>
<svg width="200" height="80">
<polygon class="prop6" id="prop6" fill="white" stroke="blue" stroke-width="2"
points="10,40 50,5 40,40 80,5" stroke-dasharray="10 5" stroke-dashoffset="3" transform="skewY(10)"></polygon>
</svg>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="ani-container">
<text class="title">
动画样式
</text>
<svg>
<polygon points="60,30 90,90 30,90" fill="red">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 120 140" to="360 360 420" dur="3s" repeatCount="indefinite"></animateTransform>
</polygon>
<polygon points="60,30 90,90 30,90" fill="red">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="360" dur="3s" repeatCount="indefinite"></animateTransform>
</polygon>
<polygon points="60,30 90,90 30,90" fill="green">
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="2" dur="3s" repeatCount="indefinite"></animateTransform>
</polygon>
<polygon points="60,30 90,90 30,90" fill="green">
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1 1" to="2 4" dur="3s" repeatCount="indefinite"></animateTransform>
</polygon>
<polygon points="60,30 90,90 30,90" fill="#D2691E">
<animateTransform attributeName="transform" attributeType="XML" type="skewX" from="10" to="100" dur="3s" repeatCount="indefinite"></animateTransform>
</polygon>
<polygon points="60,30 90,90 30,90" fill="#D2691E">
<animateTransform attributeName="transform" attributeType="XML" type="skewY" from="10" to="100" dur="3s" repeatCount="indefinite"></animateTransform>
</polygon>
<polygon points="60,30 90,90 30,90" fill="#D2691E">
<animateTransform attributeName="transform" attributeType="XML" type="skewX" from="10" to="100" dur="3s" repeatCount="indefinite"></animateTransform>
<animateTransform attributeName="transform" attributeType="XML" type="skewY" from="10" to="100" dur="3s" repeatCount="indefinite"></animateTransform>
</polygon>
<polygon points="60,30 90,90 30,90" fill="blue">
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="300" dur="3s" repeatCount="indefinite"></animateTransform>
</polygon>
<polygon points="60,30 90,90 30,90" fill="blue">
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="0 0" to="0 300" dur="3s" repeatCount="indefinite"></animateTransform>
</polygon>
<polygon points="60,30 90,90 30,90" fill="blue">
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="0 0" to="300 300" dur="3s" repeatCount="indefinite"></animateTransform>
</polygon>
</svg>
</div>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="true">
</divider>
<div class="sub-container">
<div class="gradient-container">
<text class="title">
渐变样式
</text>
<text class="sub-title">
polygon渐变样式1
</text>
<svg class="gradient1" width="200" height="80">
<polygon ref="prop2" data-name ="prop2" fill="white" stroke="blue" stroke-width="2" fill-opacity="0"
points="10,60 50,20 50,65 90,20" stroke-dasharray="10 5" stroke-dashoffset="3"></polygon>
</svg>
<text class="sub-title">
polygon渐变样式2
</text>
<svg class="gradient2" width="200" height="80">
<polygon ref="prop2" data-name ="prop2" fill="white" stroke="blue" stroke-width="2" fill-opacity="0"
points="10,60 50,20 50,65 90,20" stroke-dasharray="10 5" stroke-dashoffset="3"></polygon>
</svg>
<text class="sub-title">
polygon渐变样式3
</text>
<svg class="gradient3" width="200" height="80">
<polygon ref="prop2" data-name ="prop2" fill="white" stroke="yellow" stroke-width="2" fill-opacity="0"
points="10,60 50,20 50,65 90,20" stroke-dasharray="10 5" stroke-dashoffset="3"></polygon>
</svg>
<text class="sub-title">
polygon渐变样式4
</text>
<svg class="gradient4" width="200" height="80">
<polygon ref="prop2" data-name ="prop2" fill="red" stroke="blue" stroke-width="2"
points="10,60 50,20 50,65 90,20" stroke-dasharray="10 5" stroke-dashoffset="3"></polygon>
</svg>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="access-container">
<text class="title">
无障碍
</text>
<text class="sub-title">
polygon无障碍1
</text>
<svg class="access1" accessibilitygroup ="true"
accessibilitytext="polygon"
accessibilitydescription="点击此按键会弹出一个对话框"
ccessibilityimportance="no-hide-descendants"
width="200" height="100">
<polygon fill="white" stroke="blue" stroke-width="2"
points="10,80 50,20 50,75 90,20" stroke-dasharray="10 5" stroke-dashoffset="3"></polygon>
</svg>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="multimode-container">
<text class="title">
多模输入
</text>
<text class="sub-title">
polygon多模输入1
</text>
<!-- <svg class="multimode1" width="200" height="100" voicelabel = "voice"-->
<!-- subscriptflag="on" subscriptlabel="polygon" scenelabel="common">-->
<!-- <polygon fill="red" stroke="blue" stroke-width="2"-->
<!-- points="10,80 50,20 50,75 90,20" stroke-dasharray="10 5" stroke-dashoffset="3"></polygon>-->
<!-- </svg>-->
<svg class="multimode1" width="200" height="100" voicelabel = "voice"
subscriptflag="on" subscriptlabel="polygon" scenelabel="common">
<polygon fill="red" stroke="blue" stroke-width="2"
points="10,80 50,20 50,75 90,20" stroke-dasharray="10 5" stroke-dashoffset="3"></polygon>
</svg>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/polygon/index.js 0 → 100644
浏览文件 @ 5bd1ab66
/**
* 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
ace/ace_standard/src/main/js/default/pages/polyline/index.css 0 → 100644
浏览文件 @ 5bd1ab66
/**
* 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
ace/ace_standard/src/main/js/default/pages/polyline/index.hml 0 → 100644
浏览文件 @ 5bd1ab66
<div class="container">
<div class="style-container">
<text class="title">
通用样式
</text>
<text class="sub-title">
polyline通用样式1
</text>
<svg class="style1" x="0" y="0" width="200" height="200" fill="white" fill-opacity="0">
<polyline stroke="blue" stroke-width="2"
points="5,50 20,20 20,50 40,20" stroke-dasharray="10 5" stroke-dashoffset="3"></polyline>
</svg>
<text class="sub-title">
polyline通用样式2
</text>
<svg class="style2" x="0" y="0" width="200" height="50" fill="white" fill-opacity="0">
<polyline fill="white" stroke="blue" stroke-width="2"
points="5,50 20,20 20,50 40,20" stroke-dasharray="10 5" stroke-dashoffset="3"></polyline>
</svg>
<text class="sub-title">
polyline通用样式3
</text>
<svg class="style3" x="0" y="0" width="200" height="50" fill="white" fill-opacity="0">
<polyline fill="white" stroke="red" stroke-width="2"
points="5,50 20,20 20,50 40,20" stroke-dasharray="10 5" stroke-dashoffset="3"></polyline>
</svg>
<text class="sub-title">
polyline通用样式4
</text>
<svg class="style4" x="0" y="0" width="200" height="80" fill="blue" >
<polyline fill="white" stroke="block" stroke-width="2"
points="10,70 50,10 50,65 90,10" stroke-dasharray="10 5" stroke-dashoffset="3"></polyline>
</svg>
<text class="sub-title">
polyline通用样式5
</text>
<div class="contain1">
<svg class="style5" x="0" y="0" width="100" height="200" fill="blue">
<polyline stroke="block" stroke-width="2"
points="10,70 50,10 50,65 90,10" stroke-dasharray="10 5" stroke-dashoffset="3"></polyline>
</svg>
<svg class="style6" x="0" y="0" width="100" height="200" fill="red" >
<polyline stroke="yellow" stroke-width="2"
points="10,70 50,10 50,65 90,10" stroke-dasharray="10 5" stroke-dashoffset="3"></polyline>
</svg>
</div>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="true">
</divider>
<div class="sub-container">
<div class="prop-container">
<text class="title">
通用属性
</text>
<text class="sub-title">
polyline通用属性1
</text>
<svg width="200" height="80">
<polyline id="prop1" data-name ="prop1" points="10,50 10,10 30,50 50,20" fill="red"
stroke="blue" fill-opacity="0.5"></polyline>
</svg>
<text class="sub-title">
polyline通用属性2
</text>
<svg width="200" height="80">
<polyline class="prop2" ref="prop2" data-name ="prop2" points="10,50 10,10 50,50 50,10"
fill="#ad4e2a" stroke="blue" ></polyline>
</svg>
<text class="sub-title">
polyline通用属性3
</text>
<svg width="200" height="80">
<polyline class="prop3" id="prop3" fill="white" stroke="blue" stroke-width="2"
points="10,50 50,10 40,45 80,5" stroke-dasharray="10 5" stroke-dashoffset="3"></polyline>
</svg>
<text class="sub-title">
polyline通用属性4
</text>
<svg width="200" height="80">
<polyline class="prop4" id="prop4"fill="red" stroke="blue" stroke-width="2"
points="10,50 50,10 40,45 80,5" stroke-dasharray="10 5" stroke-dashoffset="3" transform="rotate(-10)"></polyline>
</svg>
<text class="sub-title">
polyline通用属性5
</text>
<svg width="200" height="80">
<polyline class="prop5" id="prop5" fill="red" stroke="blue" stroke-width="2"
points="10,50 50,10 40,45 80,5" stroke-dasharray="10 5" stroke-dashoffset="3" transform="skewX(20)"></polyline>
</svg>
<text class="sub-title">
polyline通用属性6
</text>
<svg width="200" height="80">
<polyline class="prop6" id="prop6" fill="white" stroke="blue" stroke-width="2"
points="10,50 50,10 40,45 80,5" stroke-dasharray="10 5" stroke-dashoffset="3" transform="skewY(10)"></polyline>
</svg>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="ani-container">
<text class="title">
动画样式
</text>
<text class="sub-title">
polyline动画样式1
</text>
<svg class="ani1" width="100" height="100">
<polyline fill="red" stroke="blue" stroke-width="2"
points="10,80 50,20 50,75 90,20" stroke-dasharray="10 5" stroke-dashoffset="3"></polyline>
</svg>
<text class="sub-title">
path动画样式2
</text>
<svg class="ani2" width="100" height="100">
<polyline fill="white" stroke="blue" stroke-width="2" fill-opacity="0"
points="10,80 50,20 50,75 90,20" stroke-dasharray="10 5" stroke-dashoffset="3"></polyline>
</svg>
</div>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="true">
</divider>
<div class="sub-container">
<div class="gradient-container">
<text class="title">
渐变样式
</text>
<text class="sub-title">
polyline渐变样式1
</text>
<svg class="gradient1" width="200" height="80">
<polyline ref="prop2" data-name ="prop2" fill="white" stroke="blue" stroke-width="2" fill-opacity="0"
points="10,60 50,20 50,65 90,20" stroke-dasharray="10 5" stroke-dashoffset="3"></polyline>
</svg>
<text class="sub-title">
polyline渐变样式2
</text>
<svg class="gradient2" width="200" height="80">
<polyline ref="prop2" data-name ="prop2" fill="white" stroke="blue" stroke-width="2" fill-opacity="0"
points="10,60 50,20 50,65 90,20" stroke-dasharray="10 5" stroke-dashoffset="3"></polyline>
</svg>
<text class="sub-title">
polyline渐变样式3
</text>
<svg class="gradient3" width="200" height="80">
<polyline ref="prop2" data-name ="prop2" fill="white" stroke="yellow" stroke-width="2" fill-opacity="0"
points="10,60 50,20 50,65 90,20" stroke-dasharray="10 5" stroke-dashoffset="3"></polyline>
</svg>
<text class="sub-title">
polyline渐变样式4
</text>
<svg class="gradient4" width="200" height="80">
<polyline ref="prop2" data-name ="prop2" fill="red" stroke="blue" stroke-width="2"
points="10,60 50,20 50,65 90,20" stroke-dasharray="10 5" stroke-dashoffset="3"></polyline>
</svg>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="access-container">
<text class="title">
无障碍
</text>
<text class="sub-title">
polyline无障碍1
</text>
<svg class="access1" accessibilitygroup ="true"
accessibilitytext="这是line"
accessibilitydescription="点击此按键会弹出一个对话框"
ccessibilityimportance="no-hide-descendants"
width="200" height="100">
<polyline fill="white" stroke="blue" stroke-width="2"
points="10,80 50,20 50,75 90,20" stroke-dasharray="10 5" stroke-dashoffset="3"></polyline>
</svg>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="multimode-container">
<text class="title">
多模输入
</text>
<text class="sub-title">
polyline多模输入1
</text>
<svg class="multimode1" width="200" height="100" voicelabel = "voice"
subscriptflag="on" subscriptlabel="divider" scenelabel="common">
<!-- <line id="prop1" data-name ="prop1" x1="10" x2="150" y1="20" y2="20" stroke="#978666" stroke-width="4" ></line>-->
<polyline fill="red" stroke="blue" stroke-width="2"
points="10,80 50,20 50,75 90,20" stroke-dasharray="10 5" stroke-dashoffset="3"></polyline>
</svg>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/polyline/index.js 0 → 100644
浏览文件 @ 5bd1ab66
/**
* 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
ace/ace_standard/src/main/js/default/pages/rect/index.css 0 → 100644
浏览文件 @ 5bd1ab66
.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
ace/ace_standard/src/main/js/default/pages/rect/index.hml 0 → 100644
浏览文件 @ 5bd1ab66
<div class="container">
<div class="style-container">
<text class="title">
通用样式
</text>
<text class="sub-title">
rect通用样式1
</text>
<rect class="style1" id="style1" x="0" y="-5" width="30" height="30" ></rect>
<text class="sub-title">
rect通用样式2
</text>
<svg x="0" y="0" width="100" height="100">
<rect class="style2" id="style2" x="0" y="10" width="30" height="30" fill="blue"></rect>
</svg>
<text class="sub-title">
rect通用样式3
</text>
<svg x="0" y="0" width="100" height="100" >
<rect class="style3" id="style3" x="0" y="0" width="30" height="30" fill="blue" fill-opacity="0.5"></rect>
</svg>
<text class="sub-title">
rect通用样式4
</text>
<svg x="0" y="0" width="100" height="80" >
<rect class="style4" id="style4" x="10" y="5" width="50" height="50" fill="blue" fill-opacity="0" stroke="yellow" stroke-width="4" rx="10" ry="10" ></rect>
</svg>
<text class="sub-title">
rect通用样式5
</text>
<div class="contain1">
<svg width="100" height="30">
<rect class="style5" id="style5" x="10" y="0" width="70" height="30" fill="blue" ></rect>
</svg>
<svg width="100" height="30">
<rect class="style6" id="style6" x="10" y="0" width="70" height="30" fill="blue" ></rect>
</svg>
</div>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="true">
</divider>
<div class="sub-container">
<div class="prop-container">
<text class="title">
通用属性
</text>
<text class="sub-title">
rect通用属性1
</text>
<svg x="0" y="0" width="180" height="80" viewBox="0 0 180 60" id="prop1" class="prop1" data-name ="prop1">
<rect x="10" y="10" width="50" height="50" fill-opacity="0.5"></rect>
<rect x="80" y="10" width="50" height="50" opacity="0.8"></rect>
</svg>
<text class="sub-title">
rect通用属性2
</text>
<svg x="0" y="0" width="180" height="80" viewBox="0 0 180 60" ref ="prop2" class="prop2" data-name ="prop2" >
<rect x="10" y="10" width="50" height="50" stroke="red" stroke-width="4" fill="white"></rect>
<rect x="70" y="10" width="50" height="50" stroke="red" stroke-width="4" fill="yellow" stroke-dasharray="5 3" stroke-dashoffset="10"></rect>
<rect x="130" y="10" width="50" height="50" stroke="blue" stroke-width="4" stroke-dashoffset="10" fill="white" stroke-opacity="0.6"></rect>
</svg>
<text class="sub-title">
rect通用属性3
</text>
<svg id="prop3" class="prop3" x="0" y="0" width="180" height="140" viewBox="0 0 180 140" >
<rect x="10" y="10" width="50" height="50" stroke="red" stroke-width="4" fill="white" transform="rotate(-10)"></rect>
<rect x="60" y="10" width="50" height="50" stroke="red" stroke-width="4" fill="white" transform="translate(40)"></rect>
<rect x="10" y="70" width="50" height="50" stroke="red" stroke-width="4" fill="white" transform="skewX(10)"></rect>
<rect x="120" y="70" width="50" height="50" stroke="red" stroke-width="4" fill="white" transform="skewY(5)"></rect>
</svg>
<text class="sub-title">
rect特有属性4
</text>
<svg id="prop4" class="prop4" x="0" y="0" width="200" height="80" viewBox="0 100 60" fill="white">
<rect x="0" y="10" width="50" height="50" stroke="red" stroke-width="3"></rect>
<rect x="60" y="10" width="50" height="50" stroke="yellow" stroke-width="3" rx="10" ry="10"></rect>
<rect x="120" y="10" width="50" height="50" stroke="blue" stroke-width="3" rx="10" ry="10" ></rect>
</svg>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="ani-container">
<text class="title">
动画样式
</text>
<text class="sub-title">
rect动画样式1
</text>
<svg width="200" height="100">
<rect x="20" y="10" width="60" height="60" fill="red" rx="0" ry="20">
<animate attributeName="rx" values="0;20" dur="1000" repeatCount="10" fill="freeze" calcMode="linear"></animate>
</rect>
</svg>
<text class="sub-title">
rect动画样式2
</text>
<svg width="200" height="100">
<rect x="20" y="10" width="50" height="50" fill="red" rx="0" ry="20">
<animate attributeName="fill" from="red" to="blue" dur="1000" repeatCount="indefinite"></animate>
<animate attributeName="height" from="50" to="100" begin="500" end="1000" repeatCount="indefinite"> </animate>
</rect>
</svg>
</div>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="true">
</divider>
<div class="sub-container">
<div class="gradient-container">
<text class="title">
渐变样式
</text>
<text class="sub-title">
rect渐变样式1
</text>
<svg class="gradient1" x="0" y="0" width="200" height="80" viewBox="0 0 60 60">
<rect x="10" y="5" width="50" height="50" fill="white" fill-opacity="0" stroke="block" stroke-width="4" rx="10" ry="10" stroke-dasharray="5 3" stroke-dashoffset="3"></rect>
</svg>
<text class="sub-title">
rect渐变样式2
</text>
<svg class="gradient2" x="0" y="0" width="200" height="80" viewBox="0 0 60 60">
<rect x="10" y="5" width="50" height="50" fill="white" fill-opacity="0" stroke="blue" stroke-width="4" rx="10" ry="10" ></rect>
</svg>
<text class="sub-title">
rect渐变样式3
</text>
<svg class="gradient3" x="0" y="0" width="200" height="80" viewBox="0 0 60 60">
<rect x="10" y="5" width="50" height="50" fill="pink" fill-opacity="0" stroke="yellow" stroke-width="4" rx="10" ry="10" ></rect>
</svg>
<text class="sub-title">
rect渐变样式4
</text>
<svg class="gradient4" x="0" y="0" width="200" height="80" viewBox="0 0 60 60">
<rect x="10" y="5" width="50" height="50" fill="white" fill-opacity="0" stroke="red" stroke-width="4"></rect>
</svg>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="access-container">
<text class="title">
无障碍
</text>
<text class="sub-title">
rect无障碍1
</text>
<svg class="access1" accessibilitygroup ="true"
accessibilitytext="这是circle"
accessibilitydescription="rect"
accessibilityimportance="no-hide-descendants"
width="200" height="50" >
<rect x="10" y="5" width="200" height="50" fill="#00FF00"></rect>
</svg>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="multimode-container">
<text class="title">
多模输入
</text>
<text class="sub-title">
rect多模输入1
</text>
<svg class="multimode1" width="200" height="50" voicelabel = "voice"
subscriptflag="on" subscriptlabel="divider" scenelabel="common">
<rect x="10" y="5" width="200" height="50" fill="#978666"></rect>
</svg>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/rect/index.js 0 → 100644
浏览文件 @ 5bd1ab66
/**
* 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
ace/ace_standard/src/main/js/default/pages/svg/index.css 0 → 100644
浏览文件 @ 5bd1ab66
.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
ace/ace_standard/src/main/js/default/pages/svg/index.hml 0 → 100644
浏览文件 @ 5bd1ab66
<div class="container">
<div class="style-container">
<text class="title">
通用样式
</text>
<text class="sub-title">
svg通用样式1
</text>
<svg class="style1" id="style1" x="0" y="0" width="100" height="100" viewBox="0 0 100 60" >
<rect x="10" y="0" width="70" height="70" ></rect>
</svg>
<text class="sub-title">
svg通用样式2
</text>
<svg class="style2" id="style2" x="0" y="0" width="100" height="100" viewBox="0 0 100 60" >
<rect x="10" y="0" width="70" height="70" fill="blue"></rect>
</svg>
<text class="sub-title">
svg通用样式3
</text>
<svg class="style3" id="style3" x="0" y="0" width="100" height="100" viewBox="0 0 100 60" >
<rect x="10" y="0" width="70" height="70" fill="blue" fill-opacity="0.5"></rect>
</svg>
<text class="sub-title">
svg通用样式4
</text>
<svg class="style4" id="style4" x="0" y="0" width="100" height="80" viewBox="0 0 100 60" >
<rect x="10" y="0" width="70" height="70" fill="blue" fill-opacity="0.5"></rect>
</svg>
<text class="sub-title">
svg通用样式5
</text>
<div class="contain1">
<svg class="style5" id="style5" width="100" height="30">
<rect x="10" y="0" width="70" height="30" fill="blue" ></rect>
</svg>
<svg class="style6" id="style6" width="100" height="30">
<rect x="10" y="0" width="70" height="30" fill="blue" ></rect>
</svg>
</div>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="true">
</divider>
<div class="sub-container">
<div class="prop-container">
<text class="title">
通用属性
</text>
<text class="sub-title">
svg通用属性1
</text>
<svg x="0" y="0" width="180" height="80" viewBox="0 0 180 60" id="prop1" class="prop1" data-name ="prop1">
<rect x="10" y="10" width="50" height="50" fill-opacity="0.5"></rect>
<rect x="80" y="10" width="50" height="50" opacity="0.8"></rect>
</svg>
<text class="sub-title">
svg通用属性2
</text>
<svg x="0" y="0" width="180" height="80" viewBox="0 0 180 60" ref ="prop2" class="prop2" data-name ="prop2" >
<rect x="10" y="10" width="50" height="50" stroke="red" stroke-width="4" fill="white"></rect>
<rect x="70" y="10" width="50" height="50" stroke="red" stroke-width="4" fill="yellow" stroke-dasharray="5 3" stroke-dashoffset="10"></rect>
<rect x="130" y="10" width="50" height="50" stroke="blue" stroke-width="4" stroke-dashoffset="10" fill="white" stroke-opacity="0.6"></rect>
</svg>
<text class="sub-title">
svg通用属性3
</text>
<svg x="0" y="0" width="180" height="140" viewBox="0 0 180 140" class="prop3" id="prop3">
<rect x="10" y="10" width="50" height="50" stroke="red" stroke-width="4" fill="white" transform="rotate(-10)"></rect>
<rect x="60" y="10" width="50" height="50" stroke="red" stroke-width="4" fill="white" transform="translate(40)"></rect>
<rect x="10" y="70" width="50" height="50" stroke="red" stroke-width="4" fill="white" transform="skewX(10)"></rect>
<rect x="120" y="70" width="50" height="50" stroke="red" stroke-width="4" fill="white" transform="skewY(5)"></rect>
</svg>
<text class="sub-title">
svg特有属性4
</text>
<svg x="0" y="0" width="50" height="80" viewBox="0 100 60" class="prop4" id="prop4">
<rect x="10" y="10" width="50" height="50" fill="red"></rect>
</svg>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="ani-container">
<text class="title">
动画样式
</text>
<text class="sub-title">
svg动画样式1
</text>
<svg class="ani1" width="50" height="50" viewBox="0 0 60 60">
<rect x="10" y="10" width="50" height="50" fill="#00FF00"></rect>
</svg>
<text class="sub-title">
svg动画样式2
</text>
<svg class="ani2" width="50" height="50" viewBox="0 0 60 60">
<rect x="10" y="10" width="50" height="50" fill="#00FF00"></rect>
</svg>
</div>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="true">
</divider>
<div class="sub-container">
<div class="gradient-container">
<text class="title">
渐变样式
</text>
<text class="sub-title">
svg渐变样式1
</text>
<svg class="gradient1" x="0" y="0" width="200" height="80" viewBox="0 0 60 60">
<rect x="10" y="5" width="50" height="50" fill="white" stroke="red" stroke-width="4" fill-opacity="0"></rect>
</svg>
<text class="sub-title">
svg渐变样式2
</text>
<svg class="gradient2" x="0" y="0" width="200" height="80" viewBox="0 0 60 60">
<rect x="10" y="5" width="50" height="50" fill="white" stroke="blue" stroke-width="4" fill-opacity="0"></rect>
</svg>
<text class="sub-title">
svg渐变样式3
</text>
<svg class="gradient3" x="0" y="0" width="200" height="80" viewBox="0 0 60 60">
<rect x="10" y="5" width="50" height="50" fill="white" stroke="yellow" stroke-width="4" fill-opacity="0"></rect>
</svg>
<text class="sub-title">
svg渐变样式4
</text>
<svg class="gradient4" x="0" y="0" width="200" height="80" viewBox="0 0 60 60">
<rect x="10" y="5" width="50" height="50" fill="white" stroke="red" stroke-width="4" fill-opacity="0"></rect>
</svg>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="access-container">
<text class="title">
无障碍
</text>
<text class="sub-title">
svg无障碍1
</text>
<svg class="access1" accessibilitygroup ="true"
accessibilitytext="这是svg"
accessibilitydescription="rect"
accessibilityimportance="no-hide-descendants"
width="200" height="50" >
<rect x="10" y="5" width="200" height="50" fill="#00FF00"></rect>
</svg>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<!-- <div class="atom-container">-->
<!-- <text class="title">-->
<!-- 原子布局-->
<!-- </text>-->
<!-- <text class="sub-title">-->
<!-- svg原子布局1-->
<!-- </text>-->
<!-- <div style="flex-direction: row;height: 30px;width: 100%;">-->
<!-- <divider vertical="true" style="width:20px;background-color: blue;display-index: 1;">-->
<!-- </divider>-->
<!-- <divider vertical="true" style="width:30px;background-color: black;display-index: 5;">-->
<!-- </divider>-->
<!-- <divider vertical="true" style="width:40px;background-color: yellow;display-index: 4;">-->
<!-- </divider>-->
<!-- <divider vertical="true" style="width:10px;background-color: red;display-index: 3;">-->
<!-- </divider>-->
<!-- <divider vertical="true" style="width:25px;background-color:pink;display-index: 7;">-->
<!-- </divider>-->
<!-- <divider vertical="true" style="width:15px;background-color: palegoldenrod;display-index: 2;">-->
<!-- </divider>-->
<!-- </div>-->
<!-- <text class="sub-title">-->
<!-- svg原子布局2-->
<!-- </text>-->
<!-- <div style="flex-direction: row;height: 30px;width: 100%;">-->
<!-- <divider vertical="true" style="background-color: blue;flex-weight: 1;">-->
<!-- </divider>-->
<!-- <divider vertical="true" style="background-color: black;flex-weight: 5;">-->
<!-- </divider>-->
<!-- <divider vertical="true" style="background-color: yellow;flex-weight: 4;">-->
<!-- </divider>-->
<!-- <divider vertical="true" style="background-color: red;flex-weight: 3;">-->
<!-- </divider>-->
<!-- <divider vertical="true" style="background-color:pink;flex-weight: 7;">-->
<!-- </divider>-->
<!-- <divider vertical="true" style="background-color: palegoldenrod;flex-weight: 2;">-->
<!-- </divider>-->
<!-- </div>-->
<!-- <text class="sub-title">-->
<!-- svg原子布局3-->
<!-- </text>-->
<!-- <div style="flex-direction: row;height:60px;width: 100%;">-->
<!-- <divider vertical="true" style="width:30px;background-color: blue;aspect-ratio: 0.6;">-->
<!-- </divider>-->
<!-- <divider vertical="true" style="width:30px;background-color: black;aspect-ratio:0.5;">-->
<!-- </divider>-->
<!-- <divider vertical="true" style="width:30px;background-color: yellow;aspect-ratio: 1.5;">-->
<!-- </divider>-->
<!-- <divider vertical="true" style="width:30px;background-color: red;aspect-ratio: 1.3;">-->
<!-- </divider>-->
<!-- <divider vertical="true" style="width:30px;background-color:pink;aspect-ratio: 1;">-->
<!-- </divider>-->
<!-- <divider vertical="true" style="width:30px;background-color: palegoldenrod;aspect-ratio:2;">-->
<!-- </divider>-->
<!-- </div>-->
<!-- </div>-->
<!-- <divider style="color: #000000; stroke-width: 2px;" vertical="false">-->
<!-- </divider>-->
<div class="multimode-container">
<text class="title">
多模输入
</text>
<text class="sub-title">
svg多模输入1
</text>
<svg class="multimode1" width="200" height="50" voicelabel = "voice"
subscriptflag="on" subscriptlabel="divider" scenelabel="common">
<rect x="10" y="5" width="200" height="50" fill="#978666"></rect>
</svg>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/svg/index.js 0 → 100644
浏览文件 @ 5bd1ab66
/**
* 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
ace/ace_standard/src/main/js/default/pages/svg_text/index.css 0 → 100644
浏览文件 @ 5bd1ab66
.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
ace/ace_standard/src/main/js/default/pages/svg_text/index.hml 0 → 100644
浏览文件 @ 5bd1ab66
<div class="container">
<div class="sub-container">
<div class="prop-container">
<text class="title">
通用属性
</text>
<text class="sub-title">
svg_text通用属性1
</text>
<svg width="200" height="50">
<text id="text1" x="5%" y="20" font-size="18" fill="red">x: 5% ; y: 20</text>
<text x="5%" y="30" dx="10%" dy="10" font-size="18" fill="blue">dx: 10% ; dy: 10</text>
</svg>
<text class="sub-title">
svg_text通用属性2
</text>
<svg width="200" height="50">
<text x="5%" y="10" font-size="18" fill="blue" rotate="30">rotate: 30</text>
<text x="5%" y="35" font-size="18" fill="black" rotate="-30">rotate: -30</text>
</svg>
<text class="sub-title">
svg_text通用属性3
</text>
<svg width="200" height="50">
<text x="5%" y="18" font-size="22" fill="black">font-size: 22px</text>
<text x="5%" y="40" font-size="18" fill="#00ff00">fill: #00ff00</text>
</svg>
<text class="sub-title">
svg_text通用属性4
</text>
<svg width="200" height="50">
<text x="5%" y="20" font-size="18" fill="red" fill-opacity="0.5">fill-opacity: 0.5</text>
<text x="5%" y="40" font-size="18" fill="red" opacity="0.7">opacity: 0.7</text>
</svg>
<text class="sub-title">
svg_text通用属性5
</text>
<svg width="200" height="70">
<text x="5%" y="20" font-size="18" fill="white" stroke="black">stroke: black</text>
<text x="5%" y="40" font-size="18" fill="white" stroke="black" stroke-width="2">stroke-width: 2</text>
<text x="5%" y="60" font-size="18" fill="white" stroke="black" stroke-width="2" stroke-opacity="0.5">stroke-opacity: 0.5</text>
</svg>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="ani-container">
<text class="title">
动画样式
</text>
<text class="sub-title">
svg_text动画样式1
</text>
<svg class="ani1" width="100" height="100">
<text id="text1" x="5%" y="20" font-size="18" fill="red">svg_text</text>
</svg>
<text class="sub-title">
svg_text动画样式2
</text>
<svg class="ani2" width="100" height="100">
<text id="text1" x="5%" y="20" font-size="18" fill="red">svg_text</text>
</svg>
</div>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="true">
</divider>
<div class="sub-container">
<div class="gradient-container">
<text class="title">
渐变样式
</text>
<text class="sub-title">
svg_text渐变样式1
</text>
<svg class="gradient1" width="200" height="80">
<text id="text1" x="5%" y="20" font-size="18" fill="#ffffff">svg_text</text>
</svg>
<text class="sub-title">
svg_text渐变样式2
</text>
<svg class="gradient2" width="200" height="80">
<text id="text1" x="5%" y="20" font-size="18" fill="#ffffff">svg_text</text>
</svg>
<text class="sub-title">
svg_text渐变样式3
</text>
<svg class="gradient3" width="200" height="80">
<text id="text1" x="5%" y="20" font-size="18" fill="#ffffff">svg_text</text>
</svg>
<text class="sub-title">
svg_text渐变样式4
</text>
<svg class="gradient4" width="200" height="80">
<text id="text1" x="5%" y="20" font-size="18" fill="#ffffff">svg_text</text>
</svg>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="access-container">
<text class="title">
无障碍
</text>
<text class="sub-title">
svg_text无障碍1
</text>
<svg class="access1" accessibilitygroup ="true"
accessibilitytext="这是line"
accessibilitydescription="点击此按键会弹出一个对话框"
ccessibilityimportance="no-hide-descendants"
width="200" height="100">
<text id="text1" x="5%" y="40" font-size="18" fill="#ff00ff">svg_text</text>
</svg>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="multimode-container">
<text class="title">
多模输入
</text>
<text class="sub-title">
svg_text多模输入1
</text>
<svg class="multimode1" width="200" height="100" voicelabel = "voice"
subscriptflag="on" subscriptlabel="divider" scenelabel="common">
<text id="text1" x="5%" y="20" font-size="18" fill="black">svg_text</text>
</svg>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/svg_text/index.js 0 → 100644
浏览文件 @ 5bd1ab66
/**
* 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
}
}
ace/ace_standard/src/main/js/default/pages/textPath/index.css 0 → 100644
浏览文件 @ 5bd1ab66
.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
ace/ace_standard/src/main/js/default/pages/textPath/index.hml 0 → 100644
浏览文件 @ 5bd1ab66
<div class="container">
<div class="sub-container">
<div class="prop-container">
<text class="title">
通用属性
</text>
<text class="sub-title">
textPath通用属性1
</text>
<svg width="200" height="100">
<path d="M20,20 Q60,90 90,80 Q90,40 60,40 Q40,40 40,60 Q40,100 80,100 Q100,100 100,100" stroke="red"
fill="none"></path>
<text >
<textpath fill="blue" path="M20,20 Q60,90 90,80 Q90,40 60,40 Q40,40 40,60 Q40,100 80,100 Q100,100 100,100"
font-size="18">
textPath
</textpath>
<textpath fill="red" startOffset="75%" path="M20,20 Q60,90 90,80 Q90,40 60,40 Q40,40 40,60 Q40,100 80,100 Q100,100 100,100"
font-size="15">
textPath
</textpath>
</text>
</svg>
<text class="sub-title">
textPath通用属性2
</text>
<svg width="200" height="100">
<path d="M20,20 Q60,90 90,80 Q100,0 20,40 Q00,40 40,80 Q60,95 100,95" stroke="red"
fill="none"></path>
<text>
<textpath fill="blue" path="M20,20 Q60,90 90,80 Q100,0 20,40 Q00,40 40,80 Q60,95 100,95"
font-size="18" opacity="0.5">
textPath
</textpath>
<textpath fill="#ffffff" path="M20,20 Q60,90 90,80 Q100,0 20,40 Q00,40 40,80 Q60,95 100,95"
font-size="18" startOffset="30%" stroke="red">
textPath
</textpath>
<textpath fill="blue" path="M20,20 Q60,90 90,80 Q100,0 20,40 Q00,40 40,80 Q60,95 100,95"
font-size="16" startOffset="70%" fill-opacity="0.8">
textPath
</textpath>
</text>
</svg>
<text class="sub-title">
textPath通用属性3
</text>
<svg width="200" height="200">
<path d="M20,20 Q60,90 90,80 Q100,0 20,40 Q00,40 40,80 Q60,95 100,95" stroke="red"
fill="none"></path>
<text>
<textpath fill="#ffffff" path="M20,20 Q60,90 90,80 Q100,0 20,40 Q00,40 40,80 Q60,95 100,95"
font-size="18" stroke="red" stroke-width="2">
textPath
</textpath>
<textpath fill="#ffffff" startOffset="75%" path="M20,20 Q60,90 90,80 Q100,0 20,40 Q00,40 40,80 Q60,95 100,95"
font-size="18" stroke="red" stroke-width="2" stroke-opacity="0.5">
textPath
</textpath>
</text>
</svg>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="ani-container">
<text class="title">
动画样式
</text>
<text class="sub-title">
textPath动画样式1
</text>
<svg class="ani1" width="100" height="100">
<text>
<textpath fill="#ffffff" path="M20,20 Q60,90 90,80 Q100,0 20,40 Q00,40 40,80 Q60,95 100,95"
font-size="18" stroke="red" stroke-width="2">
textPath
</textpath>
<textpath fill="#ffffff" startOffset="75%" path="M20,20 Q60,90 90,80 Q100,0 20,40 Q00,40 40,80 Q60,95 100,95"
font-size="18" stroke="red" stroke-width="2" stroke-opacity="0.5">
textPath
</textpath>
</text>
</svg>
<text class="sub-title">
textPath动画样式2
</text>
<svg class="ani2" width="100" height="100">
<text>
<textpath fill="#ffffff" path="M20,20 Q60,90 90,80 Q100,0 20,40 Q00,40 40,80 Q60,95 100,95"
font-size="18" stroke="red" stroke-width="2">
textPath
</textpath>
<textpath fill="#ffffff" startOffset="75%" path="M20,20 Q60,90 90,80 Q100,0 20,40 Q00,40 40,80 Q60,95 100,95"
font-size="18" stroke="red" stroke-width="2" stroke-opacity="0.5">
textPath
</textpath>
</text>
</svg>
</div>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="true">
</divider>
<div class="sub-container">
<div class="gradient-container">
<text class="title">
渐变样式
</text>
<text class="sub-title">
textPath渐变样式1
</text>
<svg class="gradient1" width="200" height="80">
<text>
<textpath fill="#ffffff" path="M20,20 Q60,90 90,80 Q80,0 20,40 Q00,40 40,80 Q60,95 80,95"
font-size="18" stroke="#ffffff" stroke-width="2">
textPath
</textpath>
</text>
</svg>
<text class="sub-title">
textPath渐变样式2
</text>
<svg class="gradient2" width="200" height="80">
<text>
<textpath fill="#ffffff" path="M20,20 Q60,90 90,80 Q80,0 20,40 Q00,40 40,80 Q60,95 80,95"
font-size="18" stroke="#ffffff" stroke-width="2">
textPath
</textpath>
</text>
</svg>
<text class="sub-title">
textPath渐变样式3
</text>
<svg class="gradient3" width="200" height="80">
<text>
<textpath fill="#ffffff" path="M20,20 Q60,90 90,80 Q80,0 20,40 Q00,40 40,80 Q60,95 80,95"
font-size="18" stroke="#ffffff" stroke-width="2">
textPath
</textpath>
</text>
</svg>
<text class="sub-title">
textPath渐变样式4
</text>
<svg class="gradient4" width="200" height="80">
<text>
<textpath fill="#ffffff" path="M20,20 Q60,90 90,80 Q80,0 20,40 Q00,40 40,80 Q60,95 80,95"
font-size="18" stroke="#ffffff" stroke-width="2">
textPath
</textpath>
</text>
</svg>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="access-container">
<text class="title">
无障碍
</text>
<text class="sub-title">
textPath无障碍1
</text>
<svg class="access1" accessibilitygroup ="true"
accessibilitytext="这是line"
accessibilitydescription="点击此按键会弹出一个对话框"
ccessibilityimportance="no-hide-descendants"
width="200" height="100">
<text>
<textpath fill="#ffffff" path="M20,20 Q60,90 90,80 Q80,0 20,40 Q00,40 40,80 Q60,95 80,95"
font-size="18" stroke="#ff00ff" stroke-width="2">
textPath
</textpath>
</text>
</svg>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="multimode-container">
<text class="title">
多模输入
</text>
<text class="sub-title">
textPath多模输入1
</text>
<svg class="multimode1" width="200" height="100" voicelabel = "voice"
subscriptflag="on" subscriptlabel="divider" scenelabel="common">
<text>
<textpath fill="#ffffff" path="M20,20 Q60,90 90,80 Q80,0 20,40 Q00,40 40,80 Q60,95 80,95"
font-size="18" stroke="black" stroke-width="2">
textPath
</textpath>
</text>
</svg>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/textPath/index.js 0 → 100644
浏览文件 @ 5bd1ab66
/**
* 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 {
}
ace/ace_standard/src/main/js/default/pages/tspan/index.css 0 → 100644
浏览文件 @ 5bd1ab66
.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
ace/ace_standard/src/main/js/default/pages/tspan/index.hml 0 → 100644
浏览文件 @ 5bd1ab66
<div class="container">
<div class="sub-container">
<div class="prop-container">
<text class="title">
通用属性
</text>
<text class="sub-title">
tspan通用属性1
</text>
<svg width="200" height="100">
<text>
<tspan id="tspan" font-size="18" x="10" y="20">
X: 0; Y: 60
</tspan>
<tspan font-size="18" x="10" y="20" dx="10" dy="30">
dx: 10; dy: 40
</tspan>
<tspan font-size="25" x="10" y="80">
font-size: 25px
</tspan>
</text>
</svg>
<text class="sub-title">
tspan通用属性2
</text>
<svg width="200" height="100">
<text>
<tspan font-size="18" x="10" y="20" rotate="30">
rotate: 30
</tspan>
<tspan font-size="18" x="10" y="45" rotate="-30">
rotate: -30
</tspan>
<tspan font-size="18" x="10" y="65" fill="red">
fill: red
</tspan>
<tspan font-size="18" x="10" y="85" fill="#ff00ff">
fill: #ff00ff
</tspan>
</text>
</svg>
<text class="sub-title">
tspan通用属性3
</text>
<svg width="200" height="200">
<text>
<tspan font-size="18" x="10" y="20" opacity="0.5">
opacity: 0.5
</tspan>
<tspan font-size="18" x="10" y="45" fill-opacity="0.8">
fill-opacity: 0.8
</tspan>
<tspan font-size="18" x="10" y="70" fill="#ffffff" stroke="red">
stroke: red
</tspan>
<tspan font-size="18" x="10" y="95" fill="#ffffff" stroke="red" stroke-width="2">
stroke-width: 2
</tspan>
<tspan font-size="18" x="10" y="120" fill="#ffffff" stroke="red" stroke-width="2" stroke-opacity="0.5">
stroke-opacity: 0.5
</tspan>
</text>
</svg>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="ani-container">
<text class="title">
动画样式
</text>
<text class="sub-title">
tspan动画样式1
</text>
<svg class="ani1" width="100" height="100">
<text>
<tspan font-size="18" x="10" y="40" fill="#ffffff" stroke="red" stroke-width="2" stroke-opacity="0.5">
tspan
</tspan>
</text>
</svg>
<text class="sub-title">
tspan动画样式2
</text>
<svg class="ani2" width="100" height="100">
<text>
<tspan font-size="18" x="10" y="40" fill="#ffffff" stroke="red" stroke-width="2" stroke-opacity="0.5">
tspan
</tspan>
</text>
</svg>
</div>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="true">
</divider>
<div class="sub-container">
<div class="gradient-container">
<text class="title">
渐变样式
</text>
<text class="sub-title">
tspan渐变样式1
</text>
<svg class="gradient1" width="200" height="80">
<text>
<tspan font-size="18" x="10" y="40" fill="#ffffff" stroke="#ff00ff" stroke-width="2" stroke-opacity="0.5">
tspan
</tspan>
</text>
</svg>
<text class="sub-title">
tspan渐变样式2
</text>
<svg class="gradient2" width="200" height="80">
<text>
<tspan font-size="18" x="10" y="40" fill="#ffffff" stroke="#ff00ff" stroke-width="2" stroke-opacity="0.5">
tspan
</tspan>
</text>
</svg>
<text class="sub-title">
tspan渐变样式3
</text>
<svg class="gradient3" width="200" height="80">
<text>
<tspan font-size="18" x="10" y="40" fill="#ffffff" stroke="#ff00ff" stroke-width="2" stroke-opacity="0.5">
tspan
</tspan>
</text>
</svg>
<text class="sub-title">
tspan渐变样式4
</text>
<svg class="gradient4" width="200" height="80">
<text>
<tspan font-size="18" x="10" y="40" fill="#ffffff" stroke="#ff00ff" stroke-width="2" stroke-opacity="0.5">
tspan
</tspan>
</text>
</svg>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="access-container">
<text class="title">
无障碍
</text>
<text class="sub-title">
tspan无障碍1
</text>
<svg class="access1" accessibilitygroup ="true"
accessibilitytext="这是line"
accessibilitydescription="点击此按键会弹出一个对话框"
ccessibilityimportance="no-hide-descendants"
width="200" height="100">
<text>
<tspan font-size="18" x="10" y="40" fill="#ffffff" stroke="#ff00ff" stroke-width="2" stroke-opacity="0.5">
tspan
</tspan>
</text>
</svg>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="multimode-container">
<text class="title">
多模输入
</text>
<text class="sub-title">
tspan多模输入1
</text>
<svg class="multimode1" width="200" height="100" voicelabel = "voice"
subscriptflag="on" subscriptlabel="divider" scenelabel="common">
<text>
<tspan font-size="18" x="10" y="40" fill="#ffffff" stroke="#ff00ff" stroke-width="2" stroke-opacity="0.5">
tspan
</tspan>
</text>
</svg>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/tspan/index.js 0 → 100644
浏览文件 @ 5bd1ab66
/**
* 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 {
}
ace/ace_standard/src/main/js/default/pages/video/index.css 0 → 100644
浏览文件 @ 5bd1ab66
/**
* 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
ace/ace_standard/src/main/js/default/pages/video/index.hml 0 → 100644
浏览文件 @ 5bd1ab66
<div class="container">
<div class="sub-container">
<text class="title">
通用样式
</text>
<text class="sub-title">
video通用样式1
</text>
<video src="/common/images/video.mp4" id="style1" class="style1">
</video>
<text class="sub-title">
video通用样式2
</text>
<video src="/common/images/video.mp4" id="style2" class="style2">
</video>
<text class="sub-title">
video通用样式3
</text>
<video src="/common/images/video.mp4" id="style3" class="style3">
</video>
<text class="sub-title">
video通用样式4
</text>
<video src="/common/images/video.mp4" id="style4" class="style4">
</video>
<text class="sub-title">
div通用样式5
</text>
<div class="contain1" style="height: 300px;">
<video src="/common/images/video.mp4" id="style5" class="style5">
</video>
<video src="/common/images/video.mp4" id="style6" class="style6">
</video>
</div>
<text class="sub-title">
video特有样式
</text>
<video src="/common/images/video.mp4" id="style7" class="style7">
</video>
</div>
<div style="background-color: #000000; width: 2px; height: 100%;">
</div>
<div class="sub-container">
<div class="prop-container">
<text class="title title-style-2">
通用属性
</text>
<text class="sub-title sub-title-2">
video通用属性1
</text>
<video id="prop1" class="prop1"
disabled = "true" data-name ="prop1" click-effect="spring-medium">
</video>
<text class="sub-title sub-title-2">
video通用属性2
</text>
<video class="prop2" ref ="prop2" id="prop2"
disabled = "false" data-name ="prop2" click-effect="spring-large">
</video>
<text class="sub-title sub-title-2">
video通用属性3
</text>
<video style="color: #679855; margin: 5px;" class="prop3" id="prop3">
</video>
<text class="sub-title sub-title-2">
video特有属性
</text>
<video src="/common/images/video.mp4" class="prop4" id="prop4"
muted="true" autoplay="true" poster="/common/images/image.png"
controls="true" loop="true" starttime="2" direction="auto"
speed="1.5">
</video>
<video src="/common/images/video.mp4" class="prop5" id="prop5"
muted="false" autoplay="false" controls="false" loop="false"
starttime="3" direction="vertical" speed="1.0">
</video>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="event-container" >
<text class="title title-style-2">
通用事件
</text>
<text class="sub-title sub-title-2">
video通用事件1
</text>
<video src="/common/images/video.mp4" class ="event1" ontouchstart="touchStart"
ontouchmove="touchMove" ontouchend="touchEnd" ontouchcancel="touchCancel">
</video>
<text class="sub-title sub-title-2">
video通用事件2
</text>
<video src="/common/images/video.mp4" class ="event2" onclick="click"
ondoubleclick="doubleClick" onlongpress="longPress" onfocus="focus"
onblur="blur" onkey="key" onswipe="swipe" onattached="attached"
ondetached="detached">
</video>
<text class="sub-title sub-title-2">
video通用事件3
</text>
<video src="/common/images/video.mp4" class ="event3" onpinchstart="pinchStart"
onpinchupdate="pinchUpdate"
onpinchend="pinchEnd" onpinchcancel="pinchCancel"
ondragstart="dragStart" ondrag="drag"
ondragend="dragEnd" ondragenter="dragEnter"
ondragover="dragOver" ondragleave="dragLeave"
ondrop="drop">
</video>
<text class="sub-title sub-title-2">
video特有事件1
</text>
<video src="/common/images/video.mp4" class ="event4" onprepared="prepared"
onstart="start" onpause="pause" onfinish="finish" onerror="error"
onseeking="seeking" onseeked="seeked" ontimeupdate="timeupdate"
onfullscreenchange="fullscreenchange" onstop="stop">
</video>
</div>
</div>
<div style="background-color: #000000; width: 2px; height: 100%;">
</div>
<div class="sub-container">
<div class="atom-container">
<text class="title title-style-2">
特有方法
</text>
<text class="sub-title sub-title-2 sub-title-3">
video特有方法1
</text>
<video src="/common/images/video.mp4" id="function4" class="function4" ontouchstart="functionTest4">
</video>
<text class="sub-title sub-title-2 sub-title-3">
video特有方法2
</text>
<video src="/common/images/video.mp4" id="function5" class="function5" ontouchstart="functionTest5">
</video>
<text class="sub-title sub-title-2 sub-title-3">
video特有方法3
</text>
<video src="/common/images/video.mp4" id="function6" class="function6" ontouchstart="functionTest6">
</video>
<text class="sub-title sub-title-2 sub-title-3">
video特有方法4
</text>
<video src="/common/images/video.mp4" id="function7" class="function7" ontouchstart="functionTest7">
</video>
<text class="sub-title sub-title-2 sub-title-3">
video特有方法5
</text>
<video src="/common/images/video.mp4" id="function8" class="function8" ontouchstart="functionTest8">
</video>
<text class="sub-title sub-title-2 sub-title-3">
video特有方法6
</text>
<video src="/common/images/video.mp4" id="function9" class="function9" ontouchstart="functionTest9">
</video>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="function-container">
<text class="title title-style-2">
通用方法
</text>
<text class="sub-title sub-title-2 sub-title-3">
video通用方法1
</text>
<video src="/common/images/video.mp4" id="function1" class="function1" ontouchstart="functionTest1">
</video>
<text class="sub-title sub-title-2 sub-title-3">
div通用方法2
</text>
<video src="/common/images/video.mp4" id="function2" class="function2" ontouchstart="functionTest2">
</video>
<text class="sub-title sub-title-2 sub-title-3">
div通用方法3
</text>
<video src="/common/images/video.mp4" id="function3" class="function3" ontouchstart="functionTest3">
</video>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/video/index.js 0 → 100644
浏览文件 @ 5bd1ab66
// @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"});
// }
//}
multimedia/audio/audio.iml 0 → 100644
浏览文件 @ 5bd1ab66
<?xml version="1.0" encoding="UTF-8"?>
<module type="JAVA_MODULE" version="4">
<component name="NewModuleRootManager" inherit-compiler-output="true">
<exclude-output />
<content url="file://$MODULE_DIR$">
<sourceFolder url="file://$MODULE_DIR$/audio_js_standard/audioManager/src/main/java" isTestSource="false" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>
\ No newline at end of file
multimedia/media/media_js_standard/audioPlayer/audioPlayer.iml 0 → 100644
浏览文件 @ 5bd1ab66
<?xml version="1.0" encoding="UTF-8"?>
<module type="JAVA_MODULE" version="4">
<component name="NewModuleRootManager" inherit-compiler-output="true">
<exclude-output />
<content url="file://$MODULE_DIR$">
<sourceFolder url="file://$MODULE_DIR$/src/main/java" isTestSource="false" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>
\ No newline at end of file
multimedia/media/media_js_standard/audioRecorder/audioRecorder.iml 0 → 100644
浏览文件 @ 5bd1ab66
<?xml version="1.0" encoding="UTF-8"?>
<module type="JAVA_MODULE" version="4">
<component name="NewModuleRootManager" inherit-compiler-output="true">
<exclude-output />
<content url="file://$MODULE_DIR$">
<sourceFolder url="file://$MODULE_DIR$/src/main/java" isTestSource="false" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或