Skip to content

X
Xts Acts

OpenHarmony / Xts Acts
1 年多 前同步成功

通知 9
Star 22
Fork 0
X
Xts Acts
提交 e6434d92 编写于 作者: D dongwei
浏览文件
操作

add test cases 

Signed-off-by: Ndongwei <dongwei@kaihongdigi.com>
上级 e4bc2bbf
显示空白变更内容
内联 并排
Showing with 608 addition and 554 deletion
ace/ace_standard/src/main/js/default/pages/ellipse/index.css 已删除 100644 → 0
浏览文件 @ e4bc2bbf
/**
* 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 已删除 100644 → 0
浏览文件 @ e4bc2bbf
<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/prop/index.css 0 → 100644
浏览文件 @ e6434d92
.container {
flex-direction:row;
width:100%;
height:100%;
padding: 1px;
}
.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;
}
.prop-container{
flex-direction: column;
height: 100%;
flex-weight: 1;
}
ace/ace_standard/src/main/js/default/pages/ellipse/prop/index.hml 0 → 100644
浏览文件 @ e6434d92
<div class="container">
<div class="prop-container">
<text class="title">
ellipse通用属性
</text>
<text class="sub-title">
通用属性 -- fill
</text>
<svg width="100" height="25" >
<ellipse id ="fillProp" cx="60" cy="11" rx="25" ry="10" fill="red"></ellipse>
</svg>
<text class="sub-title">
通用属性 -- fill-opacity
</text>
<div style="height: 25px;width: 220px;">
<svg width="70px" height="25px">
<ellipse id ="fillOpacityPropOne" cx="25" cy="11" rx="25" ry="10" fill-opacity="0.5" fill="red"></ellipse>
</svg>
<svg width="70px" height="25px">
<ellipse id ="fillOpacityPropTwo" cx="25" cy="11" rx="25" ry="10" fill-opacity="1" fill="red"></ellipse>
</svg>
<svg width="80px" height="25px">
<ellipse id ="fillOpacityPropThree" cx="25" cy="11" rx="25" ry="10" fill-opacity="1.5" fill="red"></ellipse>
</svg>
</div>
<text class="sub-title">
通用属性 -- fill-rule
</text>
<div style="height: 25px;width: 150px;">
<svg width="70px" height="25px">
<ellipse id ="fillRulePropOne" cx="25" cy="11" rx="25" ry="10" fill-rule="evenodd" fill="red"></ellipse>
</svg>
<svg width="70px" height="25px">
<ellipse id ="fillRulePropTwo" cx="25" cy="11" rx="25" ry="10" fill-rule="nonzero" fill="red"></ellipse>
</svg>
</div>
<text class="sub-title">
通用属性 -- opacity
</text>
<div style="height: 25px;width: 220px;">
<svg width="70px" height="25px" fill="red">
<ellipse id ="opacityPropOne" cx="25" cy="11" rx="25" ry="10" opacity="0.5"></ellipse>
</svg>
<svg width="70px" height="25px" fill="red">
<ellipse id ="opacityPropTwo" cx="25" cy="11" rx="25" ry="10" opacity="1"></ellipse>
</svg>
<svg width="80px" height="25px" fill="red">
<ellipse id ="opacityPropThree" cx="25" cy="11" rx="25" ry="10" opacity="1.5"></ellipse>
</svg>
</div>
<text class="sub-title">
通用属性 -- stroke
</text>
<svg width="100px" height="25px" fill="white">
<ellipse id ="strokeProp" cx="60" cy="11" rx="25" ry="10" stroke = "red"></ellipse>
</svg>
<text class="sub-title">
通用属性 -- stroke-dasharray
</text>
<svg width="100px" height="25px" fill="white">
<ellipse id ="strokeDashArrayProp" cx="60" cy="11" rx="25" ry="10" stroke = "red"
stroke-dasharray="2 3"></ellipse>
</svg>
<text class="sub-title">
通用属性 -- stroke-dashoffset
</text>
<svg width="100px" height="25px" fill="white">
<ellipse id ="strokeDashOffsetProp" cx="60" cy="11" rx="25" ry="10" stroke = "red"
stroke-dashoffset="23"></ellipse>
</svg>
<text class="sub-title">
通用属性 -- stroke-linejoin
</text>
<div style="height: 25px;width: 220px;">
<svg width="70px" height="25px" fill="white">
<ellipse id ="strokeLineJoinPropOne" cx="25" cy="11" rx="25" ry="10"
stroke = "red" stroke-linejoin="bevel"></ellipse>
</svg>
<svg width="70px" height="25px" fill="white">
<ellipse id ="strokeLineJoinPropTwo" cx="25" cy="11" rx="25" ry="10"
stroke = "red" stroke-linejoin="miter"></ellipse>
</svg>
<svg width="80px" height="25px" fill="white">
<ellipse id ="strokeLineJoinPropThree" cx="25" cy="11" rx="25" ry="10"
stroke = "red" stroke-linejoin="round"></ellipse>
</svg>
</div>
<text class="sub-title">
通用属性 -- stroke-linecap
</text>
<div style="height: 25px;width: 220px;">
<svg width="70px" height="25px" fill="white">
<ellipse id ="strokeLineCapPropOne" cx="25" cy="11" rx="25" ry="10"
stroke = "red" stroke-linecap="butt"></ellipse>
</svg>
<svg width="70px" height="25px" fill="white">
<ellipse id ="strokeLineCapPropTwo" cx="25" cy="11" rx="25" ry="10"
stroke = "red" stroke-linecap="round"></ellipse>
</svg>
<svg width="80px" height="25px" fill="white">
<ellipse id ="strokeLineCapPropThree" cx="25" cy="11" rx="25" ry="10"
stroke = "red" stroke-linecap="square"></ellipse>
</svg>
</div>
<text class="sub-title">
通用属性 -- stroke-miterlimit
</text>
<svg width="100px" height="25px" fill="white">
<ellipse id ="strokeMiterLimitProp" cx="60" cy="11" rx="25" ry="10"
stroke = "red" stroke-miterlimit="10"></ellipse>
</svg>
<text class="sub-title">
通用属性 -- stroke-opacity
</text>
<div style="height: 25px;width: 220px;">
<svg width="70px" height="25px" fill="white">
<ellipse id ="strokeOpacityPropOne" cx="25" cy="11" rx="25" ry="10"
stroke = "red" stroke-opacity="0.5"></ellipse>
</svg>
<svg width="70px" height="25px" fill="white">
<ellipse id ="strokeOpacityPropTwo" cx="25" cy="11" rx="25" ry="10"
stroke = "red" stroke-opacity="1"></ellipse>
</svg>
<svg width="80px" height="25px" fill="white">
<ellipse id ="strokeOpacityPropThree" cx="25" cy="11" rx="25" ry="10"
stroke = "red" stroke-opacity="1.5"></ellipse>
</svg>
</div>
<text class="sub-title">
通用属性 -- stroke-width
</text>
<svg width="100px" height="30px" fill="white">
<ellipse id ="strokeWidthProp" cx="60" cy="14" rx="25" ry="10"
stroke = "red" stroke-width="6"></ellipse>
</svg>
<text class="sub-title">
通用属性 -- transform
</text>
<svg width="100px" height="100px" fill="red">
<ellipse id ="transformProp" cx="25" cy="50" rx="25" ry="10"
transform="translate(10,5) scale(0.5 1.3) rotate(20 40 90) skewX(10) skewY(-15)"></ellipse>
</svg>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="true">
</divider>
<div class="prop-container">
<text class="title">
ellipse特有属性
</text>
<text class="sub-title">
特有属性-id
</text>
<svg width="100px" height="40px" fill="red">
<ellipse id ="idProp" cx="25" cy="20" rx="25" ry="10" ></ellipse>
</svg>
<text class="sub-title">
特有属性-cx
</text>
<svg width="200px" height="40px" >
<ellipse id ="cxPropOne" cx="25" cy="20" rx="25" ry="10" fill="red"></ellipse>
<ellipse id ="cxPropTwo" cx="50%" cy="20" rx="25" ry="10" fill="pink"></ellipse>
</svg>
<text class="sub-title">
特有属性-cy
</text>
<svg width="200px" height="40px">
<ellipse id ="cyPropOne" cx="25" cy="20" rx="25" ry="10" fill="red" ></ellipse>
<ellipse id ="cyPropTwo" cx="80" cy="50%" rx="25" ry="10" fill="pink" ></ellipse>
</svg>
<text class="sub-title">
特有属性-rx
</text>
<svg width="200px" height="40px" fill="white">
<ellipse id ="rxPropOne" cx="25" cy="20" rx="25" ry="10" stroke="red" ></ellipse>
<ellipse id ="rxPropTwo" cx="100" cy="20" rx="25%" ry="10" stroke="pink" ></ellipse>
</svg>
<text class="sub-title">
特有属性-ry
</text>
<svg width="200px" height="40px" fill="white">
<ellipse id ="ryPropOne" cx="25" cy="20" rx="25" ry="10" stroke="red" ></ellipse>
<ellipse id ="ryPropTwo" cx="100" cy="20" rx="25" ry="10%" stroke="pink"></ellipse>
</svg>
<text class="sub-title">
特有属性-if
</text>
<svg width="100px" height="50px">
<ellipse id ="ifPropTrue" cx="25" cy="20" rx="25" ry="10" fill="red" if="true"></ellipse>
</svg>
<text class="sub-title">
特有属性-show
</text>
<svg width="200px" height="50px">
<ellipse id ="showPropTrue" cx="25" cy="20" rx="25" ry="10" fill="red" show="true"></ellipse>
<ellipse id ="showPropFalse" cx="25" cy="20" rx="25" ry="10" fill="red" show="false"></ellipse>
<ellipse id ="showPropNone" cx="25" cy="20" rx="25" ry="10" fill="red" show=""></ellipse>
</svg>
<text class="sub-title">
特有属性-elif
</text>
<svg width="200px" height="50px" fill="red" >
<ellipse cx="25" cy="20" rx="25" ry="10" if="false"></ellipse>
<ellipse cx="25" cy="20" rx="25" ry="10" elif="true"></ellipse>
<ellipse cx="25" cy="20" rx="25" ry="10" elif="false"></ellipse>
</svg>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/ellipse/prop/index.js 0 → 100644
浏览文件 @ e6434d92
/**
* 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: {
fillProp: null,
fillOpacityPropTwo: null,
fillOpacityPropOne: null,
fillOpacityPropThree: null,
fillRulePropTwo: null,
fillRulePropOne: null,
opacityPropOne: null,
opacityPropTwo: null,
opacityPropThree: null,
strokeProp: null,
strokeDashArrayProp: null,
strokeDashOffsetProp: null,
strokeLineJoinPropTwo: null,
strokeLineJoinPropOne: null,
strokeLineJoinPropThree: null,
strokeLineCapPropOne: null,
strokeLineCapPropTwo: null,
strokeLineCapPropThree: null,
strokeMiterLimitProp: null,
strokeOpacityPropOne: null,
strokeOpacityPropTwo: null,
strokeOpacityPropThree: null,
strokeWidthProp: null,
transformProp: null,
idProp: null,
cxPropOne: null,
cxPropTwo: null,
cyPropOne: null,
cyPropTwo: null,
rxPropOne: null,
rxPropTwo: null,
ryPropOne: null,
ryPropTwo: null,
ifPropTrue : null,
showPropTrue : null,
showPropFalse : null,
showPropNone : null
},
onShow() {
this.getCommonPropValues();
globalThis.value = {
fillProp: this.fillProp,
fillOpacityPropTwo: this.fillOpacityPropTwo,
fillOpacityPropOne: this.fillOpacityPropOne,
fillOpacityPropThree: this.fillOpacityPropThree,
fillRulePropTwo: this.fillRulePropTwo,
fillRulePropOne: this.fillRulePropOne,
opacityPropOne: this.opacityPropOne,
opacityPropTwo: this.opacityPropTwo,
opacityPropThree: this.opacityPropThree,
strokeProp: this.strokeProp,
strokeDashArrayProp: this.strokeDashArrayProp,
strokeDashOffsetProp: this.strokeDashOffsetProp,
strokeLineJoinPropTwo: this.strokeLineJoinPropTwo,
strokeLineJoinPropOne: this.strokeLineJoinPropOne,
strokeLineJoinPropThree: this.strokeLineJoinPropThree,
strokeLineCapPropOne: this.strokeLineCapPropOne,
strokeLineCapPropTwo: this.strokeLineCapPropTwo,
strokeLineCapPropThree: this.strokeLineCapPropThree,
strokeMiterLimitProp: this.strokeMiterLimitProp,
strokeOpacityPropOne: this.strokeOpacityPropOne,
strokeOpacityPropTwo: this.strokeOpacityPropTwo,
strokeOpacityPropThree: this.strokeOpacityPropThree,
strokeWidthProp: this.strokeWidthProp,
transformProp: this.transformProp,
idProp: this.idProp,
cxPropOne: this.cxPropOne,
cxPropTwo: this.cxPropTwo,
cyPropOne: this.cyPropOne,
cyPropTwo: this.cyPropTwo,
rxPropOne: this.rxPropOne,
rxPropTwo: this.rxPropTwo,
ryPropOne: this.ryPropOne,
ryPropTwo: this.ryPropTwo,
ifPropTrue: this.ifPropTrue,
showPropTrue: this.showPropTrue,
showPropFalse: this.showPropFalse,
showPropNone: this.showPropNone
}
},
getCommonPropValues() {
this.fillProp = this.$element("fillProp").getInspector()
this.fillOpacityPropTwo = this.$element("fillOpacityPropTwo").getInspector()
this.fillOpacityPropOne = this.$element("fillOpacityPropOne").getInspector()
this.fillOpacityPropThree = this.$element("fillOpacityPropThree").getInspector()
this.fillRulePropTwo = this.$element("fillRulePropTwo").getInspector()
this.fillRulePropOne = this.$element("fillRulePropOne").getInspector()
this.opacityPropOne = this.$element("opacityPropOne").getInspector()
this.opacityPropTwo = this.$element("opacityPropTwo").getInspector()
this.opacityPropThree = this.$element("opacityPropThree").getInspector()
this.strokeProp = this.$element("strokeProp").getInspector()
this.strokeDashArrayProp = this.$element("strokeDashArrayProp").getInspector()
this.strokeDashOffsetProp = this.$element("strokeDashOffsetProp").getInspector()
this.strokeLineJoinPropTwo = this.$element("strokeLineJoinPropTwo").getInspector()
this.strokeLineJoinPropOne = this.$element("strokeLineJoinPropOne").getInspector()
this.strokeLineJoinPropThree = this.$element("strokeLineJoinPropThree").getInspector()
this.strokeLineCapPropOne = this.$element("strokeLineCapPropOne").getInspector()
this.strokeLineCapPropTwo = this.$element("strokeLineCapPropTwo").getInspector()
this.strokeLineCapPropThree = this.$element("strokeLineCapPropThree").getInspector()
this.strokeMiterLimitProp = this.$element("strokeMiterLimitProp").getInspector()
this.strokeOpacityPropOne = this.$element("strokeOpacityPropOne").getInspector()
this.strokeOpacityPropTwo = this.$element("strokeOpacityPropTwo").getInspector()
this.strokeOpacityPropThree = this.$element("strokeOpacityPropThree").getInspector()
this.strokeWidthProp = this.$element("strokeWidthProp").getInspector()
this.transformProp = this.$element("transformProp").getInspector()
this.idProp = this.$element("idProp").getInspector()
this.cxProp = this.$element("cxProp").getInspector()
this.cyProp = this.$element("cyProp").getInspector()
this.rxProp = this.$element("rxProp").getInspector()
this.ryProp = this.$element("ryProp").getInspector()
this.cxPropOne = this.$element("cxPropOne").getInspector()
this.cxPropTwo = this.$element("cxPropTwo").getInspector()
this.cyPropOne = this.$element("cyPropOne").getInspector()
this.cyPropTwo = this.$element("cyPropTwo").getInspector()
this.rxPropOne = this.$element("rxPropOne").getInspector()
this.rxPropTwo = this.$element("rxPropTwo").getInspector()
this.ryPropOne = this.$element("ryPropOne").getInspector()
this.ryPropTwo = this.$element("ryPropTwo").getInspector()
this.ifPropTrue = this.$element("ifPropTrue").getInspector()
this.showPropTrue = this.$element("showPropTrue").getInspector()
this.showPropFalse = this.$element("showPropFalse").getInspector()
this.showPropNone = this.$element("showPropNone").getInspector()
},
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/ellipse/router/index.css 0 → 100644
浏览文件 @ e6434d92
/**
* 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;
}
.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;
text-align: center;
}
.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: crimson;
width: 100%;
margin: 3px 5px;
}
#prop8{
background-color: khaki;
width: 100%;
margin: 3px 5px;
}
#prop9{
background-color: cornsilk;
width: 100%;
margin: 3px 5px;
}
#prop10{
background-color: yellowgreen;
width: 100%;
margin: 3px 5px;
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/ellipse/router/index.hml 0 → 100644
浏览文件 @ e6434d92
<div class="container">
<div class="sub-container">
<div class="prop-container">
<text class="title">
通用属性
</text>
<text class="sub-title">
ellipse通用属性1
</text>
<svg x="0" y="0" width="200" height="50" >
<ellipse id="prop1" cx="100" cy="20" rx="50" ry="10"
stroke="blue" stroke-width="4" fill-opacity="0.5"></ellipse>
</svg>
<text class="sub-title">
ellipse通用属性2
</text>
<svg x="0" y="0" width="200" height="50" >
<ellipse id="prop2" cx="100" cy="20" rx="50" ry="10"
stroke-width="3" fill="red" stroke="blue"></ellipse>
</svg>
<text class="sub-title">
ellipse通用属性3
</text>
<svg x="0" y="0" width="200" height="50" fill="white" fill-opacity="0">
<ellipse id="prop3" cx="100" cy="20" rx="50" ry="10"
stroke="blue" stroke-width="4" fill-opacity="0.5"></ellipse>
</svg>
<text class="sub-title">
ellipse通用属性4
</text>
<svg x="0" y="0" width="200" height="50" fill="white" fill-opacity="0">
<ellipse id="prop4" cx="100" cy="20" rx="50" ry="10"
stroke-width="3" stroke="red" stroke-dasharray="10 5" stroke-dashoffset="3"></ellipse>
</svg>
<text class="sub-title">
ellipse通用属性5
</text>
<svg x="0" y="0" width="200" height="70" fill="white" fill-opacity="0">
<ellipse id="prop5" cx="80" cy="40" rx="50" ry="15"
stroke-width="3" stroke="red" stroke-dasharray="10 5" stroke-dashoffset="3" transform="rotate(-10)"></ellipse>
</svg>
<text class="sub-title">
ellipse通用属性6
</text>
<svg x="0" y="0" width="200" height="110" fill="white" fill-opacity="0">
<ellipse id="prop6" cx="80" cy="0" rx="50" ry="15"
stroke-width="3" stroke="blue" stroke-dasharray="10 5" stroke-dashoffset="3" transform="skewY(30)"></ellipse>
</svg>
<text class="sub-title">
ellipse通用属性7
</text>
<svg x="0" y="0" width="200" height="80" fill="white" fill-opacity="0">
<ellipse id="prop7" cx="80" cy="40" rx="50" ry="15"
stroke-width="3" stroke="yellow" stroke-dasharray="10 5" stroke-dashoffset="3" transform="skewY(-10)"></ellipse>
</svg>
<text class="sub-title">
ellipse通用属性8
</text>
<svg x="0" y="0" width="200" height="50" fill="white" >
<ellipse id="prop8" cx="100" cy="20" rx="50" ry="15" fill="red" fill-rule="nonzero"></ellipse>
</svg>
<text class="sub-title">
ellipse通用属性9
</text>
<svg x="0" y="0" width="200" height="50" fill="white" >
<ellipse id="prop9" cx="100" cy="20" rx="50" ry="15" fill="pink" stroke-linejoin="miter"></ellipse>
</svg>
<text class="sub-title">
ellipse通用属性10
</text>
<svg x="0" y="0" width="200" height="50" fill="white" >
<ellipse id="prop10" cx="100" cy="20" rx="50" ry="15" fill="red" stroke-miterlimit="10"></ellipse>
</svg>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/ellipse/index.js → ace/ace_standard/src/main/js/default/pages/ellipse/router/index.js
浏览文件 @ e6434d92
......@@ -12,15 +12,11 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import prompt from '@system.prompt';
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
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或