Skip to content

X
Xts Acts

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

通知 9
Star 22
Fork 0
X
Xts Acts

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

提交 0659c371 编写于 作者: D dongwei 提交者： wanggang
浏览文件
操作

add test cases 

Signed-off-by: Ndongwei <dongwei@kaihongdigi.com>
上级 5bb6ccf0
隐藏空白更改
内联 并排
Showing with 552 addition and 534 deletion
ace/ace_standard/src/main/js/default/pages/polygon/index.css 已删除 100644 → 0
浏览文件 @ 5bb6ccf0
/**
* 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{
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{
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 已删除 100644 → 0
浏览文件 @ 5bb6ccf0
<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/prop/index.css 0 → 100644
浏览文件 @ 0659c371
.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/polygon/prop/index.hml 0 → 100644
浏览文件 @ 0659c371
<div class="container">
<div class="prop-container">
<text class="title">
polygon通用属性
</text>
<text class="sub-title">
通用属性 -- fill
</text>
<svg width="100" height="35" >
<polygon id ="fillProp" points="10,30 20,0 30,30 40,0" fill="red"></polygon >
</svg>
<text class="sub-title">
通用属性 -- fill-opacity
</text>
<div style="height: 35px;width: 150px;">
<svg width="50px" height="35px">
<polygon id ="fillOpacityPropOne" points="10,30 20,0 30,30 40,0" fill-opacity="0.5" fill="red"></polygon>
</svg>
<svg width="50px" height="35px">
<polygon id ="fillOpacityPropTwo" points="10,30 20,0 30,30 40,0" fill-opacity="1" fill="red"></polygon>
</svg>
<svg width="50px" height="35px">
<polygon id ="fillOpacityPropThree" points="10,30 20,0 30,30 40,0" fill-opacity="1.5" fill="red"></polygon>
</svg>
</div>
<text class="sub-title">
通用属性 -- fill-rule
</text>
<div style="height: 35px;width: 150px;">
<svg width="50px" height="35px">
<polygon id ="fillRulePropOne" points="10,30 20,0 30,30 40,0" fill-rule="evenodd" fill="red"></polygon>
</svg>
<svg width="50px" height="35px">
<polygon id ="fillRulePropTwo" points="10,30 20,0 30,30 40,0" fill-rule="nonzero" fill="red"></polygon>
</svg>
</div>
<text class="sub-title">
通用属性 -- opacity
</text>
<div style="height: 35px;width: 150px;">
<svg width="50px" height="35px">
<polygon id ="opacityPropOne" points="10,30 20,0 30,30 40,0" fill="red" opacity="0.5"></polygon>
</svg>
<svg width="50px" height="35px">
<polygon id ="opacityPropTwo" points="10,30 20,0 30,30 40,0" fill="red" opacity="1"></polygon>
</svg>
<svg width="50px" height="35px">
<polygon id ="opacityPropThree" points="10,30 20,0 30,30 40,0" fill="red" opacity="1.5"></polygon>
</svg>
</div>
<text class="sub-title">
通用属性 -- stroke
</text>
<svg width="100px" height="35px">
<polygon id ="strokeProp" points="10,30 20,0 30,30 40,0" fill="white" stroke = "red"></polygon>
</svg>
<text class="sub-title">
通用属性 -- stroke-dasharray
</text>
<svg width="100px" height="35px">
<polygon id ="strokeDashArrayProp" points="10,30 20,0 30,30 40,0" fill="white" stroke = "red" stroke-dasharray="2 3"></polygon>
</svg>
<text class="sub-title">
通用属性 -- stroke-dashoffset
</text>
<svg width="100px" height="35px">
<polygon id ="strokeDashOffsetProp" points="10,30 20,0 30,30 40,0" fill="white" stroke = "red" stroke-dashoffset="23"></polygon>
</svg>
<text class="sub-title">
通用属性 -- stroke-linejoin
</text>
<div style="height: 35px;width: 150px;">
<svg width="50px" height="35px">
<polygon id ="strokeLineJoinPropOne" points="10,30 20,0 30,30 40,0" fill="white"
stroke = "red" stroke-linejoin="bevel"></polygon>
</svg>
<svg width="50px" height="35px">
<polygon id ="strokeLineJoinPropTwo" points="10,30 20,0 30,30 40,0" fill="white"
stroke = "red" stroke-linejoin="miter"></polygon>
</svg>
<svg width="50px" height="35px">
<polygon id ="strokeLineJoinPropThree" points="10,30 20,0 30,30 40,0" fill="white"
stroke = "red" stroke-linejoin="round"></polygon>
</svg>
</div>
<text class="sub-title">
通用属性 -- stroke-linecap
</text>
<div style="height: 35px;width: 150px;">
<svg width="50px" height="35px" >
<polygon id ="strokeLineCapPropOne" points="10,30 20,0 30,30 40,0" fill="white"
stroke = "red" stroke-linecap="butt"></polygon>
</svg>
<svg width="50px" height="35px" >
<polygon id ="strokeLineCapPropTwo" points="10,30 20,0 30,30 40,0" fill="white"
stroke = "red" stroke-linecap="round"></polygon>
</svg>
<svg width="50px" height="35px" >
<polygon id ="strokeLineCapPropThree" points="10,30 20,0 30,30 40,0" fill="white"
stroke = "red" stroke-linecap="square"></polygon>
</svg>
</div>
<text class="sub-title">
通用属性 -- stroke-miterlimit
</text>
<svg width="100px" height="35px" >
<polygon id ="strokeMiterLimitProp" points="10,30 20,0 30,30 40,0" fill="white"
stroke = "red" stroke-miterlimit="10"></polygon>
</svg>
<text class="sub-title">
通用属性 -- stroke-opacity
</text>
<div style="height: 35px;width: 150px;">
<svg width="50px" height="35px">
<polygon id ="strokeOpacityPropOne" points="10,30 20,0 30,30 40,0" fill="white"
stroke = "red" stroke-opacity="0.5"></polygon>
</svg>
<svg width="50px" height="35px">
<polygon id ="strokeOpacityPropTwo" points="10,30 20,0 30,30 40,0" fill="white"
stroke = "red" stroke-opacity="1"></polygon>
</svg>
<svg width="50px" height="35px">
<polygon id ="strokeOpacityPropThree"points="10,30 20,0 30,30 40,0" fill="white"
stroke = "red" stroke-opacity="1.5"></polygon>
</svg>
</div>
<text class="sub-title">
通用属性 -- stroke-width
</text>
<svg width="100px" height="35px" >
<polygon id ="strokeWidthProp" points="10,30 20,0 30,30 40,0" fill="white"
stroke = "red" stroke-width="4"></polygon>
</svg>
<text class="sub-title">
通用属性 -- transform
</text>
<svg width="100px" height="40px">
<polygon id ="transformProp" points="10,30 20,0 30,30 40,0" fill="red"
transform="translate(10,5) scale(0.5 1.3) rotate(20 40 90) skewX(10) skewY(-15)"></polygon>
</svg>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="true">
</divider>
<div class="prop-container">
<text class="title">
polygon特有属性
</text>
<text class="sub-title">
特有属性-id
</text>
<svg width="100px" height="40px">
<polygon id ="idProp" points="10,30 20,0 30,30 40,0" fill="red"></polygon>
</svg>
<text class="sub-title">
特有属性- point
</text>
<svg width="100px" height="40px">
<polygon id ="pointProp" points="10,30 20,0 30,30 40,0" fill="red" stroke="blue"></polygon>
</svg>
<text class="sub-title">
特有属性-if
</text>
<svg width="100px" height="50px">
<polygon id ="ifPropTrue" points="10,30 20,0 30,30 40,0" fill="red" if="true"></polygon>
</svg>
<text class="sub-title">
特有属性-show
</text>
<svg width="200px" height="50px">
<polygon id ="showPropTrue" points="10,30 20,0 30,30 40,0" fill="red" show="true"></polygon>
<polygon id ="showPropFalse" points="10,30 20,0 30,30 40,0" fill="red" show="false"></polygon>
<polygon id ="showPropNone" points="10,30 20,0 30,30 40,0" fill="red" show=""></polygon>
</svg>
<text class="sub-title">
特有属性-elif
</text>
<svg width="200px" height="50px" fill="red" >
<polygon points="10,30 20,0 30,30 40,0" if="false"></polygon>
<polygon points="10,30 20,0 30,30 40,0" elif="true"></polygon>
<polygon points="10,30 20,0 30,30 40,0" elif="false"></polygon>
</svg>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/polygon/prop/index.js 0 → 100644
浏览文件 @ 0659c371
/**
* 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,
pointProp : 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,
pointProp : this.pointProp,
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.pointProp = this.$element("pointProp").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/polygon/router/index.css 0 → 100644
浏览文件 @ 0659c371
/**
* 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;
}
.ani-container{
flex-direction: column;
height: 100%;
flex-weight: 0.7;
align-items: center;
}
ace/ace_standard/src/main/js/default/pages/polygon/router/index.hml 0 → 100644
浏览文件 @ 0659c371
<div class="container">
<div class="sub-container">
<div class="prop-container">
<text class="title">
通用属性
</text>
<text class="sub-title">
polygon通用属性1
</text>
<svg width="200" height="50">
<polygon id="prop1" points="70,30 80,10 90,30 100,10" fill="red"
stroke="blue" fill-opacity="0.5"></polygon>>
</svg>
<text class="sub-title">
polygon通用属性2
</text>
<svg width="200" height="50">
<polygon id="prop2" points="70,30 80,10 90,30 100,10"
fill="#ad4e2a" stroke="blue" ></polygon>
</svg>
<text class="sub-title">
polygon通用属性3
</text>
<svg width="200" height="50">
<polygon id="prop3" fill="white" stroke="blue" stroke-width="2"
points="70,30 80,10 90,30 100,10" stroke-dasharray="10 5" stroke-dashoffset="3"></polygon>
</svg>
<text class="sub-title">
polygon通用属性4
</text>
<svg width="200" height="70">
<polygon id="prop4"fill="red" stroke="blue" stroke-width="2"
points="50,70 100,30 90,65 130,25" stroke-dasharray="10 5" stroke-dashoffset="3" transform="rotate(-10)"></polygon>
</svg>
<text class="sub-title">
polygon通用属性5
</text>
<svg width="200" height="60">
<polygon id="prop5" fill="red" stroke="blue" stroke-width="2"
points="50,50 100,10 90,45 130,5" stroke-dasharray="10 5" stroke-dashoffset="3" transform="skewX(20)"></polygon>
</svg>
<text class="sub-title">
polygon通用属性6
</text>
<svg width="200" height="80">
<polygon id="prop6" fill="white" stroke="blue" stroke-width="2"
points="50,50 100,10 90,45 130,5" stroke-dasharray="10 5" stroke-dashoffset="3" transform="skewY(10)"></polygon>
</svg>
<text class="sub-title">
polygon通用属性7
</text>
<svg width="200" height="50" >
<polygon id="prop7" points="70,30 80,10 90,30 100,10" fill="red"
stroke="blue" ></polygon>
</svg>
<text class="sub-title">
polygon通用属性8
</text>
<svg width="200" height="50" >
<polygon id="prop8" points="70,30 80,10 90,30 100,10" fill="red"
stroke="blue"></polygon>
</svg>
<text class="sub-title">
polygon通用属性9
</text>
<svg width="200" height="50" >
<polygon id="prop9" points="70,30 80,10 90,30 100,10" fill="red"
stroke="blue"></polygon>
</svg>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/polygon/index.js → ace/ace_standard/src/main/js/default/pages/polygon/router/index.js
浏览文件 @ 0659c371
......@@ -12,16 +12,9 @@
* 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
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或