Skip to content

X
Xts Acts

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

通知 9
Star 22
Fork 0
X
Xts Acts

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

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

add test cases 

Signed-off-by: Ndongwei <dongwei@kaihongdigi.com>
上级 bb6e8ced
隐藏空白更改
内联 并排
Showing with 485 addition and 169 deletion
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>
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;
}
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>
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
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
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>
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
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或