Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Xts Acts
提交
0304fab3
X
Xts Acts
项目概览
OpenHarmony
/
Xts Acts
大约 1 年 前同步成功
通知
9
Star
22
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
X
Xts Acts
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode，发现更多精彩内容 >>
提交
0304fab3
编写于
3月 07, 2022
作者:
D
dongwei
提交者：
wanggang
3月 10, 2022
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
add test cases
Signed-off-by:
N
dongwei
<
dongwei@kaihongdigi.com
>
上级
3b943b65
变更
28
展开全部
隐藏空白更改
内联
并排
Showing
28 changed file
with
4627 addition
and
1024 deletion
+4627
-1024
ace/ace_standard/src/main/config.json
ace/ace_standard/src/main/config.json
+7
-4
ace/ace_standard/src/main/js/default/pages/circle/index.hml
ace/ace_standard/src/main/js/default/pages/circle/index.hml
+0
-189
ace/ace_standard/src/main/js/default/pages/circle/prop/index.css
..._standard/src/main/js/default/pages/circle/prop/index.css
+29
-0
ace/ace_standard/src/main/js/default/pages/circle/prop/index.hml
..._standard/src/main/js/default/pages/circle/prop/index.hml
+212
-0
ace/ace_standard/src/main/js/default/pages/circle/prop/index.js
...e_standard/src/main/js/default/pages/circle/prop/index.js
+133
-0
ace/ace_standard/src/main/js/default/pages/circle/router/index.css
...tandard/src/main/js/default/pages/circle/router/index.css
+113
-0
ace/ace_standard/src/main/js/default/pages/circle/router/index.hml
...tandard/src/main/js/default/pages/circle/router/index.hml
+81
-0
ace/ace_standard/src/main/js/default/pages/circle/router/index.js
...standard/src/main/js/default/pages/circle/router/index.js
+2
-7
ace/ace_standard/src/main/js/default/pages/rect/index.css
ace/ace_standard/src/main/js/default/pages/rect/index.css
+0
-287
ace/ace_standard/src/main/js/default/pages/rect/prop/index.css
...ce_standard/src/main/js/default/pages/rect/prop/index.css
+29
-0
ace/ace_standard/src/main/js/default/pages/rect/prop/index.hml
...ce_standard/src/main/js/default/pages/rect/prop/index.hml
+245
-0
ace/ace_standard/src/main/js/default/pages/rect/prop/index.js
...ace_standard/src/main/js/default/pages/rect/prop/index.js
+138
-0
ace/ace_standard/src/main/js/default/pages/rect/router/index.css
..._standard/src/main/js/default/pages/rect/router/index.css
+127
-0
ace/ace_standard/src/main/js/default/pages/rect/router/index.hml
..._standard/src/main/js/default/pages/rect/router/index.hml
+70
-0
ace/ace_standard/src/main/js/default/pages/rect/router/index.js
...e_standard/src/main/js/default/pages/rect/router/index.js
+3
-7
ace/ace_standard/src/main/js/default/pages/svg/index.css
ace/ace_standard/src/main/js/default/pages/svg/index.css
+0
-288
ace/ace_standard/src/main/js/default/pages/svg/index.hml
ace/ace_standard/src/main/js/default/pages/svg/index.hml
+0
-228
ace/ace_standard/src/main/js/default/pages/svg/prop/index.css
...ace_standard/src/main/js/default/pages/svg/prop/index.css
+29
-0
ace/ace_standard/src/main/js/default/pages/svg/prop/index.hml
...ace_standard/src/main/js/default/pages/svg/prop/index.hml
+231
-0
ace/ace_standard/src/main/js/default/pages/svg/prop/index.js
ace/ace_standard/src/main/js/default/pages/svg/prop/index.js
+135
-0
ace/ace_standard/src/main/js/default/pages/svg/router/index.css
...e_standard/src/main/js/default/pages/svg/router/index.css
+109
-0
ace/ace_standard/src/main/js/default/pages/svg/router/index.hml
...e_standard/src/main/js/default/pages/svg/router/index.hml
+54
-0
ace/ace_standard/src/main/js/default/pages/svg/router/index.js
...ce_standard/src/main/js/default/pages/svg/router/index.js
+2
-7
ace/ace_standard/src/main/js/default/test/List.test.js
ace/ace_standard/src/main/js/default/test/List.test.js
+4
-1
ace/ace_standard/src/main/js/default/test/circleProps.test.js
...ace_standard/src/main/js/default/test/circleProps.test.js
+993
-0
ace/ace_standard/src/main/js/default/test/commonComponentJsApi.test.js
...ard/src/main/js/default/test/commonComponentJsApi.test.js
+6
-6
ace/ace_standard/src/main/js/default/test/rectProps.test.js
ace/ace_standard/src/main/js/default/test/rectProps.test.js
+974
-0
ace/ace_standard/src/main/js/default/test/svgProps.test.js
ace/ace_standard/src/main/js/default/test/svgProps.test.js
+901
-0
未找到文件。
ace/ace_standard/src/main/config.json
浏览文件 @
0304fab3
...
...
@@ -142,9 +142,6 @@
"pages/obj_ImageBitmap/index"
,
"pages/obj_OffscreenCanvas/index"
,
"pages/obj_OffscreenCanvasRenderingContext2D/index"
,
"pages/svg/index"
,
"pages/rect/index"
,
"pages/circle/index"
,
"pages/ellipse/index"
,
"pages/path/index"
,
"pages/line/index"
,
...
...
@@ -164,7 +161,13 @@
"pages/span/prop/index"
,
"pages/menu/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"
,
"window"
:
{
...
...
ace/ace_standard/src/main/js/default/pages/circle/index.hml
已删除
100644 → 0
浏览文件 @
3b943b65
<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
浏览文件 @
0304fab3
.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
浏览文件 @
0304fab3
<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
浏览文件 @
0304fab3
/**
* 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
浏览文件 @
0304fab3
/**
* 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
浏览文件 @
0304fab3
<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
浏览文件 @
0304fab3
...
...
@@ -12,15 +12,10 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import
prompt
from
'
@system.prompt
'
;
export
default
{
data
:
{
title
:
""
},
onShow
(){
// 通用属性
var
prop1
=
this
.
$element
(
"
prop1
"
);
var
name1
=
prop1
.
dataSet
.
a
var
prop2
=
this
.
$refs
.
prop2
;
var
name2
=
prop2
.
dataSet
.
a
}
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/rect/index.css
已删除
100644 → 0
浏览文件 @
3b943b65
.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
浏览文件 @
0304fab3
.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
浏览文件 @
0304fab3
<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
浏览文件 @
0304fab3
/**
* 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
浏览文件 @
0304fab3
/**
* 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%
;
...
...
@@ -48,189 +32,24 @@
text-align
:
left
;
margin
:
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
{
flex-direction
:
column
;
height
:
100%
;
flex-weight
:
2
;
}
#prop1
{
background-color
:
mediumslateblue
;
width
:
100%
;
margin
:
3px
5px
;
}
.prop2
{
background-color
:
pink
;
width
:
100%
;
margin
:
3px
5px
;
}
.prop3
{
background-color
:
darkseagreen
;
width
:
100%
;
margin
:
3px
5px
;
}
.prop4
{
background-color
:
yellowgreen
;
width
:
100%
;
margin
:
3px
5px
;
}
.prop5
{
background-color
:
cornflowerblue
;
width
:
100%
;
margin
:
3px
5px
;
align-items
:
center
;
}
.prop6
{
background-color
:
burlywood
;
width
:
100%
;
margin
:
3px
5px
;
}
.prop7
{
background-color
:
crimson
;
width
:
100%
;
margin
:
3px
5px
;
}
.ani-container
{
flex-direction
:
column
;
height
:
100%
;
flex-weight
:
0.8
;
}
.ani1
{
color
:
#72ac33
;
stroke-width
:
55px
;
margin
:
5px
;
transform-origin
:
0%
0%
;
animation
:
ani1Go
3s
infinite
;
flex-weight
:
1
;
align-items
:
center
;
}
@keyframes
ani1Go
...
...
@@ -306,61 +125,3 @@
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
浏览文件 @
0304fab3
<div class="container">
<div class="style-container">
<text class="title">
通用样式
</text>
<text class="sub-title">
rect通用样式1
</text>
<rect class="style1" id="style1" x="0" y="-5" width="30" height="30" ></rect>
<text class="sub-title">
rect通用样式2
</text>
<svg x="0" y="0" width="100" height="100">
<rect class="style2" id="style2" x="0" y="10" width="30" height="30" fill="blue"></rect>
</svg>
<text class="sub-title">
rect通用样式3
</text>
<svg x="0" y="0" width="100" height="100" >
<rect class="style3" id="style3" x="0" y="0" width="30" height="30" fill="blue" fill-opacity="0.5"></rect>
</svg>
<text class="sub-title">
rect通用样式4
</text>
<svg x="0" y="0" width="100" height="80" >
<rect class="style4" id="style4" x="10" y="5" width="50" height="50" fill="blue" fill-opacity="0" stroke="yellow" stroke-width="4" rx="10" ry="10" ></rect>
</svg>
<text class="sub-title">
rect通用样式5
</text>
<div class="contain1">
<svg width="100" height="30">
<rect class="style5" id="style5" x="10" y="0" width="70" height="30" fill="blue" ></rect>
</svg>
<svg width="100" height="30">
<rect class="style6" id="style6" x="10" y="0" width="70" height="30" fill="blue" ></rect>
</svg>
</div>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="true">
</divider>
<div class="sub-container">
<div class="prop-container">
<text class="title">
...
...
@@ -47,23 +7,26 @@
<text class="sub-title">
rect通用属性1
</text>
<svg
x="0" y="0" width="180" height="80" viewBox="0 0 180 60" id="prop1" class="prop1" data-name ="prop1"
>
<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="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>
<text class="sub-title">
rect通用属性2
</text>
<svg x="0" y="0" width="180" height="80" viewBox="0 0 180 60" ref ="prop2" class="prop2" data-name ="prop2" >
<rect x="10" y="10" width="50" height="50" stroke="red" stroke-width="4" fill="white"></rect>
<rect x="70" y="10" width="50" height="50" stroke="red" stroke-width="4" fill="yellow" stroke-dasharray="5 3" stroke-dashoffset="10"></rect>
<rect x="130" y="10" width="50" height="50" stroke="blue" stroke-width="4" stroke-dashoffset="10" fill="white" stroke-opacity="0.6"></rect>
<svg 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="200" y="10" width="50" height="50" stroke="blue" stroke-width="4" stroke-dashoffset="10" fill="white" stroke-opacity="0.6"></rect>
</svg>
<text class="sub-title">
rect通用属性3
</text>
<svg
id="prop3" class="prop3" x="0" y="0" width="180" height="14
0" viewBox="0 0 180 140" >
<svg
width="200" height="20
0" 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>
...
...
@@ -72,10 +35,11 @@
<text class="sub-title">
rect特有属性4
</text>
<svg id="prop4" class="prop4" x="0" y="0" width="200" height="80" viewBox="0 100 60" fill="white">
<rect x="0" y="10" width="50" height="50" stroke="red" stroke-width="3"></rect>
<rect x="60" y="10" width="50" height="50" stroke="yellow" stroke-width="3" rx="10" ry="10"></rect>
<rect x="120" y="10" width="50" height="50" stroke="blue" stroke-width="3" rx="10" ry="10" ></rect>
<svg fill="white" width="400" height="80" >
<rect width="50" height="50" x="50" y="10" stroke-width="4" stroke="blue" id="rectId"></rect>
<rect width="50" height="50" x="120" y="10" stroke-width="4" stroke="blue" 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>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
...
...
@@ -88,7 +52,7 @@
rect动画样式1
</text>
<svg width="200" height="100">
<rect x="
2
0" y="10" width="60" height="60" fill="red" rx="0" ry="20">
<rect x="
8
0" y="10" width="60" height="60" fill="red" rx="0" ry="20">
<animate attributeName="rx" values="0;20" dur="1000" repeatCount="10" fill="freeze" calcMode="linear"></animate>
</rect>
</svg>
...
...
@@ -96,78 +60,11 @@
rect动画样式2
</text>
<svg width="200" height="100">
<rect x="
2
0" y="10" width="50" height="50" fill="red" rx="0" ry="20">
<rect x="
8
0" y="10" width="50" height="50" fill="red" rx="0" ry="20">
<animate attributeName="fill" from="red" to="blue" dur="1000" repeatCount="indefinite"></animate>
<animate attributeName="height" from="50" to="100" begin="500" end="1000" repeatCount="indefinite"> </animate>
</rect>
</svg>
</div>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="true">
</divider>
<div class="sub-container">
<div class="gradient-container">
<text class="title">
渐变样式
</text>
<text class="sub-title">
rect渐变样式1
</text>
<svg class="gradient1" x="0" y="0" width="200" height="80" viewBox="0 0 60 60">
<rect x="10" y="5" width="50" height="50" fill="white" fill-opacity="0" stroke="block" stroke-width="4" rx="10" ry="10" stroke-dasharray="5 3" stroke-dashoffset="3"></rect>
</svg>
<text class="sub-title">
rect渐变样式2
</text>
<svg class="gradient2" x="0" y="0" width="200" height="80" viewBox="0 0 60 60">
<rect x="10" y="5" width="50" height="50" fill="white" fill-opacity="0" stroke="blue" stroke-width="4" rx="10" ry="10" ></rect>
</svg>
<text class="sub-title">
rect渐变样式3
</text>
<svg class="gradient3" x="0" y="0" width="200" height="80" viewBox="0 0 60 60">
<rect x="10" y="5" width="50" height="50" fill="pink" fill-opacity="0" stroke="yellow" stroke-width="4" rx="10" ry="10" ></rect>
</svg>
<text class="sub-title">
rect渐变样式4
</text>
<svg class="gradient4" x="0" y="0" width="200" height="80" viewBox="0 0 60 60">
<rect x="10" y="5" width="50" height="50" fill="white" fill-opacity="0" stroke="red" stroke-width="4"></rect>
</svg>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="access-container">
<text class="title">
无障碍
</text>
<text class="sub-title">
rect无障碍1
</text>
<svg class="access1" accessibilitygroup ="true"
accessibilitytext="这是circle"
accessibilitydescription="rect"
accessibilityimportance="no-hide-descendants"
width="200" height="50" >
<rect x="10" y="5" width="200" height="50" fill="#00FF00"></rect>
</svg>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="multimode-container">
<text class="title">
多模输入
</text>
<text class="sub-title">
rect多模输入1
</text>
<svg class="multimode1" width="200" height="50" voicelabel = "voice"
subscriptflag="on" subscriptlabel="divider" scenelabel="common">
<rect x="10" y="5" width="200" height="50" fill="#978666"></rect>
</svg>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/
svg
/index.js
→
ace/ace_standard/src/main/js/default/pages/
rect/router
/index.js
浏览文件 @
0304fab3
...
...
@@ -12,15 +12,11 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import
prompt
from
'
@system.prompt
'
;
export
default
{
data
:
{
title
:
""
},
onShow
(){
// 通用属性
var
prop1
=
this
.
$element
(
"
prop1
"
);
var
name1
=
prop1
.
dataSet
.
a
var
prop2
=
this
.
$refs
.
prop2
;
var
name2
=
prop2
.
dataSet
.
a
}
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/svg/index.css
已删除
100644 → 0
浏览文件 @
3b943b65
.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
浏览文件 @
3b943b65
<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
浏览文件 @
0304fab3
.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
浏览文件 @
0304fab3
<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
浏览文件 @
0304fab3
/**
* 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
浏览文件 @
0304fab3
.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
浏览文件 @
0304fab3
<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
浏览文件 @
0304fab3
...
...
@@ -12,15 +12,10 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import
prompt
from
'
@system.prompt
'
;
export
default
{
data
:
{
title
:
""
},
onShow
(){
// 通用属性
var
prop1
=
this
.
$element
(
"
prop1
"
);
var
name1
=
prop1
.
dataSet
.
a
var
prop2
=
this
.
$refs
.
prop2
;
var
name2
=
prop2
.
dataSet
.
a
}
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/test/List.test.js
浏览文件 @
0304fab3
...
...
@@ -56,4 +56,7 @@ require('./inputProps.test.js')
require
(
'
./imageAnimatorProps.test.js
'
)
require
(
'
./textareaProps.test.js
'
)
require
(
'
./videoProps.test.js
'
)
require
(
'
./gridContainerProps.test.js
'
)
\ No newline at end of file
require
(
'
./gridContainerProps.test.js
'
)
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/circleProps.test.js
0 → 100644
浏览文件 @
0304fab3
此差异已折叠。
点击以展开。
ace/ace_standard/src/main/js/default/test/commonComponentJsApi.test.js
浏览文件 @
0304fab3
...
...
@@ -1318,7 +1318,7 @@ describe('aceJsTest', function () {
it
(
'
testSvgComponent
'
,
0
,
async
function
(
done
)
{
let
result
;
let
options
=
{
uri
:
'
pages/svg/index
'
uri
:
'
pages/svg/
router/
index
'
}
try
{
result
=
router
.
push
(
options
)
...
...
@@ -1329,7 +1329,7 @@ describe('aceJsTest', function () {
await
sleep
(
5000
)
let
pages
=
router
.
getState
();
console
.
info
(
"
[router.svg] getState
"
+
JSON
.
stringify
(
pages
));
expect
(
"
pages/svg/
"
).
assertEqual
(
pages
.
path
);
expect
(
"
pages/svg/
router/
"
).
assertEqual
(
pages
.
path
);
done
();
});
...
...
@@ -1341,7 +1341,7 @@ describe('aceJsTest', function () {
it
(
'
testRectComponent
'
,
0
,
async
function
(
done
)
{
let
result
;
let
options
=
{
uri
:
'
pages/rect/index
'
uri
:
'
pages/rect/
router/
index
'
}
try
{
result
=
router
.
push
(
options
)
...
...
@@ -1352,7 +1352,7 @@ describe('aceJsTest', function () {
await
sleep
(
5000
)
let
pages
=
router
.
getState
();
console
.
info
(
"
[router.rect] getState
"
+
JSON
.
stringify
(
pages
));
expect
(
"
pages/rect/
"
).
assertEqual
(
pages
.
path
);
expect
(
"
pages/rect/
router/
"
).
assertEqual
(
pages
.
path
);
done
();
});
...
...
@@ -1364,7 +1364,7 @@ describe('aceJsTest', function () {
it
(
'
testCircleComponent
'
,
0
,
async
function
(
done
)
{
let
result
;
let
options
=
{
uri
:
'
pages/circle/index
'
uri
:
'
pages/circle/
router/
index
'
}
try
{
result
=
router
.
push
(
options
)
...
...
@@ -1375,7 +1375,7 @@ describe('aceJsTest', function () {
await
sleep
(
5000
)
let
pages
=
router
.
getState
();
console
.
info
(
"
[router.circle] getState
"
+
JSON
.
stringify
(
pages
));
expect
(
"
pages/circle/
"
).
assertEqual
(
pages
.
path
);
expect
(
"
pages/circle/
router/
"
).
assertEqual
(
pages
.
path
);
done
();
});
...
...
ace/ace_standard/src/main/js/default/test/rectProps.test.js
0 → 100644
浏览文件 @
0304fab3
此差异已折叠。
点击以展开。
ace/ace_standard/src/main/js/default/test/svgProps.test.js
0 → 100644
浏览文件 @
0304fab3
此差异已折叠。
点击以展开。
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑！
取消
想要评论请
注册
或
登录
