Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Xts Acts
提交
469b9c9c
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看板
提交
469b9c9c
编写于
2年前
作者:
D
dongwei
提交者:
wanggang
2年前
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
add test cases
Signed-off-by:
N
dongwei
<
dongwei@kaihongdigi.com
>
上级
bb6e8ced
OpenHarmony-3.1-Release
OpenHarmony-3.1-API8-SDK-Public
OpenHarmony-3.1-API9-SDK-Canary
OpenHarmony-v3.1.7-Release
OpenHarmony-v3.1.6-Release
OpenHarmony-v3.1.5-Release
OpenHarmony-v3.1.4-Release
OpenHarmony-v3.1.3-Release
OpenHarmony-v3.1.2-Release
OpenHarmony-v3.1.1-Release
OpenHarmony-v3.1-Release
无相关合并请求
变更
7
隐藏空白更改
内联
并排
Showing
7 changed file
with
485 addition
and
169 deletion
+485
-169
ace/ace_standard/src/main/js/default/pages/path/index.hml
ace/ace_standard/src/main/js/default/pages/path/index.hml
+0
-161
ace/ace_standard/src/main/js/default/pages/path/prop/index.css
...ce_standard/src/main/js/default/pages/path/prop/index.css
+29
-0
ace/ace_standard/src/main/js/default/pages/path/prop/index.hml
...ce_standard/src/main/js/default/pages/path/prop/index.hml
+217
-0
ace/ace_standard/src/main/js/default/pages/path/prop/index.js
...ace_standard/src/main/js/default/pages/path/prop/index.js
+117
-0
ace/ace_standard/src/main/js/default/pages/path/router/index.css
..._standard/src/main/js/default/pages/path/router/index.css
+53
-0
ace/ace_standard/src/main/js/default/pages/path/router/index.hml
..._standard/src/main/js/default/pages/path/router/index.hml
+69
-0
ace/ace_standard/src/main/js/default/pages/path/router/index.js
...e_standard/src/main/js/default/pages/path/router/index.js
+0
-8
未找到文件。
ace/ace_standard/src/main/js/default/pages/path/index.hml
已删除
100644 → 0
浏览文件 @
bb6e8ced
<div class="container">
<div class="prop-container">
<text class="title">
通用属性
</text>
<text class="sub-title">
path通用属性1
</text>
<svg width="200" height="120">
<path id="prop1" data-name ="prop1" d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z"
stroke="blue" stroke-width="3" fill="red" fill-opacity="0.5">
</path>
</svg>
<text class="sub-title">
path通用属性2
</text>
<svg width="200" height="120">
<path ref ="prop2" data-name ="prop2" d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z"
stroke="red" stroke-width="3" fill="white" stroke-dasharray="10 5" stroke-dashoffset="3">
</path>
</svg>
<text class="sub-title">
path通用属性3
</text>
<!-- <svg width="200" height="200">-->
<!-- <path d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z"-->
<!-- stroke="red" stroke-width="3" fill="white" stroke-dasharray="10 5" stroke-dashoffset="3" transform="skewY(-10)">-->
<!-- </path>-->
<!-- <path d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z"-->
<!-- stroke="red" stroke-width="3" fill="white" stroke-dasharray="10 5" stroke-dashoffset="3" transform="rotate(-10)">-->
<!-- </path>-->
<!-- </svg>-->
<svg fill="white" width="200" height="200">
<path fill="none" stroke="blue" stroke-width="3" d="m10,60 c0,-100 100,100 100,0 c0,-100 -100,100 -100,0 z"></path>
<path fill="none" stroke="blue" stroke-width="3" d="m10,130 c0,-100 100,100 100,0 c0,-100 -100,100 -100,0 z"></path>
<!-- <path fill="none" stroke="blue" stroke-width="3" d="m10,200 c0,-100 100,100 100,0 c0,-100 -100,100 -100,0 z"></path>-->
</svg>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<text class="sub-title">
path动画属性
</text>
<svg fill="white" width="200" height="200">
<path fill="none" stroke="green" stroke-width="3" d="m10,60 c0,-100 100,100 100,0 c0,-100 -100,100 -100,0 z"></path>
<path fill="none" stroke="green" stroke-width="3" d="m10,130 c0,-100 100,100 100,0 c0,-100 -100,100 -100,0 z"></path>
<path fill="red" d="M-5,-5 L10,0 L-5,5 L0,0 Z">
<animateMotion dur="2000" repeatCount="indefinite" rotate="auto-reverse"path="m10,60 c0,-100 100,100 100,0 c0,-100 -100,100 -100,0 z">
</animateMotion>
</path>
<path fill="red" d="M-5,-5 L10,0 L-5,5 L0,0 Z">
<animateMotion dur="2000" repeatCount="indefinite" rotate="45"path="m10,130 c0,-100 100,100 100,0 c0,-100 -100,100 -100,0 z"></animateMotion>
</path>
</svg>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="true">
</divider>
<div class="sub-container">
<div class="access-container">
<text class="title">
无障碍
</text>
<text class="sub-title">
path无障碍1
</text>
<svg class="access1" accessibilitygroup ="true"
accessibilitytext="这是path"
accessibilitydescription="点击此按键会弹出一个对话框"
ccessibilityimportance="no-hide-descendants"
width="200" height="100">
<path d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z"
fill="white" fill-opacity="0" stroke-width="3" fill="red" stroke="yellow">
</path>
</svg>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="multimode-container">
<text class="title">
多模输入
</text>
<text class="sub-title">
path多模输入1
</text>
<svg class="multimode1" width="100" height="100" voicelabel = "voice"
subscriptflag="on" subscriptlabel="divider" scenelabel="common">
<path d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z"
stroke="#978666" stroke-width="3" fill="white" fill-opacity="0">
</path>
</svg>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="ani-container">
<text class="title">
动画样式
</text>
<text class="sub-title">
path动画样式1
</text>
<svg class="ani1" width="100" height="100">
<path d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z"
stroke="blue" stroke-width="3" fill="red">
</path>
</svg>
<text class="sub-title">
path动画样式2
</text>
<svg class="ani2" width="100" height="100">
<path d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z"
stroke="blue" stroke-width="3" fill="red">
</path>
</svg>
</div>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="true">
</divider>
<div class="sub-container">
<div class="gradient-container">
<text class="title">
渐变样式
</text>
<text class="sub-title">
path渐变样式1
</text>
<svg class="gradient1" width="200" height="100">
<path d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z"
fill="white" fill-opacity="0" stroke-width="3" fill="red" stroke="block">
</path>
</svg>
<text class="sub-title">
path渐变样式2
</text>
<svg class="gradient2" width="200" height="100">
<path d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z"
fill="white" fill-opacity="0" stroke-width="3" fill="red" stroke="blue">
</path>
</svg>
<text class="sub-title">
path渐变样式3
</text>
<svg class="gradient3" width="200" height="100">
<path d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z"
fill="white" fill-opacity="0" stroke-width="3" fill="red" stroke="yellow">
</path>
</svg>
<text class="sub-title">
path渐变样式4
</text>
<svg class="gradient4" width="200" height="100">
<path d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z"
fill="white" fill-opacity="0" stroke-width="3" fill="red" stroke="red">
</path>
</svg>
</div>
</div>
</div>
This diff is collapsed.
Click to expand it.
ace/ace_standard/src/main/js/default/pages/path/prop/index.css
0 → 100644
浏览文件 @
469b9c9c
.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
;
}
This diff is collapsed.
Click to expand it.
ace/ace_standard/src/main/js/default/pages/path/prop/index.hml
0 → 100644
浏览文件 @
469b9c9c
<div class="container">
<div class="prop-container">
<text class="title">
path通用属性
</text>
<text class="sub-title">
通用属性 -- fill
</text>
<svg width="100" height="25">
<path id="fillProp" d="m10,12 c0,-40 40,40 40,0 c0,-40 -40,40 -40,0 z"
fill="red">
</path>
</svg>
<text class="sub-title">
通用属性 -- fill-opacity
</text>
<div style="height: 25px;width: 220px;">
<svg width="70px" height="25px" >
<path id ="fillOpacityPropOne" d="m10,12 c0,-40 40,40 40,0 c0,-40 -40,40 -40,0 z"
fill-opacity="0.5" fill="red"></path>
</svg>
<svg width="70px" height="25px" >
<path id ="fillOpacityPropTwo" d="m10,12 c0,-40 40,40 40,0 c0,-40 -40,40 -40,0 z"
fill-opacity="1" fill="red"></path>
</svg>
<svg width="80px" height="25px" >
<path id ="fillOpacityPropThree" d="m10,12 c0,-40 40,40 40,0 c0,-40 -40,40 -40,0 z"
fill-opacity="1.5" fill="red"></path>
</svg>
</div>
<text class="sub-title">
通用属性 -- fill-rule
</text>
<div style="height: 25px;width: 150px;">
<svg width="70px" height="25px" >
<path id ="fillRulePropOne" d="m10,12 c0,-40 40,40 40,0 c0,-40 -40,40 -40,0 z"
fill-rule="evenodd" fill="red"></path>
</svg>
<svg width="70px" height="25px" >
<path id ="fillRulePropTwo" d="m10,12 c0,-40 40,40 40,0 c0,-40 -40,40 -40,0 z"
fill-rule="nonzero" fill="red"></path>
</svg>
</div>
<text class="sub-title">
通用属性 -- opacity
</text>
<div style="height: 25px;width: 220px;">
<svg width="70px" height="25px">
<path id ="opacityPropOne" d="m10,12 c0,-40 40,40 40,0 c0,-40 -40,40 -40,0 z"
fill="red" opacity="0.5"></path>
</svg>
<svg width="70px" height="25px">
<path id ="opacityPropTwo" d="m10,12 c0,-40 40,40 40,0 c0,-40 -40,40 -40,0 z"
fill="red" opacity="1"></path>
</svg>
<svg width="80px" height="25px">
<path id ="opacityPropThree" d="m10,12 c0,-40 40,40 40,0 c0,-40 -40,40 -40,0 z"
fill="red" opacity="1.5"></path>
</svg>
</div>
<text class="sub-title">
通用属性 -- stroke
</text>
<svg width="100px" height="25px" fill="white">
<path id ="strokeProp" d="m10,12 c0,-40 40,40 40,0 c0,-40 -40,40 -40,0 z" stroke = "red"></path>
</svg>
<text class="sub-title">
通用属性 -- stroke-dasharray
</text>
<svg width="100px" height="25px" fill="white">
<path id ="strokeDashArrayProp" d="m10,12 c0,-40 40,40 40,0 c0,-40 -40,40 -40,0 z"
stroke = "red" stroke-dasharray="2 3"></path>
</svg>
<text class="sub-title">
通用属性 -- stroke-dashoffset
</text>
<svg width="100px" height="25px" fill="white">
<path id ="strokeDashOffsetProp" d="m10,12 c0,-40 40,40 40,0 c0,-40 -40,40 -40,0 z"
stroke = "red" stroke-dashoffset="23"></path>
</svg>
<text class="sub-title">
通用属性 -- stroke-linejoin
</text>
<div style="height: 25px;width: 150px;">
<svg width="50px" height="25px" fill="white">
<path id ="strokeLineJoinPropOne"d="m10,12 c0,-40 40,40 40,0 c0,-40 -40,40 -40,0 z"
stroke = "red" stroke-linejoin="bevel"></path>
</svg>
<svg width="50px" height="25px" fill="white">
<path id ="strokeLineJoinPropTwo"d="m10,12 c0,-40 40,40 40,0 c0,-40 -40,40 -40,0 z"
stroke = "red" stroke-linejoin="miter"></path>
</svg>
<svg width="50px" height="25px" fill="white">
<path id ="strokeLineJoinPropThree" d="m10,12 c0,-40 40,40 40,0 c0,-40 -40,40 -40,0 z"
stroke = "red" stroke-linejoin="round"></path>
</svg>
</div>
<text class="sub-title">
通用属性 -- stroke-linecap
</text>
<div style="height: 25px;width: 150px;">
<svg width="50px" height="25px" fill="white">
<path id ="strokeLineCapPropOne" d="m10,12 c0,-40 40,40 40,0 c0,-40 -40,40 -40,0 z"
stroke = "red" stroke-linecap="butt"></path>
</svg>
<svg width="50px" height="25px" fill="white">
<path id ="strokeLineCapPropTwo" d="m10,12 c0,-40 40,40 40,0 c0,-40 -40,40 -40,0 z"
stroke = "red" stroke-linecap="round"></path>
</svg>
<svg width="50px" height="25px" fill="white">
<path id ="strokeLineCapPropThree" d="m10,12 c0,-40 40,40 40,0 c0,-40 -40,40 -40,0 z"
stroke = "red" stroke-linecap="square"></path>
</svg>
</div>
<text class="sub-title">
通用属性 -- stroke-miterlimit
</text>
<svg width="100px" height="25px" fill="white">
<path id ="strokeMiterLimitProp" d="m10,12 c0,-40 40,40 40,0 c0,-40 -40,40 -40,0 z"
stroke = "red" stroke-miterlimit="10"></path>
</svg>
<text class="sub-title">
通用属性 -- stroke-opacity
</text>
<div style="height: 30px;width: 150px;">
<svg width="50px" height="25px" fill="white">
<path id ="strokeOpacityPropOne" d="m10,12 c0,-40 40,40 40,0 c0,-40 -40,40 -40,0 z"
stroke = "red" stroke-opacity="0.5"></path>
</svg>
<svg width="50px" height="25px" fill="white">
<path id ="strokeOpacityPropTwo" d="m10,12 c0,-40 40,40 40,0 c0,-40 -40,40 -40,0 z"
stroke = "red" stroke-opacity="1"></path>
</svg>
<svg width="50px" height="25px" fill="white">
<path id ="strokeOpacityPropThree" d="m10,12 c0,-40 40,40 40,0 c0,-40 -40,40 -40,0 z"
stroke = "red" stroke-opacity="1.5"></path>
</svg>
</div>
<text class="sub-title">
通用属性 -- stroke-width
</text>
<svg width="100px" height="30px" fill="white">
<path id ="strokeWidthProp" d="m10,14 c0,-40 40,40 40,0 c0,-40 -40,40 -40,0 z"
stroke = "red" stroke-width="6"></path>
</svg>
<text class="sub-title">
通用属性 -- transform
</text>
<svg width="100px" height="50px" fill="red">
<path id ="transformProp" d="m10,35 c0,-40 40,40 40,0 c0,-40 -40,40 -40,0 z"
transform="translate(10,5) scale(0.5 1.3) rotate(20 40 90) skewX(10) skewY(-15)"></path>
</svg>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="true">
</divider>
<div class="prop-container">
<text class="title">
path特有属性
</text>
<text class="sub-title">
特有属性-id
</text>
<svg width="100px" height="40px" fill="red">
<path id ="idProp" d="m10,20 c0,-40 40,40 40,0 c0,-40 -40,40 -40,0 z" ></path>
</svg>
<text class="sub-title">
特有属性-d
</text>
<svg width="100px" height="40px" fill="red">
<path id ="dProp" d="m10,20 c0,-40 40,40 40,0 c0,-40 -40,40 -40,0 z"></path>
</svg>
<text class="sub-title">
特有属性-if
</text>
<svg width="100px" height="50px" fill="red">
<path id ="ifPropTrue" d="m10,20 c0,-40 40,40 40,0 c0,-40 -40,40 -40,0 z" if="true"></path>
</svg>
<text class="sub-title">
特有属性-show
</text>
<svg width="200px" height="50px" fill="red">
<path id ="showPropTrue" d="m10,20 c0,-40 40,40 40,0 c0,-40 -40,40 -40,0 z" show="true"></path>
<path id ="showPropFalse" d="m10,20 c0,-40 40,40 40,0 c0,-40 -40,40 -40,0 z" show="false"></path>
<path id ="showPropNone" d="m10,20 c0,-40 40,40 40,0 c0,-40 -40,40 -40,0 z" show=""></path>
</svg>
<text class="sub-title">
特有属性-elif
</text>
<svg width="200px" height="50px" fill="red" >
<path d="m10,20 c0,-40 40,40 40,0 c0,-40 -40,40 -40,0 z" if="false"></path>
<path d="m10,20 c0,-40 40,40 40,0 c0,-40 -40,40 -40,0 z" elif="true"></path>
<path d="m10,20 c0,-40 40,40 40,0 c0,-40 -40,40 -40,0 z" elif="false"></path>
</svg>
</div>
</div>
This diff is collapsed.
Click to expand it.
ace/ace_standard/src/main/js/default/pages/path/prop/index.js
0 → 100644
浏览文件 @
469b9c9c
/**
* 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
,
dProp
:
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
,
dProp
:
this
.
dProp
,
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
.
dProp
=
this
.
$element
(
"
dProp
"
).
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
This diff is collapsed.
Click to expand it.
ace/ace_standard/src/main/js/default/pages/path/index.css
→
ace/ace_standard/src/main/js/default/pages/path/
router/
index.css
浏览文件 @
469b9c9c
...
...
@@ -31,6 +31,7 @@
flex-direction
:
column
;
height
:
100%
;
flex-weight
:
1
;
align-items
:
center
;
}
.title
{
...
...
@@ -48,137 +49,5 @@
text-align
:
left
;
margin
:
2px
;
padding
:
2px
;
text-align
:
center
;
}
.access-container
{
flex-direction
:
column
;
height
:
100%
;
flex-weight
:
1
;
}
#prop1
{
color
:
#ad4e2a
;
stroke-width
:
10px
;
margin
:
5px
;
}
.prop2
{
color
:
#343524
;
stroke-width
:
15px
;
margin
:
5px
;
}
.prop4
{
color
:
#456345
;
stroke-width
:
25px
;
margin
:
5px
;
}
.prop5
{
color
:
#831834
;
stroke-width
:
40px
;
margin
:
5px
;
height
:
70px
;
}
.ani-container
{
flex-direction
:
column
;
height
:
100%
;
flex-weight
:
1
;
}
.ani1
{
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
This diff is collapsed.
Click to expand it.
ace/ace_standard/src/main/js/default/pages/path/router/index.hml
0 → 100644
浏览文件 @
469b9c9c
<div class="container">
<div class="prop-container">
<text class="title">
通用属性
</text>
<text class="sub-title">
path通用属性1
</text>
<svg width="200" height="50">
<path id="prop1" d="m70,20 c0,-60 60,60 60,0 c0,-60 -60,60 -60,0 z"
stroke="blue" stroke-width="3" fill="red" fill-opacity="0.5">
</path>
</svg>
<text class="sub-title">
path通用属性2
</text>
<svg width="200" height="50">
<path id="prop2" d="m70,20 c0,-60 60,60 60,0 c0,-60 -60,60 -60,0 z"
stroke="red" stroke-width="3" fill="white" stroke-dasharray="10 5" stroke-dashoffset="3">
</path>
</svg>
<text class="sub-title">
path通用属性3
</text>
<svg fill="white" width="200" height="50">
<path fill="none" stroke="blue" stroke-width="3" d="m70,20 c0,-60 60,60 60,0 c0,-60 -60,60 -60,0 z"></path>
</svg>
<text class="sub-title">
path通用属性8
</text>
<svg x="0" y="0" width="200" height="50" fill="white" >
<path fill="red" fill-rule="evenodd" d="m70,20 c0,-60 60,60 60,0 c0,-60 -60,60 -60,0 z"></path>
</svg>
<text class="sub-title">
path通用属性9
</text>
<svg x="0" y="0" width="200" height="50" fill="white" >
<path fill="pink" stroke-linejoin="bevel" d="m70,20 c0,-60 60,60 60,0 c0,-60 -60,60 -60,0 z"></path>
</svg>
<text class="sub-title">
path通用属性10
</text>
<svg x="0" y="0" width="200" height="50" fill="white" >
<path fill="red" stroke-miterlimit="10" d="m70,20 c0,-60 60,60 60,0 c0,-60 -60,60 -60,0 z"></path>
</svg>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<text class="title">
通用动画
</text>
<text class="sub-title">
path动画属性
</text>
<svg fill="white" width="200" height="200">
<path fill="none" stroke="green" stroke-width="3" d="m50,60 c0,-100 100,100 100,0 c0,-100 -100,100 -100,0 z"></path>
<path fill="none" stroke="green" stroke-width="3" d="m50,130 c0,-100 100,100 100,0 c0,-100 -100,100 -100,0 z"></path>
<path fill="red" d="M-5,-5 L10,0 L-5,5 L0,0 Z">
<animateMotion dur="2000" repeatCount="indefinite" rotate="auto-reverse"path="m50,60 c0,-100 100,100 100,0 c0,-100 -100,100 -100,0 z">
</animateMotion>
</path>
<path fill="red" d="M-5,-5 L10,0 L-5,5 L0,0 Z">
<animateMotion dur="2000" repeatCount="indefinite" rotate="45"path="m50,130 c0,-100 100,100 100,0 c0,-100 -100,100 -100,0 z"></animateMotion>
</path>
</svg>
</div>
</div>
This diff is collapsed.
Click to expand it.
ace/ace_standard/src/main/js/default/pages/path/index.js
→
ace/ace_standard/src/main/js/default/pages/path/
router/
index.js
浏览文件 @
469b9c9c
...
...
@@ -12,16 +12,8 @@
* See the License for the specific language governing permissions and
* limitations under the License.
*/
export
default
{
data
:
{
title
:
""
},
onShow
(){
// 通用属性
var
prop1
=
this
.
$element
(
"
prop1
"
);
var
name1
=
prop1
.
dataSet
.
a
var
prop2
=
this
.
$refs
.
prop2
;
var
name2
=
prop2
.
dataSet
.
a
}
}
\ No newline at end of file
This diff is collapsed.
Click to expand it.
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录
反馈
建议
客服
返回
顶部