Skip to content

X
Xts Acts

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

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

add test cases 

Signed-off-by: Ndongwei <dongwei@kaihongdigi.com>
上级 29dfb003
展开全部 隐藏空白更改
内联 并排
Showing with 4627 addition and 1024 deletion
ace/ace_standard/src/main/config.json
浏览文件 @ d2f0666a
...@@ -142,9 +142,6 @@ ...@@ -142,9 +142,6 @@
"pages/obj_ImageBitmap/index", "pages/obj_ImageBitmap/index",
"pages/obj_OffscreenCanvas/index", "pages/obj_OffscreenCanvas/index",
"pages/obj_OffscreenCanvasRenderingContext2D/index", "pages/obj_OffscreenCanvasRenderingContext2D/index",
"pages/svg/index",
"pages/rect/index",
"pages/circle/index",
"pages/ellipse/index", "pages/ellipse/index",
"pages/path/index", "pages/path/index",
"pages/line/index", "pages/line/index",
...@@ -164,7 +161,13 @@ ...@@ -164,7 +161,13 @@
"pages/span/prop/index", "pages/span/prop/index",
"pages/menu/prop/index", "pages/menu/prop/index",
"pages/switch/prop/index", "pages/switch/prop/index",
"pages/slider/prop/index" "pages/slider/prop/index",
"pages/svg/prop/index",
"pages/svg/router/index",
"pages/rect/prop/index",
"pages/rect/router/index",
"pages/circle/prop/index",
"pages/circle/router/index"
], ],
"name": "default", "name": "default",
"window": { "window": {
......
ace/ace_standard/src/main/js/default/pages/circle/index.hml 已删除 100644 → 0
浏览文件 @ 29dfb003
<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/prop/index.css 0 → 100644
浏览文件 @ d2f0666a
.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/circle/prop/index.hml 0 → 100644
浏览文件 @ d2f0666a
<div class="container">
<div class="prop-container">
<text class="title">
circle通用属性
</text>
<text class="sub-title">
通用属性 -- fill
</text>
<svg width="100" height="25" >
<circle id ="fillProp" cx="50" cy="12" r="10" fill="red"></circle>
</svg>
<text class="sub-title">
通用属性 -- fill-opacity
</text>
<div style="height: 25px;width: 150px;">
<svg width="50px" height="25px">
<circle id ="fillOpacityPropOne" cx="30" cy="12" r="10" fill-opacity="0.5" fill="red"></circle>
</svg>
<svg width="50px" height="25px">
<circle id ="fillOpacityPropTwo" cx="30" cy="12" r="10" fill-opacity="1" fill="red"></circle>
</svg>
<svg width="50px" height="25px">
<circle id ="fillOpacityPropThree" cx="30" cy="12" r="10" fill-opacity="1.5" fill="red"></circle>
</svg>
</div>
<text class="sub-title">
通用属性 -- fill-rule
</text>
<div style="height: 25px;width: 150px;">
<svg width="50px" height="25px">
<circle id ="fillRulePropOne" cx="30" cy="12" r="10" fill-rule="evenodd" fill="red"></circle>
</svg>
<svg width="50px" height="25px">
<circle id ="fillRulePropTwo" cx="30" cy="12" r="10" fill-rule="nonzero" fill="red"></circle>
</svg>
</div>
<text class="sub-title">
通用属性 -- opacity
</text>
<div style="height: 25px;width: 150px;">
<svg width="50px" height="25px">
<circle id ="opacityPropOne" cx="30" cy="12" r="10" fill="red" opacity="0.5"></circle>
</svg>
<svg width="50px" height="25px">
<circle id ="opacityPropTwo" cx="30" cy="12" r="10" fill="red" opacity="1"></circle>
</svg>
<svg width="50px" height="25px">
<circle id ="opacityPropThree" cx="30" cy="12" r="10" fill="red" opacity="1.5"></circle>
</svg>
</div>
<text class="sub-title">
通用属性 -- stroke
</text>
<svg width="100px" height="25px" fill="white">
<circle id ="strokeProp" cx="30" cy="12" r="10" stroke = "red"></circle>
</svg>
<text class="sub-title">
通用属性 -- stroke-dasharray
</text>
<svg width="100px" height="25px" fill="white">
<circle id ="strokeDashArrayProp" cx="30" cy="12" r="10" stroke = "red" stroke-dasharray="2 3"></circle>
</svg>
<text class="sub-title">
通用属性 -- stroke-dashoffset
</text>
<svg width="100px" height="25px" fill="white">
<circle id ="strokeDashOffsetProp" cx="30" cy="12" r="10" stroke = "red" stroke-dashoffset="23"></circle>
</svg>
<text class="sub-title">
通用属性 -- stroke-linejoin
</text>
<div style="height: 25px;width: 150px;">
<svg width="50px" height="25px" fill="white">
<circle id ="strokeDashOffsetProp" cx="30" cy="12" r="10"
stroke = "red" stroke-linejoin="bevel"></circle>
</svg>
<svg width="50px" height="25px" fill="white">
<circle id ="strokeLineJoinPropTwo" cx="30" cy="12" r="10"
stroke = "red" stroke-linejoin="miter"></circle>
</svg>
<svg width="50px" height="25px" fill="white">
<circle id ="strokeLineJoinPropThree" cx="30" cy="12" r="10"
stroke = "red" stroke-linejoin="round"></circle>
</svg>
</div>
<text class="sub-title">
通用属性 -- stroke-linecap
</text>
<div style="height: 25px;width: 150px;">
<svg width="50px" height="25px" fill="white">
<circle id ="strokeLineCapPropOne" cx="30" cy="12" r="10"
stroke = "red" stroke-linecap="butt"></circle>
</svg>
<svg width="50px" height="25px" fill="white">
<circle id ="strokeLineCapPropTwo" cx="30" cy="12" r="10"
stroke = "red" stroke-linecap="round"></circle>
</svg>
<svg width="50px" height="25px" fill="white">
<circle id ="strokeLineCapPropThree" cx="30" cy="12" r="10"
stroke = "red" stroke-linecap="square"></circle>
</svg>
</div>
<text class="sub-title">
通用属性 -- stroke-miterlimit
</text>
<svg width="100px" height="25px" fill="white">
<circle id ="strokeMiterLimitProp" cx="30" cy="12" r="10"
stroke = "red" stroke-miterlimit="10"></circle>
</svg>
<text class="sub-title">
通用属性 -- stroke-opacity
</text>
<div style="height: 25px;width: 150px;">
<svg width="50px" height="25px" fill="white">
<circle id ="strokeOpacityPropOne" cx="30" cy="12" r="10"
stroke = "red" stroke-opacity="0.5"></circle>
</svg>
<svg width="50px" height="25px" fill="white">
<circle id ="strokeOpacityPropTwo" cx="30" cy="12" r="10"
stroke = "red" stroke-opacity="1"></circle>
</svg>
<svg width="50px" height="25px" fill="white">
<circle id ="strokeOpacityPropThree" cx="30" cy="12" r="10"
stroke = "red" stroke-opacity="1.5"></circle>
</svg>
</div>
<text class="sub-title">
通用属性 -- stroke-width
</text>
<svg width="100px" height="30px" fill="white">
<circle id ="strokeWidthProp" cx="30" cy="14" r="10"
stroke = "red" stroke-width="6"></circle>
</svg>
<text class="sub-title">
通用属性 -- transform
</text>
<svg width="100px" height="100px" fill="red">
<circle id ="transformProp" cx="50" cy="50" r="20"
transform="translate(10,5) scale(0.5 1.3) rotate(20 40 90) skewX(10) skewY(-15)"></circle>
</svg>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="true">
</divider>
<div class="prop-container">
<text class="title">
circle特有属性
</text>
<text class="sub-title">
特有属性-id
</text>
<svg width="100px" height="50px">
<circle id ="idProp" cx="50" cy="25" r="20" fill="red"></circle>
</svg>
<text class="sub-title">
特有属性-cx
</text>
<svg width="200px" height="50px">
<circle id ="cxPropOne" cx="50" cy="25" r="20" fill="red"></circle>
<circle id ="cxPropTwo" cx="50%" cy="25" r="20" fill="pink"></circle>
</svg>
<text class="sub-title">
特有属性-cy
</text>
<svg width="200px" height="50px">
<circle id ="cyPropOne" cx="50" cy="25" r="20" fill="red"></circle>
<circle id ="cyPropTwo" cx="100" cy="50%" r="20" fill="pink"></circle>
</svg>
<text class="sub-title">
特有属性-r
</text>
<svg width="200px" height="50px">
<circle id ="rPropOne" cx="50" cy="25" r="20" fill="red" ></circle>
<circle id ="rPropTwo" cx="100" cy="25" r="20%" fill="pink"></circle>
</svg>
<text class="sub-title">
特有属性-if
</text>
<svg width="100px" height="50px">
<circle id ="ifPropTrue" cx="50" cy="25" r="20" fill="red" if="true"></circle>
</svg>
<text class="sub-title">
特有属性-show
</text>
<svg width="200px" height="50px">
<circle id ="showPropTrue" cx="50" cy="25" r="20" fill="red" show="true"></circle>
<circle id ="showPropFalse" cx="50" cy="25" r="20" fill="red" show="false"></circle>
<circle id ="showPropNone" cx="50" cy="25" r="20" fill="red" show=""></circle>
</svg>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/circle/prop/index.js 0 → 100644
浏览文件 @ d2f0666a
/**
* 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,
rPropOne : null,
rPropTwo : 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,
rPropOne : this.rPropOne,
rPropTwo : this.rPropTwo,
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.cxPropOne = this.$element("cxyPropOne").getInspector()
this.cxPropTwo = this.$element("cxyPropTwo").getInspector()
this.cyPropOne = this.$element("cxyPropOne").getInspector()
this.cyPropTwo = this.$element("cxyPropTwo").getInspector()
this.rPropOne = this.$element("rPropOne").getInspector()
this.rPropTwo = this.$element("rPropTwo").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/circle/router/index.css 0 → 100644
浏览文件 @ d2f0666a
/**
* 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;
}
ace/ace_standard/src/main/js/default/pages/circle/router/index.hml 0 → 100644
浏览文件 @ d2f0666a
<div class="container">
<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 id="prop1" cx="100" 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 id="prop2" cx="100" 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 id="prop3" cx="100" 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" fill-opacity="0">
<circle id="prop4" cx="100" 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 id="prop5" cx="100" cy="40" 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 id="prop6" cx="100" cy="22" 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 id="prop7" cx="80" cy="35" r="15" stroke="blue" stroke-width="4" transform="skewY(-10)"></circle>
</svg>
</div>
<text class="sub-title">
circle通用属性8
</text>
<svg x="0" y="0" width="200" height="50" fill="white" >
<circle id="prop8" cx="100" cy="25" r="15" fill="red" fill-rule="evenodd"></circle>
</svg>
<text class="sub-title">
circle通用属性9
</text>
<svg x="0" y="0" width="200" height="50" fill="white" >
<circle id="prop9" cx="100" cy="25" r="15" fill="pink" stroke-linejoin="bevel"></circle>
</svg>
<text class="sub-title">
circle通用属性10
</text>
<svg x="0" y="0" width="200" height="50" fill="white" >
<circle id="prop10" cx="100" cy="25" r="15" fill="red" stroke-miterlimit="10"></circle>
</svg>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/rect/index.js → ace/ace_standard/src/main/js/default/pages/circle/router/index.js
浏览文件 @ d2f0666a
...@@ -12,15 +12,10 @@ ...@@ -12,15 +12,10 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
import prompt from '@system.prompt';
export default { export default {
data: { data: {
title: "" 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 已删除 100644 → 0
浏览文件 @ 29dfb003
.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{
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/rect/prop/index.css 0 → 100644
浏览文件 @ d2f0666a
.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/rect/prop/index.hml 0 → 100644
浏览文件 @ d2f0666a
<div class="container">
<div class="prop-container">
<text class="title">
rect通用属性
</text>
<text class="sub-title">
通用属性 -- fill
</text>
<svg width="100" height="20" >
<rect id ="fillProp" width="80" height="15" fill="red"></rect>
</svg>
<text class="sub-title">
通用属性 -- fill-opacity
</text>
<div style="height: 20px;width: 150px;">
<svg width="50px" height="20px">
<rect id ="fillOpacityPropOne" width="90%" height="20px" fill-opacity="0.5" fill="red"></rect>
</svg>
<svg width="50px" height="20px">
<rect id ="fillOpacityPropTwo" width="90%" height="20px" fill-opacity="1" fill="red"></rect>
</svg>
<svg width="50px" height="20px">
<rect id ="fillOpacityPropThree" width="90%" height="20px" fill-opacity="1.5" fill="red"></rect>
</svg>
</div>
<text class="sub-title">
通用属性 -- fill-rule
</text>
<div style="height: 20px;width: 150px;">
<svg width="50px" height="20px">
<rect id ="fillRulePropOne" width="90%" height="20px" fill-rule="evenodd" fill="red"></rect>
</svg>
<svg width="50px" height="20px">
<rect id ="fillRulePropTwo" width="90%" height="20px" fill-rule="nonzero" fill="red"></rect>
</svg>
</div>
<text class="sub-title">
通用属性 -- opacity
</text>
<div style="height: 20px;width: 150px;">
<svg width="50px" height="20px">
<rect id ="opacityPropOne"width="90%" height="20px" fill="red" opacity="0.5"></rect>
</svg>
<svg width="50px" height="20px">
<rect id ="opacityPropTwo"width="90%" height="20px" fill="red" opacity="1"></rect>
</svg>
<svg width="50px" height="20px">
<rect id ="opacityPropThree"width="90%" height="20px" fill="red" opacity="1.5"></rect>
</svg>
</div>
<text class="sub-title">
通用属性 -- stroke
</text>
<svg width="100px" height="20px" fill="white">
<rect id ="strokeProp" width="90%" height="20px" stroke = "red"></rect>
</svg>
<text class="sub-title">
通用属性 -- stroke-dasharray
</text>
<svg width="100px" height="20px" fill="white">
<rect id ="strokeDashArrayProp" width="90%" height="20px" stroke = "red" stroke-dasharray="2 3"></rect>
</svg>
<text class="sub-title">
通用属性 -- stroke-dashoffset
</text>
<svg width="100px" height="20px" fill="white">
<rect id ="strokeDashOffsetProp" width="90%" height="20px" stroke = "red" stroke-dashoffset="23"></rect>
</svg>
<text class="sub-title">
通用属性 -- stroke-linejoin
</text>
<div style="height: 20px;width: 150px;">
<svg width="50px" height="20px" fill="white">
<rect id ="strokeLineJoinPropOne" width="90%" height="20px"
stroke = "red" stroke-linejoin="bevel"></rect>
</svg>
<svg width="50px" height="20px" fill="white">
<rect id ="strokeLineJoinPropTwo" width="90%" height="20px"
stroke = "red" stroke-linejoin="miter"></rect>
</svg>
<svg width="50px" height="20px" fill="white">
<rect id ="strokeLineJoinPropThree" width="90%" height="20px"
stroke = "red" stroke-linejoin="round"></rect>
</svg>
</div>
<text class="sub-title">
通用属性 -- stroke-linecap
</text>
<div style="height: 20px;width: 150px;">
<svg width="50px" height="20px" fill="white">
<rect id ="strokeLineCapPropOne" width="90%" height="20px"
stroke = "red" stroke-linecap="butt"></rect>
</svg>
<svg width="50px" height="20px" fill="white">
<rect id ="strokeLineCapPropTwo" width="90%" height="20px"
stroke = "red" stroke-linecap="round"></rect>
</svg>
<svg width="50px" height="20px" fill="white">
<rect id ="strokeLineCapPropThree" width="90%" height="20px"
stroke = "red" stroke-linecap="square"></rect>
</svg>
</div>
<text class="sub-title">
通用属性 -- stroke-miterlimit
</text>
<svg width="100px" height="20px" fill="white">
<rect id ="strokeMiterLimitProp" width="90%" height="20px"
stroke = "red" stroke-miterlimit="10"></rect>
</svg>
<text class="sub-title">
通用属性 -- stroke-opacity
</text>
<div style="height: 20px;width: 150px;">
<svg width="50px" height="20px" fill="white">
<rect id ="strokeOpacityPropOne"width="90%" height="20px"
stroke = "red" stroke-opacity="0.5"></rect>
</svg>
<svg width="50px" height="20px" fill="white">
<rect id ="strokeOpacityPropTwo"width="90%" height="20px"
stroke = "red" stroke-opacity="1"></rect>
</svg>
<svg width="50px" height="20px" fill="white">
<rect id ="strokeOpacityPropThree"width="90%" height="20px"
stroke = "red" stroke-opacity="1.5"></rect>
</svg>
</div>
<text class="sub-title">
通用属性 -- stroke-width
</text>
<svg width="100px" height="20px" fill="white">
<rect id ="strokeWidthProp" width="90%" height="20px"
stroke = "red" stroke-width="6"></rect>
</svg>
<text class="sub-title">
通用属性 -- transform
</text>
<svg width="100px" height="100px" fill="red">
<rect id ="transformProp" width="90%" height="100px"
transform="translate(10,5) scale(0.5 1.3) rotate(20 40 90) skewX(10) skewY(-15)"></rect>
</svg>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="true">
</divider>
<div class="prop-container">
<text class="title">
rect特有属性
</text>
<text class="sub-title">
特有属性-id
</text>
<svg width="100px" height="40px">
<rect id ="idProp" width="90px" height="20px" fill="red"></rect>
</svg>
<text class="sub-title">
特有属性- width
</text>
<div style="height: 20px;width: 150px;">
<svg width="50px" height="20px" fill="red">
<rect id ="widthPropOne" width="90px" height="20px"></rect>
</svg>
<svg width="50px" height="20px" fill="pink">
<rect id ="widthPropTwo" width="90%" height="20px"></rect>
</svg>
</div>
<text class="sub-title">
特有属性- height
</text>
<div style="height: 20px;width: 150px;">
<svg width="50px" height="20px" fill="red">
<rect id ="heightPropOne" width="90%" height="20px"></rect>
</svg>
<svg width="50px" height="20px" fill="pink">
<rect id ="heightPropTwo" width="90%" height="80%"></rect>
</svg>
</div>
<text class="sub-title">
特有属性-x
</text>
<svg width="100px" height="40px">
<svg width="100px" height="40px" fill="red" >
<rect id ="xProp" width="90%" height="20px" x="20"></rect>
</svg>
</svg>
<text class="sub-title">
特有属性-y
</text>
<svg width="100px" height="40px">
<svg width="100px" height="40px" fill="red" >
<rect id ="yProp" width="90%" height="20px" y="20"></rect>
</svg>
</svg>
<text class="sub-title">
特有属性-rx
</text>
<svg width="100px" height="40px" fill="red">
<rect id ="rxProp"width="90%" height="20px" rx="20"></rect>
</svg>
<text class="sub-title">
特有属性-ry
</text>
<svg width="100px" height="40px" fill="red">
<rect id ="rxProp"width="90%" height="20px" ry="20"></rect>
</svg>
<text class="sub-title">
特有属性-if
</text>
<svg width="100px" height="50px">
<rect id ="ifPropTrue" width="90px" height="20px" fill="red" if="true"></rect>
</svg>
<text class="sub-title">
特有属性-show
</text>
<svg width="200px" height="50px">
<rect id ="showPropTrue" width="90px" height="20px" fill="red" x="" y="20" show="true"></rect>
<rect id ="showPropFalse" width="90px" height="20px" fill="red" x="10" y="50" show="false"></rect>
<rect id ="showPropNone" width="90px" height="20px" fill="red" x="20" y="80" show=""></rect>
</svg>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/rect/prop/index.js 0 → 100644
浏览文件 @ d2f0666a
/**
* 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,
widthPropOne : null,
heightPropOne : null,
heightPropTwo : null,
widthPropTwo : null,
xProp : null,
yProp : null,
rxProp : null,
ryProp : 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,
widthPropOne : this.widthPropOne,
heightPropOne : this.heightPropOne,
heightPropTwo : this.heightPropTwo,
widthPropTwo : this.widthPropTwo,
xProp : this.xProp,
yProp : this.yProp,
rxProp : this.rxProp,
ryProp : this.ryProp,
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.widthPropOne = this.$element("widthPropOne").getInspector()
this.heightPropOne = this.$element("heightPropOne").getInspector()
this.heightPropTwo = this.$element("heightPropTwo").getInspector()
this.widthPropTwo = this.$element("widthPropTwo").getInspector()
this.xProp = this.$element("xProp").getInspector()
this.yProp = this.$element("yProp").getInspector()
this.rxProp = this.$element("rxProp").getInspector()
this.ryProp = this.$element("ryProp").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/circle/index.css → ace/ace_standard/src/main/js/default/pages/rect/router/index.css
浏览文件 @ d2f0666a
/**
* 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 { .container {
flex-direction:row; flex-direction:row;
width:100%; width:100%;
...@@ -48,189 +32,24 @@ ...@@ -48,189 +32,24 @@
text-align: left; text-align: left;
margin: 2px; margin: 2px;
padding: 2px; padding: 2px;
text-align: center;
} }
.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{ .prop-container{
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
flex-weight: 2; 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;
}
.ani-container{ .ani-container{
flex-direction: column; flex-direction: column;
height: 100%; height: 100%;
flex-weight: 0.8; flex-weight: 1;
} align-items: center;
.ani1{
color: #72ac33;
stroke-width: 55px;
margin: 5px;
transform-origin: 0% 0%;
animation: ani1Go 3s infinite;
} }
@keyframes ani1Go @keyframes ani1Go
...@@ -306,61 +125,3 @@ ...@@ -306,61 +125,3 @@
rotateX(180deg) rotateY(185deg) rotateZ(150deg) scaleX(2) scaleY(2.5) scaleZ(3.5); 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/rect/index.hml → ace/ace_standard/src/main/js/default/pages/rect/router/index.hml
浏览文件 @ d2f0666a
<div class="container"> <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="sub-container">
<div class="prop-container"> <div class="prop-container">
<text class="title"> <text class="title">
...@@ -47,23 +7,26 @@ ...@@ -47,23 +7,26 @@
<text class="sub-title"> <text class="sub-title">
rect通用属性1 rect通用属性1
</text> </text>
<svg x="0" y="0" width="180" height="80" viewBox="0 0 180 60" id="prop1" class="prop1" data-name ="prop1"> <svg width="400" height="80" viewBox="0 0 230 60" >
<rect x="10" y="10" width="50" height="50" fill-opacity="0.5"></rect> <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> <rect x="70" y="10" width="50" height="50" opacity="0.8"></rect>
<rect x="130" y="10" width="50" height="50" fill="red" fill-rule="evenodd"></rect>
<rect x="200" y="10" width="50" height="50" fill="red" stroke-linejoin="bevel"></rect>
</svg> </svg>
<text class="sub-title"> <text class="sub-title">
rect通用属性2 rect通用属性2
</text> </text>
<svg x="0" y="0" width="180" height="80" viewBox="0 0 180 60" ref ="prop2" class="prop2" data-name ="prop2" > <svg width="400" height="80" viewBox="0 0 230 60" >
<rect x="10" y="10" width="50" height="50" stroke="red" stroke-width="4" fill="white"></rect> <rect x="10" y="10" width="50" height="50" stroke="red" stroke-width="4" fill="white" stroke-miterlimit="10"></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="70" y="10" width="50" height="50" stroke="red" stroke-width="4" fill="white"></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> <rect x="130" y="10" width="50" height="50" stroke="red" stroke-width="4" fill="yellow" stroke-dasharray="5 3" stroke-dashoffset="10"></rect>
<rect x="200" y="10" width="50" height="50" stroke="blue" stroke-width="4" stroke-dashoffset="10" fill="white" stroke-opacity="0.6"></rect>
</svg> </svg>
<text class="sub-title"> <text class="sub-title">
rect通用属性3 rect通用属性3
</text> </text>
<svg id="prop3" class="prop3" x="0" y="0" width="180" height="140" viewBox="0 0 180 140" > <svg width="200" height="200" 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="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="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="10" y="70" width="50" height="50" stroke="red" stroke-width="4" fill="white" transform="skewX(10)"></rect>
...@@ -72,10 +35,11 @@ ...@@ -72,10 +35,11 @@
<text class="sub-title"> <text class="sub-title">
rect特有属性4 rect特有属性4
</text> </text>
<svg id="prop4" class="prop4" x="0" y="0" width="200" height="80" viewBox="0 100 60" fill="white"> <svg fill="white" width="400" height="80" >
<rect x="0" y="10" width="50" height="50" stroke="red" stroke-width="3"></rect> <rect width="50" height="50" x="50" y="10" stroke-width="4" stroke="blue" id="rectId"></rect>
<rect x="60" y="10" width="50" height="50" stroke="yellow" stroke-width="3" rx="10" ry="10"></rect> <rect width="50" height="50" x="120" y="10" stroke-width="4" stroke="blue" rx="10" ry="10"></rect>
<rect x="120" y="10" width="50" height="50" stroke="blue" stroke-width="3" rx="10" ry="10" ></rect> <rect width="50" height="50" x="190" y="10" stroke-width="10" fill="red" stroke="blue" rx="10" ry="10"></rect>
<rect width="50" height="50" x="260" y="10" stroke-width="10" stroke="red" rx="10" ry="10" stroke-dasharray="5 3" stroke-dashoffset="3"></rect>
</svg> </svg>
</div> </div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false"> <divider style="color: #000000; stroke-width: 2px;" vertical="false">
...@@ -88,7 +52,7 @@ ...@@ -88,7 +52,7 @@
rect动画样式1 rect动画样式1
</text> </text>
<svg width="200" height="100"> <svg width="200" height="100">
<rect x="20" y="10" width="60" height="60" fill="red" rx="0" ry="20"> <rect x="80" 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> <animate attributeName="rx" values="0;20" dur="1000" repeatCount="10" fill="freeze" calcMode="linear"></animate>
</rect> </rect>
</svg> </svg>
...@@ -96,78 +60,11 @@ ...@@ -96,78 +60,11 @@
rect动画样式2 rect动画样式2
</text> </text>
<svg width="200" height="100"> <svg width="200" height="100">
<rect x="20" y="10" width="50" height="50" fill="red" rx="0" ry="20"> <rect x="80" 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="fill" from="red" to="blue" dur="1000" repeatCount="indefinite"></animate>
<animate attributeName="height" from="50" to="100" begin="500" end="1000" repeatCount="indefinite"> </animate> <animate attributeName="height" from="50" to="100" begin="500" end="1000" repeatCount="indefinite"> </animate>
</rect> </rect>
</svg> </svg>
</div> </div>
</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> </div>
ace/ace_standard/src/main/js/default/pages/svg/index.js → ace/ace_standard/src/main/js/default/pages/rect/router/index.js
浏览文件 @ d2f0666a
...@@ -12,15 +12,11 @@ ...@@ -12,15 +12,11 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
import prompt from '@system.prompt';
export default { export default {
data: { data: {
title: "" 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 已删除 100644 → 0
浏览文件 @ 29dfb003
.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{
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/svg/index.hml 已删除 100644 → 0
浏览文件 @ 29dfb003
<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/prop/index.css 0 → 100644
浏览文件 @ d2f0666a
.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/svg/prop/index.hml 0 → 100644
浏览文件 @ d2f0666a
<div class="container">
<div class="prop-container">
<text class="title">
svg通用属性
</text>
<text class="sub-title">
通用属性 -- fill
</text>
<svg id ="fillProp" width="100" height="20" fill="red">
<rect width="80" height="15"></rect>
</svg>
<text class="sub-title">
通用属性 -- fill-opacity
</text>
<div style="height: 20px;width: 150px;">
<svg id ="fillOpacityPropOne" width="50px" height="20px" fill-opacity="0.5" fill="red">
<rect width="90%" height="20px" ></rect>
</svg>
<svg id ="fillOpacityPropTwo" width="50px" height="20px" fill-opacity="1" fill="red">
<rect width="90%" height="20px" ></rect>
</svg>
<svg id ="fillOpacityPropThree" width="50px" height="20px" fill-opacity="1.5" fill="red">
<rect width="90%" height="20px" ></rect>
</svg>
</div>
<text class="sub-title">
通用属性 -- fill-rule
</text>
<div style="height: 20px;width: 150px;">
<svg id ="fillRulePropOne" width="50px" height="20px" fill-rule="evenodd" fill="red">
<rect width="90%" height="20px" ></rect>
</svg>
<svg id ="fillRulePropTwo" width="50px" height="20px" fill-rule="nonzero" fill="red">
<rect width="90%" height="20px" ></rect>
</svg>
</div>
<text class="sub-title">
通用属性 -- opacity
</text>
<div style="height: 20px;width: 150px;">
<svg id ="opacityPropOne" width="50px" height="20px" opacity="0.5">
<rect width="90%" height="20px" fill="red"></rect>
</svg>
<svg id ="opacityPropTwo" width="50px" height="20px" opacity="1">
<rect width="90%" height="20px" fill="red"></rect>
</svg>
<svg id ="opacityPropThree" width="50px" height="20px" opacity="1.5">
<rect width="90%" height="20px" fill="red"></rect>
</svg>
</div>
<text class="sub-title">
通用属性 -- stroke
</text>
<svg id ="strokeProp" width="100px" height="20px" stroke = "red">
<rect width="90%" height="20px" fill="white"></rect>
</svg>
<text class="sub-title">
通用属性 -- stroke-dasharray
</text>
<svg id ="strokeDashArrayProp" width="100px" height="20px" stroke = "red" stroke-dasharray="2 3">
<rect width="90%" height="20px" fill="white"></rect>
</svg>
<text class="sub-title">
通用属性 -- stroke-dashoffset
</text>
<svg id ="strokeDashOffsetProp" width="100px" height="20px" stroke = "red" stroke-dashoffset="23">
<rect width="90%" height="20px" fill="white"></rect>
</svg>
<text class="sub-title">
通用属性 -- stroke-linejoin
</text>
<div style="height: 20px;width: 150px;">
<svg id ="strokeLineJoinPropOne" width="50px" height="20px" stroke = "red" stroke-linejoin="bevel">
<rect width="90%" height="20px" fill="white"></rect>
</svg>
<svg id ="strokeLineJoinPropTwo" width="50px" height="20px" stroke = "red" stroke-linejoin="miter">
<rect width="90%" height="20px" fill="white"></rect>
</svg>
<svg id ="strokeLineJoinPropThree" width="50px" height="20px" stroke = "red" stroke-linejoin="round">
<rect width="90%" height="20px" fill="white"></rect>
</svg>
</div>
<text class="sub-title">
通用属性 -- stroke-linecap
</text>
<div style="height: 20px;width: 150px;">
<svg id ="strokeLineCapPropOne" width="50px" height="20px" stroke = "red" stroke-linecap="butt">
<rect width="90%" height="20px" fill="white"></rect>
</svg>
<svg id ="strokeLineCapPropTwo" width="50px" height="20px" stroke = "red" stroke-linecap="round">
<rect width="90%" height="20px" fill="white"></rect>
</svg>
<svg id ="strokeLineCapPropThree" width="50px" height="20px" stroke = "red" stroke-linecap="square">
<rect width="90%" height="20px" fill="white"></rect>
</svg>
</div>
<text class="sub-title">
通用属性 -- stroke-miterlimit
</text>
<svg id ="strokeMiterLimitProp" width="100px" height="20px" stroke = "red" stroke-miterlimit="10">
<rect width="90%" height="20px" fill="white"></rect>
</svg>
<text class="sub-title">
通用属性 -- stroke-opacity
</text>
<div style="height: 20px;width: 150px;">
<svg id ="strokeOpacityPropOne" width="50px" height="20px" stroke = "red" stroke-opacity="0.5">
<rect width="90%" height="20px" fill="white"></rect>
</svg>
<svg id ="strokeOpacityPropTwo" width="50px" height="20px" stroke = "red" stroke-opacity="1">
<rect width="90%" height="20px" fill="white"></rect>
</svg>
<svg id ="strokeOpacityPropThree" width="50px" height="20px" stroke = "red" stroke-opacity="1.5">
<rect width="90%" height="20px" fill="white"></rect>
</svg>
</div>
<text class="sub-title">
通用属性 -- stroke-width
</text>
<svg id ="strokeWidthProp" width="100px" height="20px" stroke = "red" stroke-width="6">
<rect width="90%" height="20px" fill="white"></rect>
</svg>
<text class="sub-title">
通用属性 -- transform
</text>
<svg id ="transformProp" width="100px" height="20px"
transform="translate(10,5) scale(0.5 1.3) rotate(20 40 90) skewX(10) skewY(-15)">
<rect width="90%" height="20px" fill="red"></rect>
</svg>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="true">
</divider>
<div class="prop-container">
<text class="title">
svg特有属性
</text>
<text class="sub-title">
特有属性-id
</text>
<svg id ="idProp" width="100px" height="40px">
</svg>
<text class="sub-title">
特有属性- width
</text>
<div style="height: 20px;width: 150px;">
<svg id ="widthPropOne" width="50px" height="20px">
<rect width="90%" height="20px" fill="red"></rect>
</svg>
<svg id ="widthPropTwo" width="50%" height="20px">
<rect width="90%" height="20px" fill="red"></rect>
</svg>
</div>
<text class="sub-title">
特有属性- height
</text>
<div style="height: 20px;width: 150px;">
<svg id ="heightPropOne" width="50px" height="20px">
<rect width="90%" height="20px" fill="red"></rect>
</svg>
<svg id ="heightPropTwo" width="50px" height="20%">
<rect width="90%" height="20px" fill="red"></rect>
</svg>
</div>
<text class="sub-title">
特有属性-x
</text>
<svg width="100px" height="40px">
<svg id ="xProp" width="100px" height="40px" fill="red" x="20">
<rect width="90%" height="20px" fill="red"></rect>
</svg>
</svg>
<text class="sub-title">
特有属性-y
</text>
<svg width="100px" height="40px">
<svg id ="yProp" width="100px" height="40px" fill="red" y="20">
<rect width="90%" height="20px" fill="red"></rect>
</svg>
</svg>
<text class="sub-title">
特有属性-viewBox
</text>
<svg id ="viewBoxProp" width="100px" height="40px" viewBox = "0 0 20 20">
<rect width="90%" height="20px" fill="red"></rect>
</svg>
<text class="sub-title">
特有属性-if
</text>
<svg id ="ifPropTrue" width="100px" height="50px" if="true">
<rect width="90px" height="20px" fill="red" ></rect>
</svg>
<text class="sub-title">
特有属性-show
</text>
<svg width="200px" height="200px">
<svg id ="showPropTrue" width="100px" height="40px" x="" y="20" show="true">
<rect width="90%" height="20px" fill="red"></rect>
</svg>
<svg id ="showPropFalse" width="100px" height="40px" x="10" y="50" show="false">
<rect width="90%" height="20px" fill="red"></rect>
</svg>
<svg id ="showPropNone" width="100px" height="40px" x="20" y="80" show="">
<rect width="90%" height="20px" fill="red"></rect>
</svg>
</svg>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/svg/prop/index.js 0 → 100644
浏览文件 @ d2f0666a
/**
* 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,
widthPropOne : null,
heightPropOne : null,
heightPropTwo : null,
widthPropTwo : null,
xProp : null,
yProp : null,
viewBoxProp : 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,
widthPropOne : this.widthPropOne,
heightPropOne : this.heightPropOne,
heightPropTwo : this.heightPropTwo,
widthPropTwo : this.widthPropTwo,
xProp : this.xProp,
yProp : this.yProp,
viewBoxProp : this.viewBoxProp,
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.widthPropOne = this.$element("widthPropOne").getInspector()
this.heightPropOne = this.$element("heightPropOne").getInspector()
this.heightPropTwo = this.$element("heightPropTwo").getInspector()
this.widthPropTwo = this.$element("widthPropTwo").getInspector()
this.xProp = this.$element("xProp").getInspector()
this.yProp = this.$element("yProp").getInspector()
this.viewBoxProp = this.$element("viewBoxProp").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/svg/router/index.css 0 → 100644
浏览文件 @ d2f0666a
.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;
text-align: center;
}
.prop-container{
flex-direction: column;
height: 100%;
flex-weight: 1;
align-items: center;
}
@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)
}
}
@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);
}
}
ace/ace_standard/src/main/js/default/pages/svg/router/index.hml 0 → 100644
浏览文件 @ d2f0666a
<div class="container">
<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="400" height="80" viewBox="0 0 230 60" >
<rect x="10" y="10" width="50" height="50" fill-opacity="0.5"></rect>
<rect x="70" y="10" width="50" height="50" opacity="0.8"></rect>
<rect x="130" y="10" width="50" height="50" fill="red" fill-rule="evenodd"></rect>
<rect x="190" y="10" width="50" height="50" fill="red" stroke-linejoin="bevel"></rect>
</svg>
<text class="sub-title">
svg通用属性2
</text>
<svg x="0" y="0" width="400" height="80" viewBox="0 0 230 60" >
<rect x="10" y="10" width="50" height="50" stroke="red" stroke-width="4" fill="white" stroke-miterlimit="10"></rect>
<rect x="70" y="10" width="50" height="50" stroke="red" stroke-width="4" fill="white"></rect>
<rect x="130" y="10" width="50" height="50" stroke="red" stroke-width="4" fill="yellow" stroke-dasharray="5 3" stroke-dashoffset="10"></rect>
<rect x="190" 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="200" 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">
svg特有属性4
</text>
<svg width="400" height="300">
<svg width="400" height="200" viewBox="0 0 100 100">
<rect x="10" y="10" width="80" height="80" fill="#00FF00"></rect>
</svg>
<svg x="0" y="0" width="400" height="200" viewBox="0 0 200 200">
<rect x="10" y="10" width="80" height="80" fill="red"></rect>
</svg>
<svg x="0" y="0" width="400" height="200" viewBox="0 0 400 400">
<rect x="10" y="10" width="80" height="80" fill="blue"></rect>
</svg>
</svg>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/circle/index.js → ace/ace_standard/src/main/js/default/pages/svg/router/index.js
浏览文件 @ d2f0666a
...@@ -12,15 +12,10 @@ ...@@ -12,15 +12,10 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
import prompt from '@system.prompt';
export default { export default {
data: { data: {
title: "" 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/test/List.test.js
浏览文件 @ d2f0666a
...@@ -56,4 +56,7 @@ require('./inputProps.test.js') ...@@ -56,4 +56,7 @@ require('./inputProps.test.js')
require('./imageAnimatorProps.test.js') require('./imageAnimatorProps.test.js')
require('./textareaProps.test.js') require('./textareaProps.test.js')
require('./videoProps.test.js') require('./videoProps.test.js')
require('./gridContainerProps.test.js') require('./gridContainerProps.test.js')
\ No newline at end of file require('./svgProps.test.js')
require('./rectProps.test.js')
require('./circleProps.test.js')
\ No newline at end of file
ace/ace_standard/src/main/js/default/test/commonComponentJsApi.test.js
浏览文件 @ d2f0666a
...@@ -1318,7 +1318,7 @@ describe('aceJsTest', function () { ...@@ -1318,7 +1318,7 @@ describe('aceJsTest', function () {
it('testSvgComponent', 0, async function (done) { it('testSvgComponent', 0, async function (done) {
let result; let result;
let options = { let options = {
uri: 'pages/svg/index' uri: 'pages/svg/router/index'
} }
try { try {
result = router.push(options) result = router.push(options)
...@@ -1329,7 +1329,7 @@ describe('aceJsTest', function () { ...@@ -1329,7 +1329,7 @@ describe('aceJsTest', function () {
await sleep(5000) await sleep(5000)
let pages = router.getState(); let pages = router.getState();
console.info("[router.svg] getState" + JSON.stringify(pages)); console.info("[router.svg] getState" + JSON.stringify(pages));
expect("pages/svg/").assertEqual(pages.path); expect("pages/svg/router/").assertEqual(pages.path);
done(); done();
}); });
...@@ -1341,7 +1341,7 @@ describe('aceJsTest', function () { ...@@ -1341,7 +1341,7 @@ describe('aceJsTest', function () {
it('testRectComponent', 0, async function (done) { it('testRectComponent', 0, async function (done) {
let result; let result;
let options = { let options = {
uri: 'pages/rect/index' uri: 'pages/rect/router/index'
} }
try { try {
result = router.push(options) result = router.push(options)
...@@ -1352,7 +1352,7 @@ describe('aceJsTest', function () { ...@@ -1352,7 +1352,7 @@ describe('aceJsTest', function () {
await sleep(5000) await sleep(5000)
let pages = router.getState(); let pages = router.getState();
console.info("[router.rect] getState" + JSON.stringify(pages)); console.info("[router.rect] getState" + JSON.stringify(pages));
expect("pages/rect/").assertEqual(pages.path); expect("pages/rect/router/").assertEqual(pages.path);
done(); done();
}); });
...@@ -1364,7 +1364,7 @@ describe('aceJsTest', function () { ...@@ -1364,7 +1364,7 @@ describe('aceJsTest', function () {
it('testCircleComponent', 0, async function (done) { it('testCircleComponent', 0, async function (done) {
let result; let result;
let options = { let options = {
uri: 'pages/circle/index' uri: 'pages/circle/router/index'
} }
try { try {
result = router.push(options) result = router.push(options)
...@@ -1375,7 +1375,7 @@ describe('aceJsTest', function () { ...@@ -1375,7 +1375,7 @@ describe('aceJsTest', function () {
await sleep(5000) await sleep(5000)
let pages = router.getState(); let pages = router.getState();
console.info("[router.circle] getState" + JSON.stringify(pages)); console.info("[router.circle] getState" + JSON.stringify(pages));
expect("pages/circle/").assertEqual(pages.path); expect("pages/circle/router/").assertEqual(pages.path);
done(); done();
}); });
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或