Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
OpenHarmony
Xts Acts
提交
5bd1ab66
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,发现更多精彩内容 >>
提交
5bd1ab66
编写于
2月 19, 2022
作者:
B
bayanxing
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
add test cases
Signed-off-by:
N
bayanxing
<
bayanxing@kaihongdigi.com
>
上级
5f460e4f
变更
85
隐藏空白更改
内联
并排
Showing
85 changed file
with
17623 addition
and
1 deletion
+17623
-1
ace/ace_standard/src/main/config.json
ace/ace_standard/src/main/config.json
+29
-1
ace/ace_standard/src/main/js/default/pages/animate/index.css
ace/ace_standard/src/main/js/default/pages/animate/index.css
+17
-0
ace/ace_standard/src/main/js/default/pages/animate/index.hml
ace/ace_standard/src/main/js/default/pages/animate/index.hml
+92
-0
ace/ace_standard/src/main/js/default/pages/animate/index.js
ace/ace_standard/src/main/js/default/pages/animate/index.js
+17
-0
ace/ace_standard/src/main/js/default/pages/animateMotion/index.css
...tandard/src/main/js/default/pages/animateMotion/index.css
+17
-0
ace/ace_standard/src/main/js/default/pages/animateMotion/index.hml
...tandard/src/main/js/default/pages/animateMotion/index.hml
+54
-0
ace/ace_standard/src/main/js/default/pages/animateMotion/index.js
...standard/src/main/js/default/pages/animateMotion/index.js
+5
-0
ace/ace_standard/src/main/js/default/pages/animateTransform/index.css
...dard/src/main/js/default/pages/animateTransform/index.css
+18
-0
ace/ace_standard/src/main/js/default/pages/animateTransform/index.hml
...dard/src/main/js/default/pages/animateTransform/index.hml
+184
-0
ace/ace_standard/src/main/js/default/pages/animateTransform/index.js
...ndard/src/main/js/default/pages/animateTransform/index.js
+5
-0
ace/ace_standard/src/main/js/default/pages/canvas/index.css
ace/ace_standard/src/main/js/default/pages/canvas/index.css
+440
-0
ace/ace_standard/src/main/js/default/pages/canvas/index.hml
ace/ace_standard/src/main/js/default/pages/canvas/index.hml
+280
-0
ace/ace_standard/src/main/js/default/pages/canvas/index.js
ace/ace_standard/src/main/js/default/pages/canvas/index.js
+465
-0
ace/ace_standard/src/main/js/default/pages/circle/index.css
ace/ace_standard/src/main/js/default/pages/circle/index.css
+366
-0
ace/ace_standard/src/main/js/default/pages/circle/index.hml
ace/ace_standard/src/main/js/default/pages/circle/index.hml
+189
-0
ace/ace_standard/src/main/js/default/pages/circle/index.js
ace/ace_standard/src/main/js/default/pages/circle/index.js
+26
-0
ace/ace_standard/src/main/js/default/pages/ellipse/index.css
ace/ace_standard/src/main/js/default/pages/ellipse/index.css
+359
-0
ace/ace_standard/src/main/js/default/pages/ellipse/index.hml
ace/ace_standard/src/main/js/default/pages/ellipse/index.hml
+188
-0
ace/ace_standard/src/main/js/default/pages/ellipse/index.js
ace/ace_standard/src/main/js/default/pages/ellipse/index.js
+26
-0
ace/ace_standard/src/main/js/default/pages/gridCol/index.css
ace/ace_standard/src/main/js/default/pages/gridCol/index.css
+483
-0
ace/ace_standard/src/main/js/default/pages/gridCol/index.hml
ace/ace_standard/src/main/js/default/pages/gridCol/index.hml
+311
-0
ace/ace_standard/src/main/js/default/pages/gridCol/index.js
ace/ace_standard/src/main/js/default/pages/gridCol/index.js
+473
-0
ace/ace_standard/src/main/js/default/pages/gridContainer/index.css
...tandard/src/main/js/default/pages/gridContainer/index.css
+483
-0
ace/ace_standard/src/main/js/default/pages/gridContainer/index.hml
...tandard/src/main/js/default/pages/gridContainer/index.hml
+324
-0
ace/ace_standard/src/main/js/default/pages/gridContainer/index.js
...standard/src/main/js/default/pages/gridContainer/index.js
+479
-0
ace/ace_standard/src/main/js/default/pages/gridRow/index.css
ace/ace_standard/src/main/js/default/pages/gridRow/index.css
+483
-0
ace/ace_standard/src/main/js/default/pages/gridRow/index.hml
ace/ace_standard/src/main/js/default/pages/gridRow/index.hml
+310
-0
ace/ace_standard/src/main/js/default/pages/gridRow/index.js
ace/ace_standard/src/main/js/default/pages/gridRow/index.js
+473
-0
ace/ace_standard/src/main/js/default/pages/line/index.css
ace/ace_standard/src/main/js/default/pages/line/index.css
+369
-0
ace/ace_standard/src/main/js/default/pages/line/index.hml
ace/ace_standard/src/main/js/default/pages/line/index.hml
+207
-0
ace/ace_standard/src/main/js/default/pages/line/index.js
ace/ace_standard/src/main/js/default/pages/line/index.js
+26
-0
ace/ace_standard/src/main/js/default/pages/obj_CanvasGradient/index.css
...rd/src/main/js/default/pages/obj_CanvasGradient/index.css
+480
-0
ace/ace_standard/src/main/js/default/pages/obj_CanvasGradient/index.hml
...rd/src/main/js/default/pages/obj_CanvasGradient/index.hml
+29
-0
ace/ace_standard/src/main/js/default/pages/obj_CanvasGradient/index.js
...ard/src/main/js/default/pages/obj_CanvasGradient/index.js
+35
-0
ace/ace_standard/src/main/js/default/pages/obj_CanvasRenderingContext2D/index.css
...n/js/default/pages/obj_CanvasRenderingContext2D/index.css
+480
-0
ace/ace_standard/src/main/js/default/pages/obj_CanvasRenderingContext2D/index.hml
...n/js/default/pages/obj_CanvasRenderingContext2D/index.hml
+171
-0
ace/ace_standard/src/main/js/default/pages/obj_CanvasRenderingContext2D/index.js
...in/js/default/pages/obj_CanvasRenderingContext2D/index.js
+287
-0
ace/ace_standard/src/main/js/default/pages/obj_Image/index.css
...ce_standard/src/main/js/default/pages/obj_Image/index.css
+480
-0
ace/ace_standard/src/main/js/default/pages/obj_Image/index.hml
...ce_standard/src/main/js/default/pages/obj_Image/index.hml
+30
-0
ace/ace_standard/src/main/js/default/pages/obj_Image/index.js
...ace_standard/src/main/js/default/pages/obj_Image/index.js
+43
-0
ace/ace_standard/src/main/js/default/pages/obj_ImageBitmap/index.css
...ndard/src/main/js/default/pages/obj_ImageBitmap/index.css
+480
-0
ace/ace_standard/src/main/js/default/pages/obj_ImageBitmap/index.hml
...ndard/src/main/js/default/pages/obj_ImageBitmap/index.hml
+30
-0
ace/ace_standard/src/main/js/default/pages/obj_ImageBitmap/index.js
...andard/src/main/js/default/pages/obj_ImageBitmap/index.js
+46
-0
ace/ace_standard/src/main/js/default/pages/obj_ImageData/index.css
...tandard/src/main/js/default/pages/obj_ImageData/index.css
+480
-0
ace/ace_standard/src/main/js/default/pages/obj_ImageData/index.hml
...tandard/src/main/js/default/pages/obj_ImageData/index.hml
+30
-0
ace/ace_standard/src/main/js/default/pages/obj_ImageData/index.js
...standard/src/main/js/default/pages/obj_ImageData/index.js
+38
-0
ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/index.css
...d/src/main/js/default/pages/obj_OffscreenCanvas/index.css
+480
-0
ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/index.hml
...d/src/main/js/default/pages/obj_OffscreenCanvas/index.hml
+46
-0
ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/index.js
...rd/src/main/js/default/pages/obj_OffscreenCanvas/index.js
+62
-0
ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/index.css
...ult/pages/obj_OffscreenCanvasRenderingContext2D/index.css
+480
-0
ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/index.hml
...ult/pages/obj_OffscreenCanvasRenderingContext2D/index.hml
+171
-0
ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/index.js
...ault/pages/obj_OffscreenCanvasRenderingContext2D/index.js
+342
-0
ace/ace_standard/src/main/js/default/pages/obj_Path2D/index.css
...e_standard/src/main/js/default/pages/obj_Path2D/index.css
+480
-0
ace/ace_standard/src/main/js/default/pages/obj_Path2D/index.hml
...e_standard/src/main/js/default/pages/obj_Path2D/index.hml
+72
-0
ace/ace_standard/src/main/js/default/pages/obj_Path2D/index.js
...ce_standard/src/main/js/default/pages/obj_Path2D/index.js
+106
-0
ace/ace_standard/src/main/js/default/pages/path/index.css
ace/ace_standard/src/main/js/default/pages/path/index.css
+222
-0
ace/ace_standard/src/main/js/default/pages/path/index.hml
ace/ace_standard/src/main/js/default/pages/path/index.hml
+161
-0
ace/ace_standard/src/main/js/default/pages/path/index.js
ace/ace_standard/src/main/js/default/pages/path/index.js
+27
-0
ace/ace_standard/src/main/js/default/pages/polygon/index.css
ace/ace_standard/src/main/js/default/pages/polygon/index.css
+343
-0
ace/ace_standard/src/main/js/default/pages/polygon/index.hml
ace/ace_standard/src/main/js/default/pages/polygon/index.hml
+222
-0
ace/ace_standard/src/main/js/default/pages/polygon/index.js
ace/ace_standard/src/main/js/default/pages/polygon/index.js
+27
-0
ace/ace_standard/src/main/js/default/pages/polyline/index.css
...ace_standard/src/main/js/default/pages/polyline/index.css
+343
-0
ace/ace_standard/src/main/js/default/pages/polyline/index.hml
...ace_standard/src/main/js/default/pages/polyline/index.hml
+199
-0
ace/ace_standard/src/main/js/default/pages/polyline/index.js
ace/ace_standard/src/main/js/default/pages/polyline/index.js
+27
-0
ace/ace_standard/src/main/js/default/pages/rect/index.css
ace/ace_standard/src/main/js/default/pages/rect/index.css
+325
-0
ace/ace_standard/src/main/js/default/pages/rect/index.hml
ace/ace_standard/src/main/js/default/pages/rect/index.hml
+173
-0
ace/ace_standard/src/main/js/default/pages/rect/index.js
ace/ace_standard/src/main/js/default/pages/rect/index.js
+26
-0
ace/ace_standard/src/main/js/default/pages/svg/index.css
ace/ace_standard/src/main/js/default/pages/svg/index.css
+326
-0
ace/ace_standard/src/main/js/default/pages/svg/index.hml
ace/ace_standard/src/main/js/default/pages/svg/index.hml
+228
-0
ace/ace_standard/src/main/js/default/pages/svg/index.js
ace/ace_standard/src/main/js/default/pages/svg/index.js
+26
-0
ace/ace_standard/src/main/js/default/pages/svg_text/index.css
...ace_standard/src/main/js/default/pages/svg_text/index.css
+174
-0
ace/ace_standard/src/main/js/default/pages/svg_text/index.hml
...ace_standard/src/main/js/default/pages/svg_text/index.hml
+130
-0
ace/ace_standard/src/main/js/default/pages/svg_text/index.js
ace/ace_standard/src/main/js/default/pages/svg_text/index.js
+24
-0
ace/ace_standard/src/main/js/default/pages/textPath/index.css
...ace_standard/src/main/js/default/pages/textPath/index.css
+173
-0
ace/ace_standard/src/main/js/default/pages/textPath/index.hml
...ace_standard/src/main/js/default/pages/textPath/index.hml
+199
-0
ace/ace_standard/src/main/js/default/pages/textPath/index.js
ace/ace_standard/src/main/js/default/pages/textPath/index.js
+18
-0
ace/ace_standard/src/main/js/default/pages/tspan/index.css
ace/ace_standard/src/main/js/default/pages/tspan/index.css
+171
-0
ace/ace_standard/src/main/js/default/pages/tspan/index.hml
ace/ace_standard/src/main/js/default/pages/tspan/index.hml
+185
-0
ace/ace_standard/src/main/js/default/pages/tspan/index.js
ace/ace_standard/src/main/js/default/pages/tspan/index.js
+18
-0
ace/ace_standard/src/main/js/default/pages/video/index.css
ace/ace_standard/src/main/js/default/pages/video/index.css
+379
-0
ace/ace_standard/src/main/js/default/pages/video/index.hml
ace/ace_standard/src/main/js/default/pages/video/index.hml
+183
-0
ace/ace_standard/src/main/js/default/pages/video/index.js
ace/ace_standard/src/main/js/default/pages/video/index.js
+685
-0
multimedia/audio/audio.iml
multimedia/audio/audio.iml
+11
-0
multimedia/media/media_js_standard/audioPlayer/audioPlayer.iml
...media/media/media_js_standard/audioPlayer/audioPlayer.iml
+11
-0
multimedia/media/media_js_standard/audioRecorder/audioRecorder.iml
...a/media/media_js_standard/audioRecorder/audioRecorder.iml
+11
-0
未找到文件。
ace/ace_standard/src/main/config.json
浏览文件 @
5bd1ab66
...
@@ -93,7 +93,35 @@
...
@@ -93,7 +93,35 @@
"pages/swiper/index"
,
"pages/swiper/index"
,
"pages/tabs/index"
,
"pages/tabs/index"
,
"pages/tab-bar/index"
,
"pages/tab-bar/index"
,
"pages/tab-content/index"
"pages/tab-content/index"
,
"pages/svg_text/index"
,
"pages/video/index"
,
"pages/gridContainer/index"
,
"pages/gridRow/index"
,
"pages/gridCol/index"
,
"pages/canvas/index"
,
"pages/obj_CanvasRenderingContext2D/index"
,
"pages/obj_Image/index"
,
"pages/obj_CanvasGradient/index"
,
"pages/obj_ImageData/index"
,
"pages/obj_Path2D/index"
,
"pages/obj_ImageBitmap/index"
,
"pages/obj_OffscreenCanvas/index"
,
"pages/obj_OffscreenCanvasRenderingContext2D/index"
,
"pages/textPath/index"
,
"pages/svg/index"
,
"pages/rect/index"
,
"pages/circle/index"
,
"pages/ellipse/index"
,
"pages/path/index"
,
"pages/line/index"
,
"pages/polyline/index"
,
"pages/polygon/index"
,
"pages/animate/index"
,
"pages/animateMotion/index"
,
"pages/animateTransform/index"
,
"pages/textPath/index"
,
"pages/tspan/index"
],
],
"name"
:
"default"
,
"name"
:
"default"
,
"window"
:
{
"window"
:
{
...
...
ace/ace_standard/src/main/js/default/pages/animate/index.css
0 → 100644
浏览文件 @
5bd1ab66
.container
{
width
:
100%
;
flex-direction
:
column
;
align-items
:
center
;
}
.title
{
font-size
:
18px
;
color
:
grey
;
padding
:
5px
;
text-align
:
center
;
}
.svg-style
{
border
:
1px
solid
#000000
;
}
.outerBox
{
flex-direction
:
column
;
}
ace/ace_standard/src/main/js/default/pages/animate/index.hml
0 → 100644
浏览文件 @
5bd1ab66
<div class="container">
<div>
<div class="outerBox">
<text class="title">
动画效果1
</text>
<svg width="150" height="150" class="svg-style">
<circle cx="60" cy="60" r="50" stroke-width="4" fill="white" stroke="blue">
<animate attributeName="r" from="0" to="30" dur="2000" repeatCount="1"></animate>
</circle>
<circle cx="110" cy="110" r="50" stroke-width="4" fill="white" stroke="blue">
<animate attributeName="r" from="0" to="30" dur="2000" repeatCount="1" fill="freeze"></animate>
</circle>
</svg>
</div>
<div class="outerBox">
<text class="title">
动画效果2
</text>
<svg width="150" height="150" class="svg-style">
<rect x="25" y="25" width="100" height="100" fill="red" rx="0" ry="20">
<animate attributeName="rx" from="0" to="30" keyTimes="0;0.25;0.75;1" keySplines="0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1"
dur="1000" repeatCount="indefinite">
</animate>
</rect>
</svg>
</div>
</div>
<div>
<div class="outerBox">
<text class="title">
动画效果3
</text>
<svg width="150" height="150" class="svg-style">
<text x="25" y="25" font-size="30px" fill="red">
animate
<animate attributeName="y" values="25;90;150;80" keyTimes="0;0.25;0.75;1" keySplines="0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1"
dur="5000" repeatCount="indefinite">
</animate>
<animate attributeName="x" values="25;100;30;0" keyTimes="0;0.25;0.75;1" keySplines="0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1"
dur="5000" repeatCount="indefinite">
</animate>
<animate attributeName="fill" values="red;blue;#00ff00;#888888" keyTimes="0;0.25;0.75;1" keySplines="0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1"
dur="5000" repeatCount="indefinite">
</animate>
</text>
</svg>
</div>
<div class="outerBox">
<text class="title">
动画效果4
</text>
<svg width="150" height="150" class="svg-style">
<path d="M0,0 Q40,40 60,80 Q90,60 100,120 Q100,0 150,150" stroke="red"
fill="none"></path>
<text>
<textpath fill="blue" path="M0,0 Q40,40 60,80 Q90,60 100,120 Q100,0 150,150"
font-size="16px" startOffset="0%">
animate
<animate attributeName="startOffset" values="0%;40%;60%;80%" keyTimes="0.5;0.25;0.75;1" keySplines="0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1"
dur="5000" repeatCount="indefinite">
</animate>
</textpath>
</text>
</svg>
</div>
</div>
<div>
<div class="outerBox">
<text class="title">
动画效果5
</text>
<svg width="150" height="150" class="svg-style">
<rect x="25" y="25" width="100" height="100" fill="red" rx="0" ry="20">
<animate attributeName="fill" from="red" to="#ff00ff" dur="3000" repeatCount="indefinite" calcMode="discrete">
</animate>
</rect>
</svg>
</div>
<div class="outerBox">
<text class="title">
动画效果6
</text>
<svg width="150" height="150" class="svg-style">
<rect x="25" y="25" width="100" height="100" fill="red" rx="0" ry="20">
<animate attributeName="fill" from="red" to="#ff00ff" dur="3000" repeatCount="indefinite">
</animate>
</rect>
</svg>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/animate/index.js
0 → 100644
浏览文件 @
5bd1ab66
/*
* Copyright (C) 2021 Huawei Device 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
{
}
ace/ace_standard/src/main/js/default/pages/animateMotion/index.css
0 → 100644
浏览文件 @
5bd1ab66
.container
{
width
:
100%
;
flex-direction
:
column
;
align-items
:
center
;
}
.title
{
font-size
:
18px
;
color
:
grey
;
padding
:
5px
;
text-align
:
center
;
}
.svg-style
{
border
:
1px
solid
#000000
;
}
.outerBox
{
flex-direction
:
column
;
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/animateMotion/index.hml
0 → 100644
浏览文件 @
5bd1ab66
<div class="container">
<div>
<div class="outerBox">
<text class="title">
动画效果1
</text>
<svg width="150" height="120" class="svg-style">
<path fill="none" stroke="blue" stroke-width="3" d="m20,60 c0,-100 120,100 120,0 c0,-100 -120,100 -120,0 z"></path>
<path fill="red" d="M-5,-10 L15,0 L-5,10 L0,0 Z">
<animateMotion dur="2000" repeatCount="indefinite" rotate="auto" keyPoints="0;0.2;0.4;0.6;0.8;1" path="m20,60 c0,-100 120,100 120,0 c0,-100 -120,100 -120,0 z">
</animateMotion>
</path>>
</svg>
</div>
<div class="outerBox">
<text class="title">
动画效果2
</text>
<svg width="150" height="120" class="svg-style">
<path fill="none" stroke="blue" stroke-width="3" d="m20,60 c0,-100 120,100 120,0 c0,-100 -120,100 -120,0 z"></path>
<path fill="red" d="M-5,-10 L15,0 L-5,10 L0,0 Z">
<animateMotion dur="2000" repeatCount="1" rotate="auto" keyPoints="0;0.2;0.4;0.6;0.8;1" path="m20,60 c0,-100 120,100 120,0 c0,-100 -120,100 -120,0 z">
</animateMotion>
</path>
</svg>
</div>
</div>
<div>
<div class="outerBox">
<text class="title">
动画效果3
</text>
<svg width="150" height="120" class="svg-style">
<path fill="none" stroke="blue" stroke-width="3" d="m20,60 c0,-100 120,100 120,0 c0,-100 -120,100 -120,0 z"></path>
<path fill="red" d="M-5,-10 L15,0 L-5,10 L0,0 Z">
<animateMotion dur="2000" repeatCount="indefinite" rotate="auto-reverse" path="m20,60 c0,-100 120,100 120,0 c0,-100 -120,100 -120,0 z">
</animateMotion>
</path>
</svg>
</div>
<div class="outerBox">
<text class="title">
动画效果4
</text>
<svg width="150" height="120" class="svg-style">
<path fill="none" stroke="blue" stroke-width="3" d="m20,60 c0,-100 120,100 120,0 c0,-100 -120,100 -120,0 z"></path>
<path fill="red" d="M-5,-10 L15,0 L-5,10 L0,0 Z">
<animateMotion dur="2000" repeatCount="1" fill="freeze" rotate="5" path="m20,60 c0,-100 120,100 120,0 c0,-100 -120,100 -120, 0 z">
</animateMotion>
</path>
</svg>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/animateMotion/index.js
0 → 100644
浏览文件 @
5bd1ab66
export
default
{
data
:
{
title
:
'
World
'
}
}
ace/ace_standard/src/main/js/default/pages/animateTransform/index.css
0 → 100644
浏览文件 @
5bd1ab66
.container
{
width
:
100%
;
flex-direction
:
column
;
align-items
:
center
;
padding-bottom
:
40px
;
}
.title
{
font-size
:
18px
;
color
:
grey
;
padding
:
5px
;
text-align
:
center
;
}
.svg-style
{
border
:
1px
solid
#000000
;
}
.outerBox
{
flex-direction
:
column
;
}
ace/ace_standard/src/main/js/default/pages/animateTransform/index.hml
0 → 100644
浏览文件 @
5bd1ab66
<div class="container">
<div>
<div class="outerBox">
<text class="title">
动画效果1
</text>
<svg width="150" height="150" class="svg-style">
<circle cx="40" cy="40" r="20" stroke-width="4" fill="white" stroke="blue">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 100 120"
to="150 60 90" dur="3s" repeatCount="indefinite">
</animateTransform>
</circle>
</svg>
</div>
<div class="outerBox">
<text class="title">
动画效果2
</text>
<svg width="150" height="150" class="svg-style">
<circle cx="30" cy="100" r="20" stroke-width="4" fill="white" stroke="blue">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0"
to="-100" dur="3s" repeatCount="1">
</animateTransform>
</circle>
</svg>
</div>
</div>
<div>
<div class="outerBox">
<text class="title">
动画效果3
</text>
<svg width="150" height="150" class="svg-style">
<ellipse cx="50" cy="50" rx="30" ry="20" fill="blue">
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="2" dur="3s"
repeatCount="indefinite">
</animateTransform>
</ellipse>
</svg>
</div>
<div class="outerBox">
<text class="title">
动画效果4
</text>
<svg width="150" height="150" class="svg-style">
<ellipse cx="50" cy="50" rx="30" ry="20" fill="blue">
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="2" dur="3s"
repeatCount="1" fill="freeze">
</animateTransform>
</ellipse>
</svg>
</div>
</div>
<div>
<div class="outerBox">
<text class="title">
动画效果5
</text>
<svg width="150" height="150" class="svg-style">
<line x1="10" x2="90" y1="75" y2="75" stroke-width="10" stroke="black" stroke-linecap="square">
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="100"
dur="3s" repeatCount="indefinite">
</animateTransform>
</line>
</svg>
</div>
<div class="outerBox">
<text class="title">
动画效果6
</text>
<svg width="150" height="150" class="svg-style">
<line x1="10" x2="90" y1="35" y2="35" stroke-width="10" stroke="black" stroke-linecap="square">
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="0 0" to="0 100"
dur="3s" repeatCount="indefinite">
</animateTransform>
</line>
</svg>
</div>
</div>
<div>
<div class="outerBox">
<text class="title">
动画效果7
</text>
<svg width="150" height="150" class="svg-style">
<path stroke="black" fill="none" stroke-linejoin="miter" stroke-miterlimit="1" id="p2"
d="M1,19 l17,-13 l7,23 m0,0 l13.5,33 l13.5 ,-43 m0,0 l32 ,-13 l42 ,13 m0,0 l10.75,93">
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="3"
dur="3s" repeatCount="indefinite">
</animateTransform>
</path>
</svg>
</div>
<div class="outerBox">
<text class="title">
动画效果8
</text>
<svg width="150" height="150" class="svg-style">
<path stroke="black" fill="none" stroke-linejoin="miter" stroke-miterlimit="1" id="p2"
d="M1,19 l17,-13 l7,23 m0,0 l13.5,33 l13.5 ,-43 m0,0 l32 ,-13 l42 ,13 m0,0 l10.75,93">
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1 1" to="2 6"
dur="3s" repeatCount="indefinite">
</animateTransform>
</path>
</svg>
</div>
</div>
<div>
<div class="outerBox">
<text class="title">
动画效果9
</text>
<svg width="150" height="150" class="svg-style">
<polygon points="10,20 40,40 30,60" fill="black">
<animateTransform attributeName="transform" attributeType="XML" type="skewX" from="10" to="80" dur="3s"
repeatCount="indefinite">
</animateTransform>
</polygon>
</svg>
</div>
<div class="outerBox">
<text class="title">
动画效果10
</text>
<svg width="150" height="150" class="svg-style">
<polygon points="10,20 40,40 30,60" fill="black">
<animateTransform attributeName="transform" attributeType="XML" type="skewY" from="10" to="80" dur="3s"
repeatCount="indefinite">
</animateTransform>
</polygon>
</svg>
</div>
</div>
<div>
<div class="outerBox">
<text class="title">
动画效果11
</text>
<svg width="150" height="150" class="svg-style">
<polyline points="10,150 50,125 50,150 100,100" fill="white" stroke="black">
<animateTransform attributeName="transform" attributeType="XML" type="skewX" from="0" to="80" dur="3s"
repeatCount="indefinite">
</animateTransform>
<animateTransform attributeName="transform" attributeType="XML" type="skewY" from="150" to="90" dur="3s"
repeatCount="indefinite">
</animateTransform>
</polyline>
</svg>
</div>
<div class="outerBox">
<text class="title">
动画效果12
</text>
<svg width="150" height="150" class="svg-style">
<rect width="100" height="100" x="25" y="25" stroke-width="10" stroke="red" rx="10" ry="10"
stroke-dasharray="5 3" stroke-dashoffset="3">
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="2"
dur="3s" repeatCount="indefinite">
</animateTransform>
<animate attributeName="stroke" from="red" to="#ff00ff" dur="3000" repeatCount="indefinite">
</animate>
</rect>
</svg>
</div>
</div>
<div>
<div class="outerBox">
<text class="title">
动画效果13
</text>
<svg width="150" height="150" class="svg-style">
<text x="10" y="10" fill="#D2691E" font-size="12">
animateTransform
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="5"
dur="3s" repeatCount="indefinite">
</animateTransform>
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="0 0" to="0 90"
dur="3s" repeatCount="indefinite">
</animateTransform>
</text>
</svg>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/animateTransform/index.js
0 → 100644
浏览文件 @
5bd1ab66
export
default
{
data
:
{
title
:
'
World
'
}
}
ace/ace_standard/src/main/js/default/pages/canvas/index.css
0 → 100644
浏览文件 @
5bd1ab66
/**
* 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.
*/
.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
:
70%
;
}
.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/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
;
}
.style7
{
flex-direction
:
column
;
flex-wrap
:
wrap
;
justify-content
:
flex-start
;
align-items
:
flex-end
;
align-content
:
space-around
;
display
:
flex
;
height
:
40px
;
}
.flex-item
{
width
:
20px
;
height
:
20px
;
border-radius
:
16px
;
}
.color-primary
{
background-color
:
mediumpurple
;
}
.color-warning
{
background-color
:
pink
;
}
.color-success
{
background-color
:
cornflowerblue
;
}
.grid-child
{
width
:
100%
;
border-radius
:
2px
;
}
.grid-left-top
{
width
:
20px
;
height
:
20px
;
border-radius
:
10px
;
border
:
1px
solid
plum
;
background
:
linear-gradient
(
pink
,
purple
);
box-shadow
:
0px
0px
1px
1px
pink
;
grid-row-start
:
0
;
grid-column-start
:
0
;
grid-row-end
:
0
;
grid-column-end
:
0
;
}
.grid-left-bottom
{
width
:
20px
;
height
:
20px
;
border-radius
:
5px
;
border
:
1px
solid
plum
;
background
:
linear-gradient
(
pink
,
#00aaee
);
box-shadow
:
0px
0px
1px
1px
pink
;
grid-row-start
:
1
;
grid-column-start
:
0
;
grid-row-end
:
1
;
grid-column-end
:
0
;
}
.grid-right-top
{
width
:
20px
;
height
:
20px
;
border-radius
:
3px
;
border
:
1px
dotted
plum
;
background
:
linear-gradient
(
mediumpurple
,
#00aaee
);
box-shadow
:
0px
0px
1px
1px
pink
;
grid-row-start
:
0
;
grid-column-start
:
1
;
grid-row-end
:
0
;
grid-column-end
:
1
;
}
.grid-right-bottom
{
width
:
20px
;
height
:
20px
;
border-radius
:
5px
;
border
:
1px
dotted
plum
;
background
:
linear-gradient
(
pink
,
mediumpurple
);
box-shadow
:
0px
0px
2px
2px
pink
;
grid-row-start
:
1
;
grid-column-start
:
1
;
grid-row-end
:
1
;
grid-column-end
:
1
;
}
.event-container
{
flex-direction
:
column
;
flex-weight
:
1
;
}
.event1
{
width
:
60%
;
flex-weight
:
1
;
background-color
:
yellow
;
}
.event2
{
width
:
70%
;
flex-weight
:
1
;
background-color
:
red
;
}
.event3
{
width
:
80%
;
flex-weight
:
1
;
background-color
:
#ad4e2a
;
}
.event4
{
flex-direction
:
row
;
width
:
90%
;
flex-weight
:
1
;
overflow
:
scroll
;
}
.event5
{
flex-direction
:
column
;
width
:
100%
;
height
:
90px
;
overflow
:
scroll
;
}
.prop-container
{
flex-direction
:
column
;
}
#prop1
{
height
:
30px
;
background-color
:
mediumslateblue
;
width
:
100%
;
margin
:
5px
;
}
.prop2
{
height
:
30px
;
background-color
:
pink
;
width
:
100%
;
margin
:
5px
;
}
.prop3
{
height
:
30px
;
background-color
:
darkseagreen
;
width
:
100%
;
margin
:
5px
;
}
.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
{
width
:
100%
;
height
:
20px
;
margin
:
5px
;
background
:
linear-gradient
(
red
,
#00ff00
);
}
.gradient2
{
width
:
100%
;
height
:
20px
;
margin
:
5px
;
background
:
linear-gradient
(
45deg
,
rgb
(
255
,
0
,
0
),
rgb
(
0
,
255
,
0
));
}
.gradient3
{
width
:
100%
;
height
:
20px
;
margin
:
5px
;
background
:
linear-gradient
(
to
right
,
rgb
(
255
,
0
,
0
)
90px
,
rgb
(
0
,
255
,
0
)
60%
);
}
.gradient4
{
width
:
100%
;
height
:
20px
;
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
{
background-color
:
#321124
;
margin
:
5px
;
width
:
90%
;
height
:
30px
;
}
.atom-container
{
flex-direction
:
column
;
}
.multiMode-container
{
flex-direction
:
column
;
}
.multiMode1
{
background-color
:
#978666
;
width
:
100%
;
height
:
30px
;
margin
:
5px
;
}
.function-container
{
flex-direction
:
column
;
}
.function1
{
background-color
:
#ff0000
;
width
:
60%
;
height
:
20px
;
}
.function2
{
background-color
:
#00ff00
;
width
:
60%
;
height
:
20px
;
}
.function3
{
background-color
:
#0000ff
;
width
:
100%
;
height
:
20px
;
}
ace/ace_standard/src/main/js/default/pages/canvas/index.hml
0 → 100644
浏览文件 @
5bd1ab66
<!--/**
* 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.
*/-->
<div class="container">
<div class="sub-container">
<div class="style-container">
<text class="title">
通用样式
</text>
<text class="sub-title">
canvas通用样式1
</text>
<canvas class="style1">
</canvas>
<text class="sub-title">
canvas通用样式2
</text>
<canvas class="style2">
</canvas>
<text class="sub-title">
canvas通用样式3
</text>
<canvas class="style3">
</canvas>
<text class="sub-title">
canvas通用样式4
</text>
<canvas class="style4">
</canvas>
<text class="sub-title">
canvas通用样式5
</text>
<div class="contain1">
<canvas class="style5">
</canvas>
<canvas class="style6">
</canvas>
</div>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="event-container" >
<text class="title">
通用事件
</text>
<text class="sub-title">
canvas通用事件1
</text>
<canvas class ="event1" ontouchstart="touchStart" ontouchmove="touchMove"
ontouchend="touchEnd" ontouchcancel="touchCancel">
</canvas>
<text class="sub-title">
canvas通用事件2
</text>
<canvas class ="event2" onclick="click" ondoubleclick="doubleClick"
onlongpress="longPress" onfocus="focus" onblur="blur" onkey="key"
onswipe="swipe" onattached="attached" ondetached="detached">
</canvas>
<text class="sub-title">
canvas通用事件3
</text>
<canvas class ="event3" onpinchstart="pinchStart" onpinchupdate="pinchUpdate"
onpinchend="pinchEnd" onpinchcancel="pinchCancel"
ondragstart="dragStart" ondrag="drag"
ondragend="dragEnd" ondragenter="dragEnter"
ondragover="dragOver" ondragleave="dragLeave"
ondrop="drop">
</canvas>
</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">
canvas通用属性1
</text>
<canvas id="prop1" class="prop1"
disabled = "true" focusable ="true"
data-name ="prop1"
dir ="rtl">
</canvas>
<text class="sub-title">
canvas通用属性2
</text>
<canvas class="prop2" ref ="prop2"
disabled = "false" focusable ="false"
data-name ="prop2"
dir ="ltr">
</canvas>
<text class="sub-title">
canvas通用属性3
</text>
<canvas style="color: #679855; margin: 5px;" class="prop3">
</canvas>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="function-container">
<text class="title">
通用方法
</text>
<text class="sub-title">
canvas通用方法1
</text>
<canvas id="function1" ref="function1" class="function1" ontouchstart="functionTest1"></canvas>
<text class="sub-title">
canvas通用方法2
</text>
<canvas id="function2" ref="function2" class="function2" ontouchstart="functionTest2"></canvas>
<text class="sub-title">
canvas通用方法3
</text>
<canvas id="function3" ref="function3" class="function3" ontouchstart="functionTest3"></canvas>
<text class="sub-title">
canvas特有方法4
</text>
<canvas id="function4" ref="function4" style="width: 100%;height: 40px;background-color: #ffff00;" onclick="functionTest4"></canvas>
<text class="sub-title">
canvas特有方法5
</text>
<canvas id="function5" style="width:100%;height:30px;background-color: #ffff00; margin-bottom: 10px;" ref="function5" onclick="functionTest5"></canvas>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="ani-container">
<text class="title">
动画样式
</text>
<text class="sub-title">
canvas动画样式1
</text>
<canvas class="ani1" >
</canvas>
<text class="sub-title">
canvas动画样式2
</text>
<canvas class="ani2" >
</canvas>
</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">
canvas渐变样式1
</text>
<canvas class="gradient1">
</canvas>
<text class="sub-title">
canvas渐变样式2
</text>
<canvas class="gradient2">
</canvas>
<text class="sub-title">
canvas渐变样式3
</text>
<canvas class="gradient3">
</canvas>
<text class="sub-title">
canvas渐变样式4
</text>
<canvas class="gradient4">
</canvas>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="access-container">
<text class="title">
无障碍
</text>
<text class="sub-title">
canvas无障碍1
</text>
<canvas class="access1" accessibilitygroup ="true"
accessibilitytext="这是canvas"
accessibilitydescription="点击此按键会弹出一个对话框"
accessibilityimportance="no-hide-descendants">
</canvas>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="atom-container">
<text class="title">
原子布局
</text>
<text class="sub-title">
canvas原子布局1
</text>
<div style="flex-direction: row;height: 30px;width: 100%;">
<canvas style="width:20px;height:20px;background-color: blue;display-index: 1;">
</canvas>
<canvas style="width:30px; height:20px;background-color: black;display-index: 5;">
</canvas>
<canvas style="width:40px; height:20px;background-color: yellow;display-index: 4;">
</canvas>
<canvas style="width:10px; height:20px;background-color: red;display-index: 3;">
</canvas>
<canvas style="width:25px; height:20px;background-color:pink;display-index: 7;">
</canvas>
<canvas style="width:15px; height:20px;background-color: palegoldenrod;display-index: 2;">
</canvas>
</div>
<text class="sub-title">
canvas原子布局2
</text>
<div style="flex-direction: row;height: 30px;width: 100%;">
<canvas style="height:20px;background-color: blue;flex-weight: 1;">
</canvas>
<canvas style="height:20px;background-color: black;flex-weight: 5;">
</canvas>
<canvas style="height:20px;background-color: yellow;flex-weight: 4;">
</canvas>
<canvas style="height:20px;background-color: red;flex-weight: 3;">
</canvas>
<canvas style="height:20px;background-color:pink;flex-weight: 7;">
</canvas>
<canvas style="height:20px;background-color: palegoldenrod;flex-weight: 2;">
</canvas>
</div>
<text class="sub-title">
canvas原子布局3
</text>
<div style="flex-direction: row;height:60px;width: 100%;">
<canvas style="width:30px;background-color: blue;aspect-ratio: 0.6;">
</canvas>
<canvas style="width:30px;background-color: black;aspect-ratio:0.5;">
</canvas>
<canvas style="width:30px;background-color: yellow;aspect-ratio: 1.5;">
</canvas>
<canvas style="width:30px;background-color: red;aspect-ratio: 1.3;">
</canvas>
<canvas style="width:30px;background-color:pink;aspect-ratio: 1;">
</canvas>
<canvas style="width:30px;background-color: palegoldenrod;aspect-ratio:2;">
</canvas>
</div>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="multiMode-container">
<text class="title">
多模输入
</text>
<text class="sub-title">
canvas多模输入1
</text>
<canvas class="multiMode1" voicelabel = "voice"
subscriptflag="on" subscriptlabel="div" scenelabel="common">
</canvas>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/canvas/index.js
0 → 100644
浏览文件 @
5bd1ab66
/**
* 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.
*/
import
prompt
from
'
@system.prompt
'
;
var
options
=
{
duration
:
1500
,
easing
:
'
friction
'
,
delay
:
100
,
fill
:
'
forwards
'
,
iterations
:
2
,
direction
:
'
normal
'
,
};
var
frames
=
[
{
transform
:
{
translate
:
'
-120px
'
,
rotate
:
'
10deg
'
,
scale
:
0.2
,
skew
:
'
40deg
'
},
opacity
:
0.1
,
offset
:
0.0
,
width
:
'
40%
'
,
height
:
'
20px
'
,
backgroundColor
:
'
#ff0000
'
,
backgroundPosition
:
'
10px 20px
'
,
transformOrigin
:
'
left top
'
},
{
transform
:
{
translateX
:
'
0px
'
,
translateY
:
'
5px
'
,
rotateX
:
'
10deg
'
,
rotateY
:
'
10deg
'
,
scaleX
:
0.5
,
scaleY
:
0.7
,
skewX
:
'
22deg
'
,
skewY
:
'
30deg
'
},
opacity
:
0.6
,
offset
:
2.0
,
width
:
'
60%
'
,
height
:
'
30px
'
,
backgroundColor
:
'
#ff00ff
'
,
backgroundPosition
:
'
15px 25px
'
,
transformOrigin
:
'
center top
'
},
{
transform
:
{
translateX
:
'
100px
'
,
translateY
:
'
0px
'
,
translateZ
:
'
20px
'
,
rotateX
:
'
0deg
'
,
rotateY
:
'
0deg
'
,
rotateZ
:
'
30deg
'
,
scaleX
:
1
,
scaleY
:
1
,
scaleZ
:
2
,
skewX
:
'
0
'
,
skewY
:
'
0
'
,
skewZ
:
'
30deg
'
},
opacity
:
1
,
offset
:
0.0
,
width
:
'
100%
'
,
height
:
'
30px
'
,
backgroundColor
:
'
#ffff00
'
,
backgroundPosition
:
'
0px
'
,
transformOrigin
:
'
center center
'
},
];
export
default
{
data
:{
left
:
0
,
top
:
0
,
},
onShow
(){
// 通用属性
var
prop1
=
this
.
$element
(
'
prop1
'
);
var
name1
=
prop1
.
dataSet
.
name
var
prop2
=
this
.
$refs
.
prop2
;
var
name2
=
prop2
.
dataSet
.
name
prompt
.
showToast
({
message
:
'
prop1--
'
+
name1
+
'
\n
prop2--
'
+
name2
});
},
touchStart
(
event
){
var
globalX
=
event
.
touches
[
0
].
globalX
var
globalY
=
event
.
touches
[
0
].
globalY
var
localX
=
event
.
touches
[
0
].
localX
var
localY
=
event
.
touches
[
0
].
localY
var
size
=
event
.
touches
[
0
].
size
var
force
=
event
.
touches
[
0
].
force
var
changeGlobalX
=
event
.
changedTouches
[
0
].
globalX
var
changeGlobalY
=
event
.
changedTouches
[
0
].
globalY
var
changeLocalX
=
event
.
changedTouches
[
0
].
localX
var
changeLocalY
=
event
.
changedTouches
[
0
].
localY
var
changeSize
=
event
.
changedTouches
[
0
].
size
var
changeForce
=
event
.
changedTouches
[
0
].
force
var
message
=
'
globalX--
'
+
globalX
+
'
,globalY--
'
+
globalY
+
'
,localX--
'
+
localX
+
'
,localY--
'
+
localY
+
'
,size--
'
+
size
+
'
,force--
'
+
force
+
'
,changeGlobalX--
'
+
changeGlobalX
+
'
,changeGlobalY--
'
+
changeGlobalY
+
'
,changeLocalX--
'
+
changeLocalX
+
'
,changeLocalY--
'
+
changeLocalY
+
'
,changeSize--
'
+
changeSize
+
'
,changeForce--
'
+
changeForce
;
prompt
.
showToast
({
message
:
'
touchstart:
\n
'
+
message
});
},
touchMove
(
event
){
var
globalX
=
event
.
touches
[
0
].
globalX
var
globalY
=
event
.
touches
[
0
].
globalY
var
localX
=
event
.
touches
[
0
].
localX
var
localY
=
event
.
touches
[
0
].
localY
var
size
=
event
.
touches
[
0
].
size
var
force
=
event
.
touches
[
0
].
force
var
changeGlobalX
=
event
.
changedTouches
[
0
].
globalX
var
changeGlobalY
=
event
.
changedTouches
[
0
].
globalY
var
changeLocalX
=
event
.
changedTouches
[
0
].
localX
var
changeLocalY
=
event
.
changedTouches
[
0
].
localY
var
changeSize
=
event
.
changedTouches
[
0
].
size
var
changeForce
=
event
.
changedTouches
[
0
].
force
var
message
=
'
globalX--
'
+
globalX
+
'
,globalY--
'
+
globalY
+
'
,localX--
'
+
localX
+
'
,localY--
'
+
localY
+
'
,size--
'
+
size
+
'
,force--
'
+
force
+
'
,changeGlobalX--
'
+
changeGlobalX
+
'
,changeGlobalY--
'
+
changeGlobalY
+
'
,changeLocalX--
'
+
changeLocalX
+
'
,changeLocalY--
'
+
changeLocalY
+
'
,changeSize--
'
+
changeSize
+
'
,changeForce--
'
+
changeForce
;
prompt
.
showToast
({
message
:
'
touchMove:
\n
'
+
message
});
},
touchEnd
(
event
){
var
globalX
=
event
.
touches
[
0
].
globalX
var
globalY
=
event
.
touches
[
0
].
globalY
var
localX
=
event
.
touches
[
0
].
localX
var
localY
=
event
.
touches
[
0
].
localY
var
size
=
event
.
touches
[
0
].
size
var
force
=
event
.
touches
[
0
].
force
var
changeGlobalX
=
event
.
changedTouches
[
0
].
globalX
var
changeGlobalY
=
event
.
changedTouches
[
0
].
globalY
var
changeLocalX
=
event
.
changedTouches
[
0
].
localX
var
changeLocalY
=
event
.
changedTouches
[
0
].
localY
var
changeSize
=
event
.
changedTouches
[
0
].
size
var
changeForce
=
event
.
changedTouches
[
0
].
force
var
message
=
'
globalX--
'
+
globalX
+
'
,globalY--
'
+
globalY
+
'
,localX--
'
+
localX
+
'
,localY--
'
+
localY
+
'
,size--
'
+
size
+
'
,force--
'
+
force
+
'
,changeGlobalX--
'
+
changeGlobalX
+
'
,changeGlobalY--
'
+
changeGlobalY
+
'
,changeLocalX--
'
+
changeLocalX
+
'
,changeLocalY--
'
+
changeLocalY
+
'
,changeSize--
'
+
changeSize
+
'
,changeForce--
'
+
changeForce
;
prompt
.
showToast
({
message
:
'
touchEnd:
\n
'
+
message
});
},
touchCancel
(
event
){
var
globalX
=
event
.
touches
[
0
].
globalX
var
globalY
=
event
.
touches
[
0
].
globalY
var
localX
=
event
.
touches
[
0
].
localX
var
localY
=
event
.
touches
[
0
].
localY
var
size
=
event
.
touches
[
0
].
size
var
force
=
event
.
touches
[
0
].
force
var
changeGlobalX
=
event
.
changedTouches
[
0
].
globalX
var
changeGlobalY
=
event
.
changedTouches
[
0
].
globalY
var
changeLocalX
=
event
.
changedTouches
[
0
].
localX
var
changeLocalY
=
event
.
changedTouches
[
0
].
localY
var
changeSize
=
event
.
changedTouches
[
0
].
size
var
changeForce
=
event
.
changedTouches
[
0
].
force
var
message
=
'
globalX--
'
+
globalX
+
'
,globalY--
'
+
globalY
+
'
,localX--
'
+
localX
+
'
,localY--
'
+
localY
+
'
,size--
'
+
size
+
'
,force--
'
+
force
+
'
,changeGlobalX--
'
+
changeGlobalX
+
'
,changeGlobalY--
'
+
changeGlobalY
+
'
,changeLocalX--
'
+
changeLocalX
+
'
,changeLocalY--
'
+
changeLocalY
+
'
,changeSize--
'
+
changeSize
+
'
,changeForce--
'
+
changeForce
;
prompt
.
showToast
({
message
:
'
touchCancel:
\n
'
+
message
});
},
click
(){
prompt
.
showToast
({
message
:
'
click
'
});
},
doubleClick
(){
prompt
.
showToast
({
message
:
'
doubleClick
'
});
},
longPress
(){
prompt
.
showToast
({
message
:
'
longPress
'
});
},
focus
(){
prompt
.
showToast
({
message
:
'
focus
'
});
},
blur
(){
prompt
.
showToast
({
message
:
'
blur
'
});
},
key
(
event
){
var
code
=
event
.
code
;
var
action
=
event
.
action
;
var
repeatCount
=
event
.
repeatCount
;
var
timestampStart
=
event
.
timestampStart
;
var
message
=
'
code--
'
+
code
+
'
,action--
'
+
action
+
'
,repeatCount--
'
+
repeatCount
+
'
,timestampStart--
'
+
timestampStart
;
prompt
.
showToast
({
message
:
'
key:
\n
'
+
message
});
},
swipe
(
event
){
var
direction
=
event
.
direction
;
var
distance
=
event
.
distance
;
var
message
=
'
direction--
'
+
direction
+
'
,distance--
'
+
distance
;
prompt
.
showToast
({
message
:
'
swipe:
\n
'
+
message
});
},
attached
(){
prompt
.
showToast
({
message
:
'
attached
'
});
},
detached
(){
prompt
.
showToast
({
message
:
'
detached
'
});
},
pinchStart
(
event
){
var
scale
=
event
.
scale
var
pinchCenterX
=
event
.
pinchCenterX
var
pinchCenterY
=
event
.
pinchCenterY
var
message
=
'
scale--
'
+
scale
+
'
,pinchCenterX--
'
+
pinchCenterX
+
'
,pinchCenterY--
'
+
pinchCenterY
;
prompt
.
showToast
({
message
:
'
pinchStart:
\n
'
+
message
});
},
pinchUpdate
(
event
){
var
scale
=
event
.
scale
var
pinchCenterX
=
event
.
pinchCenterX
var
pinchCenterY
=
event
.
pinchCenterY
var
message
=
'
scale--
'
+
scale
+
'
,pinchCenterX--
'
+
pinchCenterX
+
'
,pinchCenterY--
'
+
pinchCenterY
;
prompt
.
showToast
({
message
:
'
pinchUpdate:
\n
'
+
message
});
},
pinchEnd
(
event
){
var
scale
=
event
.
scale
var
pinchCenterX
=
event
.
pinchCenterX
var
pinchCenterY
=
event
.
pinchCenterY
var
message
=
'
scale--
'
+
scale
+
'
,pinchCenterX--
'
+
pinchCenterX
+
'
,pinchCenterY--
'
+
pinchCenterY
;
prompt
.
showToast
({
message
:
'
pinchUpdate:
\n
'
+
message
});
},
pinchCancel
(
event
){
var
scale
=
event
.
scale
var
pinchCenterX
=
event
.
pinchCenterX
var
pinchCenterY
=
event
.
pinchCenterY
var
message
=
'
scale--
'
+
scale
+
'
,pinchCenterX--
'
+
pinchCenterX
+
'
,pinchCenterY--
'
+
pinchCenterY
;
prompt
.
showToast
({
message
:
'
pinchCancel:
\n
'
+
message
});
},
dragStart
(
event
){
var
type
=
event
.
type
var
globalX
=
event
.
globalX
var
globalY
=
event
.
globalY
var
timestamp
=
event
.
timestamp
var
message
=
'
type--
'
+
type
+
'
,globalX--
'
+
globalX
+
'
,globalY--
'
+
globalY
+
'
,timestamp--
'
+
timestamp
;
prompt
.
showToast
({
message
:
'
dragStart:
\n
'
+
message
});
},
drag
(
event
){
var
type
=
event
.
type
var
globalX
=
event
.
globalX
var
globalY
=
event
.
globalY
var
timestamp
=
event
.
timestamp
var
message
=
'
type--
'
+
type
+
'
,globalX--
'
+
globalX
+
'
,globalY--
'
+
globalY
+
'
,timestamp--
'
+
timestamp
;
prompt
.
showToast
({
message
:
'
drag:
\n
'
+
message
});
},
dragEnd
(
event
){
var
type
=
event
.
type
var
globalX
=
event
.
globalX
var
globalY
=
event
.
globalY
var
timestamp
=
event
.
timestamp
var
message
=
'
type--
'
+
type
+
'
,globalX--
'
+
globalX
+
'
,globalY--
'
+
globalY
+
'
,timestamp--
'
+
timestamp
;
prompt
.
showToast
({
message
:
'
dragEnd:
\n
'
+
message
});
},
dragEnter
(
event
){
var
type
=
event
.
type
var
globalX
=
event
.
globalX
var
globalY
=
event
.
globalY
var
timestamp
=
event
.
timestamp
var
message
=
'
type--
'
+
type
+
'
,globalX--
'
+
globalX
+
'
,globalY--
'
+
globalY
+
'
,timestamp--
'
+
timestamp
;
prompt
.
showToast
({
message
:
'
dragEnter:
\n
'
+
message
});
},
dragOver
(
event
){
var
type
=
event
.
type
var
globalX
=
event
.
globalX
var
globalY
=
event
.
globalY
var
timestamp
=
event
.
timestamp
var
message
=
'
type--
'
+
type
+
'
,globalX--
'
+
globalX
+
'
,globalY--
'
+
globalY
+
'
,timestamp--
'
+
timestamp
;
prompt
.
showToast
({
message
:
'
dragOver:
\n
'
+
message
});
},
dragLeave
(
event
){
var
type
=
event
.
type
var
globalX
=
event
.
globalX
var
globalY
=
event
.
globalY
var
timestamp
=
event
.
timestamp
var
message
=
'
type--
'
+
type
+
'
,globalX--
'
+
globalX
+
'
,globalY--
'
+
globalY
+
'
,timestamp--
'
+
timestamp
;
prompt
.
showToast
({
message
:
'
dragLeave:
\n
'
+
message
});
},
drop
(
event
){
var
type
=
event
.
type
var
globalX
=
event
.
globalX
var
globalY
=
event
.
globalY
var
timestamp
=
event
.
timestamp
var
message
=
'
type--
'
+
type
+
'
,globalX--
'
+
globalX
+
'
,globalY--
'
+
globalY
+
'
,timestamp--
'
+
timestamp
;
prompt
.
showToast
({
message
:
'
drop:
\n
'
+
message
});
},
functionTest1
(
event
){
var
function1
=
this
.
$refs
.
function1
;
function1
.
focus
(
true
)
var
rect
=
function1
.
getBoundingClientRect
();
var
width
=
rect
.
width
;
var
height
=
rect
.
height
;
var
left
=
rect
.
left
;
var
top
=
rect
.
top
;
var
message
=
'
width--
'
+
width
+
'
,height--
'
+
height
+
'
,left--
'
+
left
+
'
,top--
'
+
top
;
prompt
.
showToast
({
message
:
'
function1 rect:
\n
'
+
message
});
},
functionTest2
(
event
){
var
function2
=
this
.
$refs
.
function2
;
let
observer
=
function2
.
createIntersectionObserver
({
ratios
:
[
0.2
,
0
],
// number
});
observer
.
observe
((
isVisible
,
ratio
)
=>
{
console
.
info
(
'
this element is
'
+
isVisible
+
'
ratio is
'
+
ratio
)
prompt
.
showToast
({
message
:
'
function2 observer:
\n
'
+
'
isVisible--
'
+
isVisible
+
'
,ratio--
'
+
ratio
});
})
observer
.
unobserve
()
},
functionTest3
(
event
){
var
function3
=
this
.
$refs
.
function3
;
var
animation
=
function3
.
animate
(
frames
,
options
);
animation
.
play
()
animation
.
onfinish
=
function
(){
prompt
.
showToast
({
message
:
'
The animation is finished.
'
});
};
animation
.
oncancel
=
function
(){
prompt
.
showToast
({
message
:
'
The animation is canceled.
'
});
};
animation
.
onrepeat
=
function
(){
prompt
.
showToast
({
message
:
'
The animation is repeated.
'
});
};
setTimeout
(()
=>
{
animation
.
reverse
()
},
500
)
setTimeout
(()
=>
{
animation
.
pause
()
},
1000
)
setTimeout
(()
=>
{
animation
.
cancel
()
},
1500
)
},
functionTest4
(
event
){
var
function4
=
this
.
$refs
.
function4
;
let
ctx
=
function4
.
getContext
(
'
2d
'
,
{
antialias
:
true
});
ctx
.
beginPath
();
ctx
.
arc
(
50
,
15
,
15
,
0
,
6.28
);
ctx
.
stroke
();
},
functionTest5
(
event
){
var
function5
=
this
.
$refs
.
function5
;
let
dataURL
=
function5
.
toDataURL
({
type
:
'
image/png
'
},
{
quality
:
0.92
});
prompt
.
showToast
({
message
:
'
function5 dataURL:
'
+
dataURL
});
},
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/circle/index.css
0 → 100644
浏览文件 @
5bd1ab66
/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/* xxx.css */
.container
{
flex-direction
:
row
;
width
:
100%
;
height
:
100%
;
padding
:
1px
;
}
.sub-container
{
flex-direction
:
column
;
height
:
100%
;
flex-weight
:
1
;
}
.style-container
{
flex-direction
:
column
;
height
:
100%
;
flex-weight
:
1
;
}
.title
{
width
:
100%
;
font-size
:
18px
;
margin
:
2px
;
padding
:
2px
;
font-weight
:
bold
;
text-align
:
center
;
}
.sub-title
{
width
:
100%
;
font-size
:
14px
;
text-align
:
left
;
margin
:
2px
;
padding
:
2px
;
}
.style1
{
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
;
}
.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
;
}
@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
)
}
}
.ani2
{
color
:
#ad4e2a
;
stroke-width
:
55px
;
margin
:
5px
;
transform-origin
:
2%
3%
;
animation-name
:
ani2Go
;
animation-delay
:
5s
;
animation-duration
:
10s
;
animation-iteration-count
:
4
;
animation-timing-function
:
ease-out
;
animation-direction
:
reverse
;
animation-fill-mode
:
forwards
;
animation-play-state
:
running
;
transition
:
all
0
ease
0
;
}
@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
);
}
}
.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/circle/index.hml
0 → 100644
浏览文件 @
5bd1ab66
<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/index.js
0 → 100644
浏览文件 @
5bd1ab66
/**
* 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
:
{
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/ellipse/index.css
0 → 100644
浏览文件 @
5bd1ab66
/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/* xxx.css */
.container
{
flex-direction
:
row
;
width
:
100%
;
height
:
100%
;
padding
:
1px
;
}
.sub-container
{
flex-direction
:
column
;
height
:
100%
;
flex-weight
:
1
;
}
.style-container
{
flex-direction
:
column
;
height
:
100%
;
flex-weight
:
1
;
}
.title
{
width
:
100%
;
font-size
:
18px
;
margin
:
2px
;
padding
:
2px
;
font-weight
:
bold
;
text-align
:
center
;
}
.sub-title
{
width
:
100%
;
font-size
:
14px
;
text-align
:
left
;
margin
:
2px
;
padding
:
2px
;
}
.style1
{
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%;*/
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
:
85%
;
height
:
7%
;
padding
:
10px
;
margin
:
5px
;
border
:
2px
solid
#000000
;
}
.contain1
{
width
:
100%
;
height
:
70px
;
flex-direction
:
column
;
}
.style5
{
width
:
80%
;
height
:
50px
;
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
:
100px
;
height
:
50px
;
position
:
absolute
;
left
:
10px
;
top
:
50px
;
bottom
:
5px
;
right
:
10px
;
background-color
:
pink
;
border-image
:
url('common/images/icon.png')
1px
2px
3px
4px
2px
3px
4px
5px
3px
4px
5px
6px
round
;
}
.style7
{
margin-bottom
:
50px
;
margin-top
:
10px
;
color
:
green
;
stroke-width
:
30px
;
}
.prop-container
{
flex-direction
:
column
;
height
:
100%
;
flex-weight
:
2
;
}
#prop1
{
background-color
:
mediumslateblue
;
width
:
100%
;
margin
:
3px
5px
;
}
.prop2
{
background-color
:
pink
;
width
:
100%
;
margin
:
3px
5px
;
}
.prop3
{
background-color
:
darkseagreen
;
width
:
100%
;
margin
:
3px
5px
;
}
.prop4
{
background-color
:
yellowgreen
;
width
:
100%
;
margin
:
3px
5px
;
}
.prop5
{
background-color
:
cornflowerblue
;
width
:
100%
;
margin
:
3px
5px
;
}
.prop6
{
background-color
:
burlywood
;
width
:
100%
;
margin
:
3px
5px
;
}
.prop7
{
background-color
:
crimson
;
width
:
100%
;
margin
:
3px
5px
;
}
.ani-container
{
flex-direction
:
column
;
height
:
100%
;
flex-weight
:
1
;
}
.ani1
{
color
:
#72ac33
;
stroke-width
:
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
)
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
)
}
}
.ani2
{
color
:
#ad4e2a
;
stroke-width
:
55px
;
margin
:
5px
;
transform-origin
:
2%
3%
;
animation-name
:
ani2Go
;
animation-delay
:
5s
;
animation-duration
:
10s
;
animation-iteration-count
:
4
;
animation-timing-function
:
ease-out
;
animation-direction
:
reverse
;
animation-fill-mode
:
forwards
;
animation-play-state
:
running
;
transition
:
all
0
ease
0
;
}
@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
);
}
}
.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/ellipse/index.hml
0 → 100644
浏览文件 @
5bd1ab66
<div class="container">
<div class="style-container">
<text class="title">
通用样式
</text>
<text class="sub-title">
ellipse通用样式1
</text>
<ellipse class="style1" id="style1" cx="35" cy="10" rx="40" ry="10" stroke-width="3"
stroke="red" fill-opacity="0"></ellipse>
<text class="sub-title">
ellipse通用样式2
</text>
<ellipse class="style2" id="style2" cx="40" cy="25" rx="40" ry="20"
stroke-width="3" stroke="red" stroke-dasharray="10 5" stroke-dashoffset="3" fill-opacity="0"></ellipse>
<text class="sub-title">
ellipse通用样式3
</text>
<svg x="0" y="0" width="200" height="200" fill="white" fill-opacity="0">
<ellipse class="style3" id="style3" cx="40" cy="25" rx="40" ry="20"
stroke-width="3" stroke="red" ></ellipse>
</svg>
<text class="sub-title">
ellipse通用样式4
</text>
<ellipse class="style4" id="style4" cx="40" cy="15" rx="40" ry="20" stroke-width="3"
stroke="block" stroke-dasharray="10 5" stroke-dashoffset="3"></ellipse>
<text class="sub-title">
ellipse通用样式5
</text>
<div class="contain1">
<ellipse class="style5" id="style5" cx="50" cy="25" rx="40" ry="20" stroke-width="3"
fill="white" stroke="red" stroke-dasharray="10 5" stroke-dashoffset="3"></ellipse>
<ellipse class="style6" id="style6" cx="50" cy="25" rx="40" ry="20" stroke-width="3"
fill="yellow" stroke="green" ></ellipse>
</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" >
<ellipse class="prop1" id="prop1" data-name ="prop1" cx="50" cy="18" rx="30" ry="15"
stroke="blue" stroke-width="4" fill-opacity="0.5"></ellipse>
</svg>
<text class="sub-title">
circle通用属性2
</text>
<svg x="0" y="0" width="200" height="50" >
<ellipse class="prop2" ref="prop2" data-name ="prop2" cx="50" cy="18" rx="30" ry="15"
stroke-width="3" fill="red" stroke="blue"></ellipse>
</svg>
<text class="sub-title">
circle通用属性3
</text>
<svg x="0" y="0" width="200" height="50" fill="white">
<ellipse class="prop3" id="prop3" data-name ="prop1" cx="50" cy="18" rx="30" ry="15"
stroke="blue" stroke-width="4" fill-opacity="0.5"></ellipse>
</svg>
<text class="sub-title">
circle通用属性4
</text>
<svg x="0" y="0" width="200" height="50" fill="white">
<ellipse class="prop4" id="prop4" data-name ="prop1" cx="50" cy="18" rx="30" ry="15"
stroke-width="3" stroke="red" stroke-dasharray="10 5" stroke-dashoffset="3"></ellipse>
</svg>
<text class="sub-title">
circle通用属性5
</text>
<svg x="0" y="0" width="200" height="50" fill="white" fill-opacity="0">
<ellipse class="prop5" id="prop5" data-name ="prop1" cx="50" cy="25" rx="30" ry="15"
stroke-width="3" stroke="red" stroke-dasharray="10 5" stroke-dashoffset="3" transform="rotate(-10)"></ellipse>
</svg>
<text class="sub-title">
circle通用属性6
</text>
<svg x="0" y="0" width="200" height="150" fill="white" fill-opacity="0">
<ellipse class="prop6" id="prop6" data-name ="prop1" cx="50" cy="8" rx="50" ry="15"
stroke-width="3" stroke="blue" stroke-dasharray="10 5" stroke-dashoffset="3" transform="skewY(45)"></ellipse>
</svg>
<text class="sub-title">
circle通用属性7
</text>
<svg x="0" y="0" width="200" height="50" fill="white" fill-opacity="0">
<ellipse class="prop7" id="prop7" data-name ="prop1" cx="50" cy="25" rx="30" ry="15"
stroke-width="3" stroke="yellow" stroke-dasharray="10 5" stroke-dashoffset="3" transform="skewY(-10)"></ellipse>
</svg>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="ani-container">
<text class="title">
动画样式
</text>
<text class="sub-title">
ellipse动画样式1
</text>
<svg class="ani1" width="100" height="100" >
<ellipse cx="30" cy="50" rx="20" ry="40" stroke-width="3" fill="red" stroke="blue" ></ellipse>
</svg>
<text class="sub-title">
ellipse动画样式2
</text>
<svg class="ani2" width="100" height="100" >
<ellipse cx="60" cy="50" rx="20" ry="40" stroke-width="3" fill="red" stroke="blue" ></ellipse>
</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">
ellipse渐变样式1
</text>
<svg class="gradient1" x="0" y="0" width="200" height="100" >
<ellipse cx="60" cy="45" rx="20" ry="40" fill="white" fill-opacity="0" stroke-width="3" fill="red" stroke="block" ></ellipse>
</svg>
<text class="sub-title">
ellipse渐变样式2
</text>
<svg class="gradient2" x="0" y="0" width="200" height="100" >
<ellipse cx="60" cy="45" rx="20" ry="40" fill="white" fill-opacity="0" stroke-width="3" fill="red" stroke="blue" ></ellipse>
</svg>
<text class="sub-title">
ellipse渐变样式3
</text>
<svg class="gradient3" x="0" y="0" width="200" height="100" >
<ellipse cx="60" cy="45" rx="20" ry="40" fill="white" fill-opacity="0" stroke-width="3" fill="red" stroke="yellow" ></ellipse>
</svg>
<text class="sub-title">
ellipse渐变样式4
</text>
<svg class="gradient4" x="0" y="0" width="200" height="100" >
<ellipse cx="60" cy="45" rx="20" ry="40" fill="white" fill-opacity="0" stroke-width="3" fill="red" stroke="red" ></ellipse>
</svg>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="access-container">
<text class="title">
无障碍
</text>
<text class="sub-title">
ellipse无障碍1
</text>
<svg class="access1" accessibilitygroup ="true"
accessibilitytext="这是ellipse"
accessibilitydescription="点击此按键会弹出一个对话框"
accessibilityimportance="no-hide-descendants"
width="200" height="80">
<ellipse cx="50" cy="35" rx="20" ry="30" fill="white" fill-opacity="0" stroke-width="3" fill="red" stroke="#00FF00" ></ellipse>
</svg>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="multimode-container">
<text class="title">
多模输入
</text>
<text class="sub-title">
ellipse多模输入1
</text>
<svg class="multimode1" width="200" height="80" voicelabel = "voice"
subscriptflag="on" subscriptlabel="divider" scenelabel="common">
<ellipse cx="50" cy="25" rx="40" ry="20" fill="white" fill-opacity="0" stroke-width="3" fill="red" stroke="#978666" ></ellipse>
</svg>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/ellipse/index.js
0 → 100644
浏览文件 @
5bd1ab66
/**
* 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
:
{
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/gridCol/index.css
0 → 100644
浏览文件 @
5bd1ab66
/**
* Copyright (c) 2022 Shenzhen kaiHong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/* xxx.css */
.container
{
flex-direction
:
row
;
width
:
100%
;
height
:
100%
;
padding
:
1px
;
}
.sub-container
{
flex-direction
:
column
;
height
:
100%
;
flex-weight
:
1
;
}
.style-container
{
flex-direction
:
column
;
height
:
70%
;
}
.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/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
;
}
.style7
{
flex-direction
:
column
;
flex-wrap
:
wrap
;
justify-content
:
center
;
align-items
:
center
;
align-content
:
space-around
;
display
:
flex
;
height
:
40px
;
background-color
:
blue
;
}
.flex-item
{
width
:
20px
;
height
:
20px
;
border-radius
:
16px
;
}
.style8
{
flex-direction
:
row
;
flex-wrap
:
nowrap
;
scrollbar-color
:
yellow
;
scrollbar-width
:
10px
;
overscroll-effect
:
spring
;
height
:
20px
;
overflow
:
scroll
;
flex-wrap
:
wrap
;
justify-content
:
center
;
align-items
:
center
;
align-content
:
space-around
;
}
.style9
{
display
:
grid
;
height
:
20px
;
grid-template-columns
:
20%
20%
;
grid-columns-gap
:
14px
;
grid-rows-gap
:
4px
;
grid-template-rows
:
15%
15%
;
}
.color-primary
{
background-color
:
mediumpurple
;
}
.color-warning
{
background-color
:
pink
;
}
.color-success
{
background-color
:
cornflowerblue
;
}
.grid-child
{
width
:
100%
;
border-radius
:
2px
;
}
.grid-left-top
{
width
:
20px
;
height
:
20px
;
border-radius
:
10px
;
border
:
1px
solid
plum
;
background
:
linear-gradient
(
pink
,
purple
);
box-shadow
:
0px
0px
1px
1px
pink
;
grid-row-start
:
0
;
grid-column-start
:
0
;
grid-row-end
:
0
;
grid-column-end
:
0
;
}
.grid-left-bottom
{
width
:
20px
;
height
:
20px
;
border-radius
:
5px
;
border
:
1px
solid
plum
;
background
:
linear-gradient
(
pink
,
#00aaee
);
box-shadow
:
0px
0px
1px
1px
pink
;
grid-row-start
:
1
;
grid-column-start
:
0
;
grid-row-end
:
1
;
grid-column-end
:
0
;
}
.grid-right-top
{
width
:
20px
;
height
:
20px
;
border-radius
:
3px
;
border
:
1px
dotted
plum
;
background
:
linear-gradient
(
mediumpurple
,
#00aaee
);
box-shadow
:
0px
0px
1px
1px
pink
;
grid-row-start
:
0
;
grid-column-start
:
1
;
grid-row-end
:
0
;
grid-column-end
:
1
;
}
.grid-right-bottom
{
width
:
20px
;
height
:
20px
;
border-radius
:
5px
;
border
:
1px
dotted
plum
;
background
:
linear-gradient
(
pink
,
mediumpurple
);
box-shadow
:
0px
0px
2px
2px
pink
;
grid-row-start
:
1
;
grid-column-start
:
1
;
grid-row-end
:
1
;
grid-column-end
:
1
;
}
.event-container
{
flex-direction
:
column
;
flex-weight
:
1
;
}
.event1
{
width
:
60%
;
flex-weight
:
1
;
background-color
:
yellow
;
}
.event2
{
width
:
70%
;
flex-weight
:
1
;
background-color
:
red
;
}
.event3
{
width
:
80%
;
flex-weight
:
1
;
background-color
:
#ad4e2a
;
}
.event4
{
flex-direction
:
row
;
width
:
90%
;
flex-weight
:
1
;
overflow
:
scroll
;
}
.event5
{
flex-direction
:
column
;
width
:
100%
;
height
:
90px
;
overflow
:
scroll
;
}
.prop-container
{
flex-direction
:
column
;
}
#prop1
{
color
:
#ad4e2a
;
height
:
30px
;
background-color
:
mediumslateblue
;
width
:
100%
;
margin
:
5px
;
}
.prop2
{
color
:
#343524
;
height
:
30px
;
background-color
:
pink
;
width
:
100%
;
margin
:
5px
;
}
.prop3
{
color
:
#456345
;
height
:
30px
;
background-color
:
darkseagreen
;
width
:
100%
;
margin
:
5px
;
}
.prop5
{
color
:
#831834
;
margin
:
5px
;
height
:
70px
;
}
.ani-container
{
flex-direction
:
column
;
height
:
100%
;
flex-weight
:
1
;
}
.ani1
{
color
:
#72ac33
;
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
{
color
:
#ad4e2a
;
width
:
55px
;
height
:
55px
;
margin
:
5px
;
}
.gradient-container
{
flex-direction
:
column
;
}
.gradient1
{
width
:
100%
;
height
:
20px
;
margin
:
5px
;
background
:
linear-gradient
(
red
,
#00ff00
);
}
.gradient2
{
width
:
100%
;
height
:
20px
;
margin
:
5px
;
background
:
linear-gradient
(
45deg
,
rgb
(
255
,
0
,
0
),
rgb
(
0
,
255
,
0
));
}
.gradient3
{
width
:
100%
;
height
:
20px
;
margin
:
5px
;
background
:
linear-gradient
(
to
right
,
rgb
(
255
,
0
,
0
)
90px
,
rgb
(
0
,
255
,
0
)
60%
);
}
.gradient4
{
width
:
100%
;
height
:
20px
;
margin
:
5px
;
background
:
repeating-linear-gradient
(
to
right
,
rgba
(
255
,
255
,
0
,
1
)
30px
,
rgba
(
0
,
0
,
255
,
.5
)
60px
);
}
.accessibility-container
{
flex-direction
:
column
;
}
.accessibility1
{
background-color
:
#321124
;
margin
:
5px
;
width
:
90%
;
height
:
30px
;
}
.atom-container
{
flex-direction
:
column
;
}
.multiMode-container
{
flex-direction
:
column
;
}
.multiMode1
{
background-color
:
#978666
;
width
:
100%
;
height
:
30px
;
margin
:
5px
;
}
.function-container
{
flex-direction
:
column
;
}
.function1
{
background-color
:
#ff0000
;
width
:
60%
;
height
:
20px
;
}
.function2
{
background-color
:
#00ff00
;
width
:
60%
;
height
:
20px
;
}
.function3
{
background-color
:
#0000ff
;
width
:
100%
;
height
:
20px
;
}
.function4
{
flex-direction
:
row
;
width
:
60%
;
height
:
20px
;
overflow
:
scroll
;
}
.container-style
{
width
:
100%
;
height
:
50px
;
background-color
:
#b8b8bf
;
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/gridCol/index.hml
0 → 100644
浏览文件 @
5bd1ab66
<!--/**
* 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.
*/-->
<div class="container">
<div class="sub-container">
<div class="style-container">
<text class="title">
通用样式
</text>
<text class="sub-title">
grid-col通用样式1
</text>
<grid-row class="container-style">
<grid-col class="style1" >
</grid-col>
</grid-row>
<text class="sub-title">
grid-col通用样式2
</text>
<grid-row class="container-style">
<grid-col class="style2" >
</grid-col>
</grid-row>
<text class="sub-title">
grid-col通用样式3
</text>
<grid-row class="container-style">
<grid-col class="style3" >
</grid-col>
</grid-row>
<text class="sub-title">
grid-col通用样式4
</text>
<grid-row class="container-style">
<grid-col class="style4" >
</grid-col>
</grid-row>
<text class="sub-title">
grid-col通用样式5
</text>
<grid-row class="contain1">
<grid-col class="style5" >
</grid-col>
<grid-col class="style6" >
</grid-col>
</grid-row>
<text class="sub-title">
grid-col特有样式
</text>
<grid-row class="style7">
<grid-col class="flex-item color-primary">
</grid-col>
<grid-col class="flex-item color-warning">
</grid-col>
<grid-col class="flex-item color-success">
</grid-col>
</grid-row>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="ani-container">
<text class="title">
动画样式
</text>
<text class="sub-title">
grid-col动画样式1
</text>
<grid-row class="container-style">
<grid-col class="ani1" >
</grid-col>
</grid-row>
<text class="sub-title">
grid-col动画样式2
</text>
<grid-row class="container-style">
<grid-col class="ani2" >
</grid-col>
</grid-row>
</div>
</div>
<div style="background-color: #000000; width: 2px; height: 100%;">
</div>
<div class="sub-container">
<div class="prop-container">
<text class="title">
通用属性
</text>
<text class="sub-title">
grid-col通用属性1
</text>
<grid-row class="container-style">
<grid-col id="prop1" class="prop1"
disabled = "true" focusable ="true"
data-name ="prop1" click-effect="spring-medium"
dir ="rtl">
</grid-col>
</grid-row>
<text class="sub-title">
grid-col通用属性2
</text>
<grid-row class="container-style">
<grid-col class="prop2" ref ="prop2"
disabled = "false" focusable ="false"
data-name ="prop2" click-effect="spring-large"
dir ="ltr">
</grid-col>
</grid-row>
<text class="sub-title">
grid-col通用属性3
</text>
<grid-row class="container-style">
<grid-col style="color: #679855; margin: 5px;" class="prop3">
</grid-col>
</grid-row>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="event-container" >
<text class="title">
通用事件
</text>
<text class="sub-title">
grid-col通用事件1
</text>
<grid-row class="container-style">
<grid-col class ="event1" ontouchstart="touchStart" ontouchmove="touchMove"
ontouchend="touchEnd" ontouchcancel="touchCancel">
</grid-col>
</grid-row>
<text class="sub-title">
grid-col通用事件2
</text>
<grid-row class="container-style">
<grid-col class ="event2" onclick="click" ondoubleclick="doubleClick"
onlongpress="longPress" onfocus="focus" onblur="blur" onkey="key"
onswipe="swipe" onattached="attached" ondetached="detached">
</grid-col>
</grid-row>
<text class="sub-title">
grid-col通用事件3
</text>
<grid-row class="container-style">
<grid-col class ="event3" onpinchstart="pinchStart" onpinchupdate="pinchUpdate"
onpinchend="pinchEnd" onpinchcancel="pinchCancel"
ondragstart="dragStart" ondrag="drag"
ondragend="dragEnd" ondragenter="dragEnter"
ondragover="dragOver" ondragleave="dragLeave"
ondrop="drop">
</grid-col>
</grid-row>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="function-container">
<text class="title">
通用方法
</text>
<text class="sub-title">
grid-col通用方法1
</text>
<div id="function1" class="function1" ontouchstart="functionTest1">
</div>
<text class="sub-title">
grid-col通用方法2
</text>
<grid-col id="function2" class="function2" ontouchstart="functionTest2">
</grid-col>
<text class="sub-title">
grid-col通用方法3
</text>
<grid-col id="function3" class="function3" ontouchstart="functionTest3">
</grid-col>
</div>
</div>
<div style="background-color: #000000; width: 2px; height: 100%;">
</div>
<div class="sub-container">
<div class="gradient-container">
<text class="title">
渐变样式
</text>
<text class="sub-title">
grid-col渐变样式1
</text>
<grid-col class="gradient1">
</grid-col>
<text class="sub-title">
grid-col渐变样式2
</text>
<grid-col class="gradient2">
</grid-col>
<text class="sub-title">
grid-col渐变样式3
</text>
<grid-col class="gradient3">
</grid-col>
<text class="sub-title">
grid-col渐变样式4
</text>
<grid-col class="gradient4">
</grid-col>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="accessibility-container">
<text class="title">
无障碍
</text>
<text class="sub-title">
grid-col无障碍1
</text>
<grid-col class="accessibility1" accessibilitygroup ="true"
accessibilitytext="这是div"
accessibilitydescription="点击此按键会弹出一个对话框"
accessibilityimportance="no-hide-descendants">
</grid-col>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="atom-container">
<text class="title">
原子布局
</text>
<text class="sub-title">
grid-col原子布局1
</text>
<div style="flex-direction: row;height: 30px;width: 100%;">
<grid-col style="width:20px;height:20px;background-color: blue;display-index: 1;">
</grid-col>
<grid-col style="width:30px; height:20px;background-color: black;display-index: 5;">
</grid-col>
<grid-col style="width:40px; height:20px;background-color: yellow;display-index: 4;">
</grid-col>
<grid-col style="width:10px; height:20px;background-color: red;display-index: 3;">
</grid-col>
<grid-col style="width:25px; height:20px;background-color:pink;display-index: 7;">
</grid-col>
<grid-col style="width:15px; height:20px;background-color: palegoldenrod;display-index: 2;">
</grid-col>
</div>
<text class="sub-title">
grid-col原子布局2
</text>
<div style="flex-direction: row;height: 30px;width: 100%;">
<grid-col style="height:20px;background-color: blue;flex-weight: 1;">
</grid-col>
<grid-col style="height:20px;background-color: black;flex-weight: 5;">
</grid-col>
<grid-col style="height:20px;background-color: yellow;flex-weight: 4;">
</grid-col>
<grid-col style="height:20px;background-color: red;flex-weight: 3;">
</grid-col>
<grid-col style="height:20px;background-color:pink;flex-weight: 7;">
</grid-col>
<grid-col style="height:20px;background-color: palegoldenrod;flex-weight: 2;">
</grid-col>
</div>
<text class="sub-title">
grid-col原子布局3
</text>
<div style="flex-direction: row;height:60px;width: 100%;">
<grid-col style="width:30px;background-color: blue;aspect-ratio: 0.6;">
</grid-col>
<grid-col style="width:30px;background-color: black;aspect-ratio:0.5;">
</grid-col>
<grid-col style="width:30px;background-color: yellow;aspect-ratio: 1.5;">
</grid-col>
<grid-col style="width:30px;background-color: red;aspect-ratio: 1.3;">
</grid-col>
<grid-col style="width:30px;background-color:pink;aspect-ratio: 1;">
</grid-col>
<grid-col style="width:30px;background-color: palegoldenrod;aspect-ratio:2;">
</grid-col>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="multiMode-container">
<text class="title">
多模输入
</text>
<text class="sub-title">
grid-col多模输入1
grid-col多模输入1
</text>
<grid-col class="multiMode1" voicelabel = "voice"
subscriptflag="on" subscriptlabel="div" scenelabel="common">
</grid-col>
</div>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/gridCol/index.js
0 → 100644
浏览文件 @
5bd1ab66
import
prompt
from
'
@system.prompt
'
;
export
default
{
onShow
(){
// 通用属性
var
prop1
=
this
.
$element
(
'
prop1
'
);
var
name1
=
prop1
.
dataSet
.
name
var
prop2
=
this
.
$refs
.
prop2
;
var
name2
=
prop2
.
dataSet
.
name
prompt
.
showToast
({
message
:
'
prop1--
'
+
name1
+
'
\n
prop2--
'
+
name2
});
},
touchStart
(
event
){
var
globalX
=
event
.
touches
[
0
].
globalX
var
globalY
=
event
.
touches
[
0
].
globalY
var
localX
=
event
.
touches
[
0
].
localX
var
localY
=
event
.
touches
[
0
].
localY
var
size
=
event
.
touches
[
0
].
size
var
force
=
event
.
touches
[
0
].
force
var
changeGlobalX
=
event
.
changedTouches
[
0
].
globalX
var
changeGlobalY
=
event
.
changedTouches
[
0
].
globalY
var
changeLocalX
=
event
.
changedTouches
[
0
].
localX
var
changeLocalY
=
event
.
changedTouches
[
0
].
localY
var
changeSize
=
event
.
changedTouches
[
0
].
size
var
changeForce
=
event
.
changedTouches
[
0
].
force
var
message
=
'
globalX--
'
+
globalX
+
'
,globalY--
'
+
globalY
+
'
,localX--
'
+
localX
+
'
,localY--
'
+
localY
+
'
,size--
'
+
size
+
'
,force--
'
+
force
+
'
,changeGlobalX--
'
+
changeGlobalX
+
'
,changeGlobalY--
'
+
changeGlobalY
+
'
,changeLocalX--
'
+
changeLocalX
+
'
,changeLocalY--
'
+
changeLocalY
+
'
,changeSize--
'
+
changeSize
+
'
,changeForce--
'
+
changeForce
;
prompt
.
showToast
({
message
:
'
touchstart:
\n
'
+
message
});
},
touchMove
(
event
){
var
globalX
=
event
.
touches
[
0
].
globalX
var
globalY
=
event
.
touches
[
0
].
globalY
var
localX
=
event
.
touches
[
0
].
localX
var
localY
=
event
.
touches
[
0
].
localY
var
size
=
event
.
touches
[
0
].
size
var
force
=
event
.
touches
[
0
].
force
var
changeGlobalX
=
event
.
changedTouches
[
0
].
globalX
var
changeGlobalY
=
event
.
changedTouches
[
0
].
globalY
var
changeLocalX
=
event
.
changedTouches
[
0
].
localX
var
changeLocalY
=
event
.
changedTouches
[
0
].
localY
var
changeSize
=
event
.
changedTouches
[
0
].
size
var
changeForce
=
event
.
changedTouches
[
0
].
force
var
message
=
'
globalX--
'
+
globalX
+
'
,globalY--
'
+
globalY
+
'
,localX--
'
+
localX
+
'
,localY--
'
+
localY
+
'
,size--
'
+
size
+
'
,force--
'
+
force
+
'
,changeGlobalX--
'
+
changeGlobalX
+
'
,changeGlobalY--
'
+
changeGlobalY
+
'
,changeLocalX--
'
+
changeLocalX
+
'
,changeLocalY--
'
+
changeLocalY
+
'
,changeSize--
'
+
changeSize
+
'
,changeForce--
'
+
changeForce
;
prompt
.
showToast
({
message
:
'
touchMove:
\n
'
+
message
});
},
touchEnd
(
event
){
var
globalX
=
event
.
touches
[
0
].
globalX
var
globalY
=
event
.
touches
[
0
].
globalY
var
localX
=
event
.
touches
[
0
].
localX
var
localY
=
event
.
touches
[
0
].
localY
var
size
=
event
.
touches
[
0
].
size
var
force
=
event
.
touches
[
0
].
force
var
changeGlobalX
=
event
.
changedTouches
[
0
].
globalX
var
changeGlobalY
=
event
.
changedTouches
[
0
].
globalY
var
changeLocalX
=
event
.
changedTouches
[
0
].
localX
var
changeLocalY
=
event
.
changedTouches
[
0
].
localY
var
changeSize
=
event
.
changedTouches
[
0
].
size
var
changeForce
=
event
.
changedTouches
[
0
].
force
var
message
=
'
globalX--
'
+
globalX
+
'
,globalY--
'
+
globalY
+
'
,localX--
'
+
localX
+
'
,localY--
'
+
localY
+
'
,size--
'
+
size
+
'
,force--
'
+
force
+
'
,changeGlobalX--
'
+
changeGlobalX
+
'
,changeGlobalY--
'
+
changeGlobalY
+
'
,changeLocalX--
'
+
changeLocalX
+
'
,changeLocalY--
'
+
changeLocalY
+
'
,changeSize--
'
+
changeSize
+
'
,changeForce--
'
+
changeForce
;
prompt
.
showToast
({
message
:
'
touchEnd:
\n
'
+
message
});
},
touchCancel
(
event
){
var
globalX
=
event
.
touches
[
0
].
globalX
var
globalY
=
event
.
touches
[
0
].
globalY
var
localX
=
event
.
touches
[
0
].
localX
var
localY
=
event
.
touches
[
0
].
localY
var
size
=
event
.
touches
[
0
].
size
var
force
=
event
.
touches
[
0
].
force
var
changeGlobalX
=
event
.
changedTouches
[
0
].
globalX
var
changeGlobalY
=
event
.
changedTouches
[
0
].
globalY
var
changeLocalX
=
event
.
changedTouches
[
0
].
localX
var
changeLocalY
=
event
.
changedTouches
[
0
].
localY
var
changeSize
=
event
.
changedTouches
[
0
].
size
var
changeForce
=
event
.
changedTouches
[
0
].
force
var
message
=
'
globalX--
'
+
globalX
+
'
,globalY--
'
+
globalY
+
'
,localX--
'
+
localX
+
'
,localY--
'
+
localY
+
'
,size--
'
+
size
+
'
,force--
'
+
force
+
'
,changeGlobalX--
'
+
changeGlobalX
+
'
,changeGlobalY--
'
+
changeGlobalY
+
'
,changeLocalX--
'
+
changeLocalX
+
'
,changeLocalY--
'
+
changeLocalY
+
'
,changeSize--
'
+
changeSize
+
'
,changeForce--
'
+
changeForce
;
prompt
.
showToast
({
message
:
'
touchCancel:
\n
'
+
message
});
},
click
(){
prompt
.
showToast
({
message
:
'
click
'
});
},
doubleClick
(){
prompt
.
showToast
({
message
:
'
doubleClick
'
});
},
longPress
(){
prompt
.
showToast
({
message
:
'
longPress
'
});
},
focus
(){
prompt
.
showToast
({
message
:
'
focus
'
});
},
blur
(){
prompt
.
showToast
({
message
:
'
blur
'
});
},
key
(
event
){
var
code
=
event
.
code
;
var
action
=
event
.
action
;
var
repeatCount
=
event
.
repeatCount
;
var
timestampStart
=
event
.
timestampStart
;
var
message
=
'
code--
'
+
code
+
'
,action--
'
+
action
+
'
,repeatCount--
'
+
repeatCount
+
'
,timestampStart--
'
+
timestampStart
;
prompt
.
showToast
({
message
:
'
key:
\n
'
+
message
});
},
swipe
(
event
){
var
direction
=
event
.
direction
;
var
distance
=
event
.
distance
;
var
message
=
'
direction--
'
+
direction
+
'
,distance--
'
+
distance
;
prompt
.
showToast
({
message
:
'
swipe:
\n
'
+
message
});
},
attached
(){
prompt
.
showToast
({
message
:
'
attached
'
});
},
detached
(){
prompt
.
showToast
({
message
:
'
detached
'
});
},
pinchStart
(
event
){
var
scale
=
event
.
scale
var
pinchCenterX
=
event
.
pinchCenterX
var
pinchCenterY
=
event
.
pinchCenterY
var
message
=
'
scale--
'
+
scale
+
'
,pinchCenterX--
'
+
pinchCenterX
+
'
,pinchCenterY--
'
+
pinchCenterY
;
prompt
.
showToast
({
message
:
'
pinchStart:
\n
'
+
message
});
},
pinchUpdate
(
event
){
var
scale
=
event
.
scale
var
pinchCenterX
=
event
.
pinchCenterX
var
pinchCenterY
=
event
.
pinchCenterY
var
message
=
'
scale--
'
+
scale
+
'
,pinchCenterX--
'
+
pinchCenterX
+
'
,pinchCenterY--
'
+
pinchCenterY
;
prompt
.
showToast
({
message
:
'
pinchUpdate:
\n
'
+
message
});
},
pinchEnd
(
event
){
var
scale
=
event
.
scale
var
pinchCenterX
=
event
.
pinchCenterX
var
pinchCenterY
=
event
.
pinchCenterY
var
message
=
'
scale--
'
+
scale
+
'
,pinchCenterX--
'
+
pinchCenterX
+
'
,pinchCenterY--
'
+
pinchCenterY
;
prompt
.
showToast
({
message
:
'
pinchUpdate:
\n
'
+
message
});
},
pinchCancel
(
event
){
var
scale
=
event
.
scale
var
pinchCenterX
=
event
.
pinchCenterX
var
pinchCenterY
=
event
.
pinchCenterY
var
message
=
'
scale--
'
+
scale
+
'
,pinchCenterX--
'
+
pinchCenterX
+
'
,pinchCenterY--
'
+
pinchCenterY
;
prompt
.
showToast
({
message
:
'
pinchCancel:
\n
'
+
message
});
},
dragStart
(
event
){
var
type
=
event
.
type
var
globalX
=
event
.
globalX
var
globalY
=
event
.
globalY
var
timestamp
=
event
.
timestamp
var
message
=
'
type--
'
+
type
+
'
,globalX--
'
+
globalX
+
'
,globalY--
'
+
globalY
+
'
,timestamp--
'
+
timestamp
;
prompt
.
showToast
({
message
:
'
dragStart:
\n
'
+
message
});
},
drag
(
event
){
var
type
=
event
.
type
var
globalX
=
event
.
globalX
var
globalY
=
event
.
globalY
var
timestamp
=
event
.
timestamp
var
message
=
'
type--
'
+
type
+
'
,globalX--
'
+
globalX
+
'
,globalY--
'
+
globalY
+
'
,timestamp--
'
+
timestamp
;
prompt
.
showToast
({
message
:
'
drag:
\n
'
+
message
});
},
dragEnd
(
event
){
var
type
=
event
.
type
var
globalX
=
event
.
globalX
var
globalY
=
event
.
globalY
var
timestamp
=
event
.
timestamp
var
message
=
'
type--
'
+
type
+
'
,globalX--
'
+
globalX
+
'
,globalY--
'
+
globalY
+
'
,timestamp--
'
+
timestamp
;
prompt
.
showToast
({
message
:
'
dragEnd:
\n
'
+
message
});
},
dragEnter
(
event
){
var
type
=
event
.
type
var
globalX
=
event
.
globalX
var
globalY
=
event
.
globalY
var
timestamp
=
event
.
timestamp
var
message
=
'
type--
'
+
type
+
'
,globalX--
'
+
globalX
+
'
,globalY--
'
+
globalY
+
'
,timestamp--
'
+
timestamp
;
prompt
.
showToast
({
message
:
'
dragEnter:
\n
'
+
message
});
},
dragOver
(
event
){
var
type
=
event
.
type
var
globalX
=
event
.
globalX
var
globalY
=
event
.
globalY
var
timestamp
=
event
.
timestamp
var
message
=
'
type--
'
+
type
+
'
,globalX--
'
+
globalX
+
'
,globalY--
'
+
globalY
+
'
,timestamp--
'
+
timestamp
;
prompt
.
showToast
({
message
:
'
dragOver:
\n
'
+
message
});
},
dragLeave
(
event
){
var
type
=
event
.
type
var
globalX
=
event
.
globalX
var
globalY
=
event
.
globalY
var
timestamp
=
event
.
timestamp
var
message
=
'
type--
'
+
type
+
'
,globalX--
'
+
globalX
+
'
,globalY--
'
+
globalY
+
'
,timestamp--
'
+
timestamp
;
prompt
.
showToast
({
message
:
'
dragLeave:
\n
'
+
message
});
},
drop
(
event
){
var
type
=
event
.
type
var
globalX
=
event
.
globalX
var
globalY
=
event
.
globalY
var
timestamp
=
event
.
timestamp
var
message
=
'
type--
'
+
type
+
'
,globalX--
'
+
globalX
+
'
,globalY--
'
+
globalY
+
'
,timestamp--
'
+
timestamp
;
prompt
.
showToast
({
message
:
'
drop:
\n
'
+
message
});
},
functionTest1
(
event
){
var
function1
=
this
.
$element
(
'
function1
'
);
function1
.
focus
(
true
)
var
rect
=
function1
.
getBoundingClientRect
();
var
width
=
rect
.
width
;
var
height
=
rect
.
height
;
var
left
=
rect
.
left
;
var
top
=
rect
.
top
;
var
message
=
'
width--
'
+
width
+
'
,height--
'
+
height
+
'
,left--
'
+
left
+
'
,top--
'
+
top
;
prompt
.
showToast
({
message
:
'
function1 rect:
\n
'
+
message
});
},
functionTest2
(
event
){
var
function2
=
this
.
$element
(
'
function2
'
);
let
observer
=
function2
.
createIntersectionObserver
({
ratios
:
[
0.2
,
0
],
// number
});
observer
.
observe
((
isVisible
,
ratio
)
=>
{
console
.
info
(
'
this element is
'
+
isVisible
+
'
ratio is
'
+
ratio
)
prompt
.
showToast
({
message
:
'
function2 observer:
\n
'
+
'
isVisible--
'
+
isVisible
+
'
,ratio--
'
+
ratio
});
})
observer
.
unobserve
()
},
functionTest3
(
event
){
var
function3
=
this
.
$element
(
'
function3
'
);
var
options
=
{
duration
:
1500
,
easing
:
'
friction
'
,
delay
:
100
,
fill
:
'
forwards
'
,
iterations
:
2
,
direction
:
'
normal
'
,
};
var
frames
=
[
{
transform
:
{
translate
:
'
-120px
'
,
rotate
:
'
10deg
'
,
scale
:
0.2
,
skew
:
'
40deg
'
},
opacity
:
0.1
,
offset
:
0.0
,
width
:
'
40%
'
,
height
:
'
20px
'
,
backgroundColor
:
'
#ff0000
'
,
backgroundPosition
:
'
10px 20px
'
,
transformOrigin
:
'
left top
'
},
{
transform
:
{
translateX
:
'
0px
'
,
translateY
:
'
5px
'
,
rotateX
:
'
10deg
'
,
rotateY
:
'
10deg
'
,
scaleX
:
0.5
,
scaleY
:
0.7
,
skewX
:
'
22deg
'
,
skewY
:
'
30deg
'
},
opacity
:
0.6
,
offset
:
2.0
,
width
:
'
60%
'
,
height
:
'
30px
'
,
backgroundColor
:
'
#ff00ff
'
,
backgroundPosition
:
'
15px 25px
'
,
transformOrigin
:
'
center top
'
},
{
transform
:
{
translateX
:
'
100px
'
,
translateY
:
'
0px
'
,
translateZ
:
'
20px
'
,
rotateX
:
'
0deg
'
,
rotateY
:
'
0deg
'
,
rotateZ
:
'
30deg
'
,
scaleX
:
1
,
scaleY
:
1
,
scaleZ
:
2
,
skewX
:
'
0
'
,
skewY
:
'
0
'
,
skewZ
:
'
30deg
'
},
opacity
:
1
,
offset
:
0.0
,
width
:
'
100%
'
,
height
:
'
30px
'
,
backgroundColor
:
'
#ffff00
'
,
backgroundPosition
:
'
0px
'
,
transformOrigin
:
'
center center
'
},
];
var
animation
=
function3
.
animate
(
frames
,
options
);
animation
.
play
()
animation
.
onfinish
=
function
(){
prompt
.
showToast
({
message
:
'
The animation is finished.
'
});
};
animation
.
oncancel
=
function
(){
prompt
.
showToast
({
message
:
'
The animation is canceled.
'
});
};
animation
.
onrepeat
=
function
(){
prompt
.
showToast
({
message
:
'
The animation is repeated.
'
});
};
setTimeout
(()
=>
{
animation
.
reverse
()
},
500
)
setTimeout
(()
=>
{
animation
.
pause
()
},
1000
)
setTimeout
(()
=>
{
animation
.
cancel
()
},
1500
)
},
functionTest4
(
event
){
var
function4
=
this
.
$element
(
'
function4
'
);
var
scrollOffset
=
function4
.
getScrollOffset
();
var
x
=
scrollOffset
.
x
;
var
y
=
scrollOffset
.
y
;
var
message
=
'
x--
'
+
x
+
'
,y--
'
+
y
;
prompt
.
showToast
({
message
:
'
functionTest4 scrollOffset:
\n
'
+
message
});
var
scrollParam
=
{
dx
:
60
,
dy
:
0
,
smooth
:
true
}
function4
.
scrollBy
(
scrollParam
)
},
reachStart
(){
prompt
.
showToast
({
message
:
'
reachStart
'
});
},
reachEnd
(){
prompt
.
showToast
({
message
:
'
reachEnd
'
});
},
reachTop
(){
prompt
.
showToast
({
message
:
'
reachTop
'
});
},
reachBottom
(){
prompt
.
showToast
({
message
:
'
reachBottom
'
});
}
}
ace/ace_standard/src/main/js/default/pages/gridContainer/index.css
0 → 100644
浏览文件 @
5bd1ab66
/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/* xxx.css */
.container
{
flex-direction
:
row
;
width
:
100%
;
height
:
100%
;
padding
:
1px
;
}
.sub-container
{
flex-direction
:
column
;
height
:
100%
;
flex-weight
:
1
;
}
.style-container
{
flex-direction
:
column
;
height
:
100%
;
flex-weight
:
2
;
}
.title
{
width
:
100%
;
font-size
:
18px
;
margin
:
2px
;
padding
:
2px
;
font-weight
:
bold
;
text-align
:
center
;
}
.sub-title
{
width
:
100%
;
height
:
50px
;
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
:
3px
;
padding-top
:
3px
;
padding-right
:
3px
;
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
:
60px
;
height
:
30px
;
padding-start
:
2px
;
padding-end
:
2px
;
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
:
10%
;
padding
:
0px
;
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
:
50px
;
flex-shrink
:
1
;
}
.style4
{
width
:
60%
;
height
:
6%
;
padding
:
2px
;
margin
:
5px
;
border
:
2px
solid
#000000
;
}
.contain1
{
width
:
100%
;
height
:
150px
;
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
;
}
.style7
{
width
:
100%
;
height
:
60px
;
margin-top
:
10px
;
flex-direction
:
row
;
justify-content
:
space-around
;
align-items
:
center
;
align-content
:
flex-start
;
}
.flex-item
{
width
:
20px
;
height
:
20px
;
border-radius
:
16px
;
}
.style8
{
flex-direction
:
row
;
flex-wrap
:
nowrap
;
scrollbar-color
:
yellow
;
scrollbar-width
:
10px
;
overscroll-effect
:
spring
;
height
:
40px
;
overflow
:
scroll
;
}
.style9
{
display
:
grid
;
height
:
40px
;
grid-template-columns
:
20%
20%
;
grid-columns-gap
:
14px
;
grid-rows-gap
:
4px
;
grid-template-rows
:
15%
15%
;
}
.color-primary
{
background-color
:
mediumpurple
;
}
.color-warning
{
background-color
:
pink
;
}
.color-success
{
background-color
:
cornflowerblue
;
}
.grid-child
{
width
:
100%
;
border-radius
:
2px
;
}
.grid-left-top
{
width
:
20px
;
height
:
20px
;
border-radius
:
10px
;
border
:
1px
solid
plum
;
background
:
linear-gradient
(
pink
,
purple
);
box-shadow
:
0px
0px
1px
1px
pink
;
grid-row-start
:
0
;
grid-column-start
:
0
;
grid-row-end
:
0
;
grid-column-end
:
0
;
}
.grid-left-bottom
{
width
:
20px
;
height
:
20px
;
border-radius
:
5px
;
border
:
1px
solid
plum
;
background
:
linear-gradient
(
pink
,
#00aaee
);
box-shadow
:
0px
0px
1px
1px
pink
;
grid-row-start
:
1
;
grid-column-start
:
0
;
grid-row-end
:
1
;
grid-column-end
:
0
;
}
.grid-right-top
{
width
:
20px
;
height
:
20px
;
border-radius
:
3px
;
border
:
1px
dotted
plum
;
background
:
linear-gradient
(
mediumpurple
,
#00aaee
);
box-shadow
:
0px
0px
1px
1px
pink
;
grid-row-start
:
0
;
grid-column-start
:
1
;
grid-row-end
:
0
;
grid-column-end
:
1
;
}
.grid-right-bottom
{
width
:
20px
;
height
:
20px
;
border-radius
:
5px
;
border
:
1px
dotted
plum
;
background
:
linear-gradient
(
pink
,
mediumpurple
);
box-shadow
:
0px
0px
2px
2px
pink
;
grid-row-start
:
1
;
grid-column-start
:
1
;
grid-row-end
:
1
;
grid-column-end
:
1
;
}
.event-container
{
flex-direction
:
column
;
flex-weight
:
1
;
}
.event1
{
width
:
60%
;
flex-weight
:
1
;
background-color
:
yellow
;
}
.event2
{
width
:
70%
;
flex-weight
:
1
;
background-color
:
red
;
}
.event3
{
width
:
80%
;
flex-weight
:
1
;
background-color
:
#ad4e2a
;
}
.event4
{
flex-direction
:
row
;
width
:
90%
;
flex-weight
:
1
;
overflow
:
scroll
;
}
.event5
{
width
:
100%
;
height
:
30px
;
}
.prop-container
{
flex-direction
:
column
;
height
:
100%
;
flex-weight
:
1
;
}
#prop1
{
width
:
80%
;
height
:
20px
;
background-color
:
#ad4e2a
;
margin
:
2px
;
}
.prop2
{
width
:
80%
;
height
:
20px
;
background-color
:
#343524
;
margin
:
2px
;
}
.prop3
{
width
:
80%
;
height
:
20px
;
}
.prop4
{
width
:
80%
;
height
:
20px
;
background-color
:
#456345
;
margin
:
2px
;
}
.ani-container
{
flex-direction
:
column
;
height
:
100%
;
flex-weight
:
1
;
}
.ani1
{
color
:
#72ac33
;
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
)
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
)
}
}
.ani2
{
color
:
#ad4e2a
;
width
:
55px
;
height
:
55px
;
margin
:
5px
;
}
.gradient-container
{
flex-direction
:
column
;
}
.gradient1
{
height
:
20px
;
margin
:
5px
;
background
:
linear-gradient
(
red
,
#00ff00
);
}
.gradient2
{
height
:
20px
;
margin
:
5px
;
background
:
linear-gradient
(
45deg
,
rgb
(
255
,
0
,
0
),
rgb
(
0
,
255
,
0
));
}
.gradient3
{
height
:
20px
;
margin
:
5px
;
background
:
linear-gradient
(
to
right
,
rgb
(
255
,
0
,
0
)
90px
,
rgb
(
0
,
255
,
0
)
60%
);
}
.gradient4
{
height
:
20px
;
margin
:
5px
;
background
:
repeating-linear-gradient
(
to
right
,
rgba
(
255
,
255
,
0
,
1
)
30px
,
rgba
(
0
,
0
,
255
,
.5
)
60px
);
}
.accessibility-container
{
flex-direction
:
column
;
}
.accessibility1
{
height
:
20px
;
background-color
:
#321124
;
margin
:
5px
;
}
.atom-container
{
flex-direction
:
column
;
}
.multimode-container
{
flex-direction
:
column
;
}
.multimode1
{
color
:
#978666
;
margin
:
5px
;
}
.function-container
{
flex-direction
:
column
;
}
.function1
{
background-color
:
#ff0000
;
width
:
60%
;
height
:
20px
;
}
.function2
{
background-color
:
#00ff00
;
width
:
60%
;
height
:
20px
;
}
.function3
{
background-color
:
#0000ff
;
width
:
100%
;
height
:
20px
;
}
.function4
{
flex-direction
:
row
;
width
:
80%
;
height
:
40px
;
background-color
:
#c4c4f8
;
flex-direction
:
row
;
justify-content
:
space-around
;
align-items
:
center
;
align-content
:
flex-start
;
}
.flex-class
{
margin-top
:
5px
;
width
:
100%
;
height
:
30px
;
display
:
flex
;
/* background-color: #ee6363;*/
justify-content
:
center
;
align-items
:
center
;
}
.row-style
{
width
:
40px
;
height
:
10px
;
background-color
:
blue
;
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/gridContainer/index.hml
0 → 100644
浏览文件 @
5bd1ab66
<!--/**
* 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.
*/-->
<div class="container">
<div class="sub-container">
<div class="style-container">
<text class="title">
通用样式
</text>
<text class="sub-title">
container通用样式1
</text>
<grid-container class="style1" >
<grid-row class="row-style">
</grid-row>
</grid-container>
<text class="sub-title">
container通用样式2
</text>
<grid-container class="style2">
<grid-row class="row-style">
</grid-row>
</grid-container>
<text class="sub-title">
container通用样式3
</text>
<grid-container class="style3" >
<grid-row class="row-style">
</grid-row>
</grid-container>
<text class="sub-title">
container通用样式4
</text>
<grid-container class="style4" >
<grid-row class="row-style">
</grid-row>
</grid-container>
<text class="sub-title">
container通用样式5
</text>
<div class="contain1">
<grid-container class="style5" >
<grid-row class="row-style">
</grid-row>
</grid-container>
<grid-container class="style6">
<grid-row class="row-style">
</grid-row>
</grid-container>
</div>
<text class="sub-title">
container特有样式
</text>
<grid-container class="style7" style="background-color: orange;">
<grid-row class="flex-item color-primary">
</grid-row>
<grid-row class="flex-item color-warning">
</grid-row>
<grid-row class="flex-item color-success">
</grid-row>
</grid-container>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="ani-container">
<text class="title">
动画样式
</text>
<text class="sub-title">
container动画样式1
</text>
<grid-container class="ani1" >
<grid-row class="row-style">
</grid-row>
</grid-container>
<text class="sub-title">
container动画样式2
</text>
<grid-container class="ani2" >
<grid-row class="row-style">
</grid-row>
</grid-container>
</div>
</div>
<div style="background-color: #000000; width: 2px; height: 100%;">
</div>
<div class="sub-container">
<div class="prop-container">
<text class="title">
通用属性
</text>
<text class="sub-title">
container通用属性1
</text>
<grid-container id="prop1" class="prop1"
disabled = "true" focusable ="true"
data-name ="prop1" click-effect="spring-medium"
dir ="rtl">
<grid-row class="row-style">
</grid-row>
</grid-container>
<text class="sub-title">
container通用属性2
</text>
<grid-container class="prop2" ref ="prop2"
disabled = "false" focusable ="false"
data-name ="prop2" click-effect="spring-large"
dir ="ltr">
<grid-row class="row-style">
</grid-row>
</grid-container>
<text class="sub-title">
container通用属性3
</text>
<grid-container style="background-color: #679855; margin: 5px;" class="prop3">
<grid-row class="row-style">
</grid-row>
</grid-container>
<text class="sub-title">
container特有属性4
</text>
<grid-container class="prop4" vertical="false"
columns="xs" sizetype="xs"
gutter="30px" gridtemplate="default">
</grid-container>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="event-container" >
<text class="title">
通用事件
</text>
<text class="sub-title">
container通用事件1
</text>
<grid-container class ="event1" ontouchstart="touchStart" ontouchmove="touchMove"
ontouchend="touchEnd" ontouchcancel="touchCancel">
</grid-container>
<text class="sub-title">
container通用事件2
</text>
<grid-container class ="event2" onclick="click" ondoubleclick="doubleClick"
onlongpress="longPress" onfocus="focus" onblur="blur" onkey="key"
onswipe="swipe" onattached="attached" ondetached="detached">
</grid-container>
<text class="sub-title">
container通用事件3
</text>
<grid-container class ="event3" onpinchstart="pinchStart" onpinchupdate="pinchUpdate"
onpinchend="pinchEnd" onpinchcancel="pinchCancel"
ondragstart="dragStart" ondrag="drag"
ondragend="dragEnd" ondragenter="dragEnter"
ondragover="dragOver" ondragleave="dragLeave"
ondrop="drop">
</grid-container>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="function-container">
<text class="title">
通用方法
</text>
<text class="sub-title">
div通用方法1
</text>
<div id="function1" class="function1" ontouchstart="functionTest1">
</div>
<text class="sub-title">
div通用方法2
</text>
<grid-container id="function2" class="function2" ontouchstart="functionTest2">
</grid-container>
<text class="sub-title">
div通用方法3
</text>
<grid-container id="function3" class="function3" ontouchstart="functionTest3">
</grid-container>
<text class="sub-title">
div特有方法
</text>
<grid-container id="function4" columns="xs" sizetype="xs"
gutter="30px" gridtemplate="default" class="function4" ontouchstart="functionTest4">
<grid-row class="flex-item color-primary">
</grid-row>
<grid-row class="flex-item color-warning">
</grid-row>
<grid-row class="flex-item color-success">
</grid-row>
</grid-container>
</div>
</div>
<div style="background-color: #000000; width: 2px; height: 100%;">
</div>
<div class="sub-container">
<div class="gradient-container">
<text class="title">
渐变样式
</text>
<text class="sub-title">
div渐变样式1
</text>
<grid-container class="gradient1">
</grid-container>
<text class="sub-title">
div渐变样式2
</text>
<grid-container class="gradient2">
</grid-container>
<text class="sub-title">
div渐变样式3
</text>
<grid-container class="gradient3">
</grid-container>
<text class="sub-title">
div渐变样式4
</text>
<grid-container class="gradient4">
</grid-container>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="accessibility-container">
<text class="title">
无障碍
</text>
<text class="sub-title">
div无障碍1
</text>
<grid-container class="accessibility1" accessibilitygroup ="true"
accessibilitytext="这是div"
accessibilitydescription="点击此按键会弹出一个对话框"
accessibilityimportance="no-hide-descendants">
</grid-container>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="atom-container">
<text class="title">
原子布局
</text>
<text class="sub-title">
div原子布局1
</text>
<div style="flex-direction: row;height: 20px;width: 100%;">
<grid-container vertical="true" style="width:20px;height:30px;padding: 0;margin: 0%; background-color: blue;display-index: 1;">
</grid-container>
<grid-container vertical="true" style="width:30px;padding: 0;margin: 0%;background-color: black;display-index: 5;">
</grid-container>
<grid-container vertical="true" style="width:40px;padding: 0;margin: 0%; background-color: yellow;display-index: 4;">
</grid-container>
<grid-container vertical="true" style="width:10px;padding: 0;margin: 0%;background-color: red;display-index: 3;">
</grid-container>
<grid-container vertical="true" style="width:25px;padding: 0;margin: 0%;background-color:pink;display-index: 7;">
</grid-container>
<grid-container vertical="true" style="width:15px;padding: 0;margin: 0%;background-color: palegoldenrod;display-index: 2;">
</grid-container>
</div>
<text class="sub-title">
div原子布局2
</text>
<div style="flex-direction: row;height: 20px;width: 100%;">
<grid-container style="padding: 0;margin: 0%;background-color: blue;flex-weight: 1;">
</grid-container>
<grid-container style="padding: 0;margin: 0%;background-color: black;flex-weight: 5;">
</grid-container>
<grid-container style="padding: 0;margin: 0%;background-color: yellow;flex-weight: 4;">
</grid-container>
<grid-container style="padding: 0;margin: 0%;background-color: red;flex-weight: 3;">
</grid-container>
<grid-container style="padding: 0;margin: 0%;background-color:pink;flex-weight: 7;">
</grid-container>
<grid-container style="padding: 0;margin: 0%;background-color: palegoldenrod;flex-weight: 2;">
</grid-container>
</div>
<text class="sub-title">
div原子布局3
</text>
<div style="flex-direction: row;height:60px;width: 100%;">
<grid-container vertical="true" style="padding: 0;margin: 0%;width:30px;background-color: blue;aspect-ratio: 0.6;">
</grid-container>
<grid-container vertical="true" style="padding: 0;margin: 0%;width:30px;background-color: black;aspect-ratio:0.5;">
</grid-container>
<grid-container vertical="true" style="padding: 0;margin: 0%;width:30px;background-color: yellow;aspect-ratio: 1.5;">
</grid-container>
<grid-container vertical="true" style="padding: 0;margin: 0%;width:30px;background-color: red;aspect-ratio: 1.3;">
</grid-container>
<grid-container vertical="true" style="padding: 0;margin: 0%;width:30px;background-color:pink;aspect-ratio: 1;">
</grid-container>
<grid-container vertical="true" style="padding: 0;margin: 0%;width:30px;background-color: palegoldenrod;aspect-ratio:2;">
</grid-container>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="multiMode-container">
<text class="title">
多模输入
</text>
<text class="sub-title">
div多模输入1
</text>
<grid-container class="multimode1" voicelabel = "voice"
subscriptflag="on" subscriptlabel="divider" scenelabel="common">
</grid-container>
</div>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/gridContainer/index.js
0 → 100644
浏览文件 @
5bd1ab66
import
prompt
from
'
@system.prompt
'
;
export
default
{
onShow
(){
// 通用属性
var
prop1
=
this
.
$element
(
'
prop1
'
);
this
.
get
()
var
name1
=
prop1
.
dataSet
.
name
var
prop2
=
this
.
$refs
.
prop2
;
var
name2
=
prop2
.
dataSet
.
name
prompt
.
showToast
({
message
:
'
prop1--
'
+
name1
+
'
\n
prop2--
'
+
name2
});
},
get
(){
console
.
info
(
"
getColumns:
"
+
this
.
$element
(
'
function4
'
).
getColumns
())
console
.
info
(
"
getGutterWidth:
"
+
this
.
$element
(
'
function4
'
).
getGutterWidth
())
console
.
info
(
"
getColumnWidth:
"
+
this
.
$element
(
'
function4
'
).
getColumnWidth
())
console
.
info
(
"
getSizeType:
"
+
this
.
$element
(
'
function4
'
).
getSizeType
())
},
4
touchStart
(
event
){
var
globalX
=
event
.
touches
[
0
].
globalX
var
globalY
=
event
.
touches
[
0
].
globalY
var
localX
=
event
.
touches
[
0
].
localX
var
localY
=
event
.
touches
[
0
].
localY
var
size
=
event
.
touches
[
0
].
size
var
force
=
event
.
touches
[
0
].
force
var
changeGlobalX
=
event
.
changedTouches
[
0
].
globalX
var
changeGlobalY
=
event
.
changedTouches
[
0
].
globalY
var
changeLocalX
=
event
.
changedTouches
[
0
].
localX
var
changeLocalY
=
event
.
changedTouches
[
0
].
localY
var
changeSize
=
event
.
changedTouches
[
0
].
size
var
changeForce
=
event
.
changedTouches
[
0
].
force
var
message
=
'
globalX--
'
+
globalX
+
'
,globalY--
'
+
globalY
+
'
,localX--
'
+
localX
+
'
,localY--
'
+
localY
+
'
,size--
'
+
size
+
'
,force--
'
+
force
+
'
,changeGlobalX--
'
+
changeGlobalX
+
'
,changeGlobalY--
'
+
changeGlobalY
+
'
,changeLocalX--
'
+
changeLocalX
+
'
,changeLocalY--
'
+
changeLocalY
+
'
,changeSize--
'
+
changeSize
+
'
,changeForce--
'
+
changeForce
;
prompt
.
showToast
({
message
:
'
touchstart:
\n
'
+
message
});
},
touchMove
(
event
){
var
globalX
=
event
.
touches
[
0
].
globalX
var
globalY
=
event
.
touches
[
0
].
globalY
var
localX
=
event
.
touches
[
0
].
localX
var
localY
=
event
.
touches
[
0
].
localY
var
size
=
event
.
touches
[
0
].
size
var
force
=
event
.
touches
[
0
].
force
var
changeGlobalX
=
event
.
changedTouches
[
0
].
globalX
var
changeGlobalY
=
event
.
changedTouches
[
0
].
globalY
var
changeLocalX
=
event
.
changedTouches
[
0
].
localX
var
changeLocalY
=
event
.
changedTouches
[
0
].
localY
var
changeSize
=
event
.
changedTouches
[
0
].
size
var
changeForce
=
event
.
changedTouches
[
0
].
force
var
message
=
'
globalX--
'
+
globalX
+
'
,globalY--
'
+
globalY
+
'
,localX--
'
+
localX
+
'
,localY--
'
+
localY
+
'
,size--
'
+
size
+
'
,force--
'
+
force
+
'
,changeGlobalX--
'
+
changeGlobalX
+
'
,changeGlobalY--
'
+
changeGlobalY
+
'
,changeLocalX--
'
+
changeLocalX
+
'
,changeLocalY--
'
+
changeLocalY
+
'
,changeSize--
'
+
changeSize
+
'
,changeForce--
'
+
changeForce
;
prompt
.
showToast
({
message
:
'
touchMove:
\n
'
+
message
});
},
touchEnd
(
event
){
var
globalX
=
event
.
touches
[
0
].
globalX
var
globalY
=
event
.
touches
[
0
].
globalY
var
localX
=
event
.
touches
[
0
].
localX
var
localY
=
event
.
touches
[
0
].
localY
var
size
=
event
.
touches
[
0
].
size
var
force
=
event
.
touches
[
0
].
force
var
changeGlobalX
=
event
.
changedTouches
[
0
].
globalX
var
changeGlobalY
=
event
.
changedTouches
[
0
].
globalY
var
changeLocalX
=
event
.
changedTouches
[
0
].
localX
var
changeLocalY
=
event
.
changedTouches
[
0
].
localY
var
changeSize
=
event
.
changedTouches
[
0
].
size
var
changeForce
=
event
.
changedTouches
[
0
].
force
var
message
=
'
globalX--
'
+
globalX
+
'
,globalY--
'
+
globalY
+
'
,localX--
'
+
localX
+
'
,localY--
'
+
localY
+
'
,size--
'
+
size
+
'
,force--
'
+
force
+
'
,changeGlobalX--
'
+
changeGlobalX
+
'
,changeGlobalY--
'
+
changeGlobalY
+
'
,changeLocalX--
'
+
changeLocalX
+
'
,changeLocalY--
'
+
changeLocalY
+
'
,changeSize--
'
+
changeSize
+
'
,changeForce--
'
+
changeForce
;
prompt
.
showToast
({
message
:
'
touchEnd:
\n
'
+
message
});
},
touchCancel
(
event
){
var
globalX
=
event
.
touches
[
0
].
globalX
var
globalY
=
event
.
touches
[
0
].
globalY
var
localX
=
event
.
touches
[
0
].
localX
var
localY
=
event
.
touches
[
0
].
localY
var
size
=
event
.
touches
[
0
].
size
var
force
=
event
.
touches
[
0
].
force
var
changeGlobalX
=
event
.
changedTouches
[
0
].
globalX
var
changeGlobalY
=
event
.
changedTouches
[
0
].
globalY
var
changeLocalX
=
event
.
changedTouches
[
0
].
localX
var
changeLocalY
=
event
.
changedTouches
[
0
].
localY
var
changeSize
=
event
.
changedTouches
[
0
].
size
var
changeForce
=
event
.
changedTouches
[
0
].
force
var
message
=
'
globalX--
'
+
globalX
+
'
,globalY--
'
+
globalY
+
'
,localX--
'
+
localX
+
'
,localY--
'
+
localY
+
'
,size--
'
+
size
+
'
,force--
'
+
force
+
'
,changeGlobalX--
'
+
changeGlobalX
+
'
,changeGlobalY--
'
+
changeGlobalY
+
'
,changeLocalX--
'
+
changeLocalX
+
'
,changeLocalY--
'
+
changeLocalY
+
'
,changeSize--
'
+
changeSize
+
'
,changeForce--
'
+
changeForce
;
prompt
.
showToast
({
message
:
'
touchCancel:
\n
'
+
message
});
},
click
(){
prompt
.
showToast
({
message
:
'
click
'
});
},
doubleClick
(){
prompt
.
showToast
({
message
:
'
doubleClick
'
});
},
longPress
(){
prompt
.
showToast
({
message
:
'
longPress
'
});
},
focus
(){
prompt
.
showToast
({
message
:
'
focus
'
});
},
blur
(){
prompt
.
showToast
({
message
:
'
blur
'
});
},
key
(
event
){
var
code
=
event
.
code
;
var
action
=
event
.
action
;
var
repeatCount
=
event
.
repeatCount
;
var
timestampStart
=
event
.
timestampStart
;
var
message
=
'
code--
'
+
code
+
'
,action--
'
+
action
+
'
,repeatCount--
'
+
repeatCount
+
'
,timestampStart--
'
+
timestampStart
;
prompt
.
showToast
({
message
:
'
key:
\n
'
+
message
});
},
swipe
(
event
){
var
direction
=
event
.
direction
;
var
distance
=
event
.
distance
;
var
message
=
'
direction--
'
+
direction
+
'
,distance--
'
+
distance
;
prompt
.
showToast
({
message
:
'
swipe:
\n
'
+
message
});
},
attached
(){
prompt
.
showToast
({
message
:
'
attached
'
});
},
detached
(){
prompt
.
showToast
({
message
:
'
detached
'
});
},
pinchStart
(
event
){
var
scale
=
event
.
scale
var
pinchCenterX
=
event
.
pinchCenterX
var
pinchCenterY
=
event
.
pinchCenterY
var
message
=
'
scale--
'
+
scale
+
'
,pinchCenterX--
'
+
pinchCenterX
+
'
,pinchCenterY--
'
+
pinchCenterY
;
prompt
.
showToast
({
message
:
'
pinchStart:
\n
'
+
message
});
},
pinchUpdate
(
event
){
var
scale
=
event
.
scale
var
pinchCenterX
=
event
.
pinchCenterX
var
pinchCenterY
=
event
.
pinchCenterY
var
message
=
'
scale--
'
+
scale
+
'
,pinchCenterX--
'
+
pinchCenterX
+
'
,pinchCenterY--
'
+
pinchCenterY
;
prompt
.
showToast
({
message
:
'
pinchUpdate:
\n
'
+
message
});
},
pinchEnd
(
event
){
var
scale
=
event
.
scale
var
pinchCenterX
=
event
.
pinchCenterX
var
pinchCenterY
=
event
.
pinchCenterY
var
message
=
'
scale--
'
+
scale
+
'
,pinchCenterX--
'
+
pinchCenterX
+
'
,pinchCenterY--
'
+
pinchCenterY
;
prompt
.
showToast
({
message
:
'
pinchUpdate:
\n
'
+
message
});
},
pinchCancel
(
event
){
var
scale
=
event
.
scale
var
pinchCenterX
=
event
.
pinchCenterX
var
pinchCenterY
=
event
.
pinchCenterY
var
message
=
'
scale--
'
+
scale
+
'
,pinchCenterX--
'
+
pinchCenterX
+
'
,pinchCenterY--
'
+
pinchCenterY
;
prompt
.
showToast
({
message
:
'
pinchCancel:
\n
'
+
message
});
},
dragStart
(
event
){
var
type
=
event
.
type
var
globalX
=
event
.
globalX
var
globalY
=
event
.
globalY
var
timestamp
=
event
.
timestamp
var
message
=
'
type--
'
+
type
+
'
,globalX--
'
+
globalX
+
'
,globalY--
'
+
globalY
+
'
,timestamp--
'
+
timestamp
;
prompt
.
showToast
({
message
:
'
dragStart:
\n
'
+
message
});
},
drag
(
event
){
var
type
=
event
.
type
var
globalX
=
event
.
globalX
var
globalY
=
event
.
globalY
var
timestamp
=
event
.
timestamp
var
message
=
'
type--
'
+
type
+
'
,globalX--
'
+
globalX
+
'
,globalY--
'
+
globalY
+
'
,timestamp--
'
+
timestamp
;
prompt
.
showToast
({
message
:
'
drag:
\n
'
+
message
});
},
dragEnd
(
event
){
var
type
=
event
.
type
var
globalX
=
event
.
globalX
var
globalY
=
event
.
globalY
var
timestamp
=
event
.
timestamp
var
message
=
'
type--
'
+
type
+
'
,globalX--
'
+
globalX
+
'
,globalY--
'
+
globalY
+
'
,timestamp--
'
+
timestamp
;
prompt
.
showToast
({
message
:
'
dragEnd:
\n
'
+
message
});
},
dragEnter
(
event
){
var
type
=
event
.
type
var
globalX
=
event
.
globalX
var
globalY
=
event
.
globalY
var
timestamp
=
event
.
timestamp
var
message
=
'
type--
'
+
type
+
'
,globalX--
'
+
globalX
+
'
,globalY--
'
+
globalY
+
'
,timestamp--
'
+
timestamp
;
prompt
.
showToast
({
message
:
'
dragEnter:
\n
'
+
message
});
},
dragOver
(
event
){
var
type
=
event
.
type
var
globalX
=
event
.
globalX
var
globalY
=
event
.
globalY
var
timestamp
=
event
.
timestamp
var
message
=
'
type--
'
+
type
+
'
,globalX--
'
+
globalX
+
'
,globalY--
'
+
globalY
+
'
,timestamp--
'
+
timestamp
;
prompt
.
showToast
({
message
:
'
dragOver:
\n
'
+
message
});
},
dragLeave
(
event
){
var
type
=
event
.
type
var
globalX
=
event
.
globalX
var
globalY
=
event
.
globalY
var
timestamp
=
event
.
timestamp
var
message
=
'
type--
'
+
type
+
'
,globalX--
'
+
globalX
+
'
,globalY--
'
+
globalY
+
'
,timestamp--
'
+
timestamp
;
prompt
.
showToast
({
message
:
'
dragLeave:
\n
'
+
message
});
},
drop
(
event
){
var
type
=
event
.
type
var
globalX
=
event
.
globalX
var
globalY
=
event
.
globalY
var
timestamp
=
event
.
timestamp
var
message
=
'
type--
'
+
type
+
'
,globalX--
'
+
globalX
+
'
,globalY--
'
+
globalY
+
'
,timestamp--
'
+
timestamp
;
prompt
.
showToast
({
message
:
'
drop:
\n
'
+
message
});
},
functionTest1
(
event
){
var
function1
=
this
.
$element
(
'
function1
'
);
function1
.
focus
(
true
)
var
rect
=
function1
.
getBoundingClientRect
();
var
width
=
rect
.
width
;
var
height
=
rect
.
height
;
var
left
=
rect
.
left
;
var
top
=
rect
.
top
;
var
message
=
'
width--
'
+
width
+
'
,height--
'
+
height
+
'
,left--
'
+
left
+
'
,top--
'
+
top
;
prompt
.
showToast
({
message
:
'
function1 rect:
\n
'
+
message
});
},
functionTest2
(
event
){
var
function2
=
this
.
$element
(
'
function2
'
);
let
observer
=
function2
.
createIntersectionObserver
({
ratios
:
[
0.2
,
0
],
// number
});
observer
.
observe
((
isVisible
,
ratio
)
=>
{
console
.
info
(
'
this element is
'
+
isVisible
+
'
ratio is
'
+
ratio
)
prompt
.
showToast
({
message
:
'
function2 observer:
\n
'
+
'
isVisible--
'
+
isVisible
+
'
,ratio--
'
+
ratio
});
})
observer
.
unobserve
()
},
functionTest3
(
event
){
var
function3
=
this
.
$element
(
'
function3
'
);
var
options
=
{
duration
:
1500
,
easing
:
'
friction
'
,
delay
:
100
,
fill
:
'
forwards
'
,
iterations
:
2
,
direction
:
'
normal
'
,
};
var
frames
=
[
{
transform
:
{
translate
:
'
-120px
'
,
rotate
:
'
10deg
'
,
scale
:
0.2
,
skew
:
'
40deg
'
},
opacity
:
0.1
,
offset
:
0.0
,
width
:
'
40%
'
,
height
:
'
20px
'
,
backgroundColor
:
'
#ff0000
'
,
backgroundPosition
:
'
10px 20px
'
,
transformOrigin
:
'
left top
'
},
{
transform
:
{
translateX
:
'
0px
'
,
translateY
:
'
5px
'
,
rotateX
:
'
10deg
'
,
rotateY
:
'
10deg
'
,
scaleX
:
0.5
,
scaleY
:
0.7
,
skewX
:
'
22deg
'
,
skewY
:
'
30deg
'
},
opacity
:
0.6
,
offset
:
2.0
,
width
:
'
60%
'
,
height
:
'
30px
'
,
backgroundColor
:
'
#ff00ff
'
,
backgroundPosition
:
'
15px 25px
'
,
transformOrigin
:
'
center top
'
},
{
transform
:
{
translateX
:
'
100px
'
,
translateY
:
'
0px
'
,
translateZ
:
'
20px
'
,
rotateX
:
'
0deg
'
,
rotateY
:
'
0deg
'
,
rotateZ
:
'
30deg
'
,
scaleX
:
1
,
scaleY
:
1
,
scaleZ
:
2
,
skewX
:
'
0
'
,
skewY
:
'
0
'
,
skewZ
:
'
30deg
'
},
opacity
:
1
,
offset
:
0.0
,
width
:
'
100%
'
,
height
:
'
30px
'
,
backgroundColor
:
'
#ffff00
'
,
backgroundPosition
:
'
0px
'
,
transformOrigin
:
'
center center
'
},
];
var
animation
=
function3
.
animate
(
frames
,
options
);
animation
.
play
()
animation
.
onfinish
=
function
(){
prompt
.
showToast
({
message
:
'
The animation is finished.
'
});
};
animation
.
oncancel
=
function
(){
prompt
.
showToast
({
message
:
'
The animation is canceled.
'
});
};
animation
.
onrepeat
=
function
(){
prompt
.
showToast
({
message
:
'
The animation is repeated.
'
});
};
setTimeout
(()
=>
{
animation
.
reverse
()
},
500
)
setTimeout
(()
=>
{
animation
.
pause
()
},
1000
)
setTimeout
(()
=>
{
animation
.
cancel
()
},
1500
)
},
functionTest4
(
event
){
var
function4
=
this
.
$element
(
'
function4
'
);
var
scrollOffset
=
function4
.
getScrollOffset
();
var
x
=
scrollOffset
.
x
;
var
y
=
scrollOffset
.
y
;
var
message
=
'
x--
'
+
x
+
'
,y--
'
+
y
;
prompt
.
showToast
({
message
:
'
functionTest4 scrollOffset:
\n
'
+
message
});
var
scrollParam
=
{
dx
:
60
,
dy
:
0
,
smooth
:
true
}
function4
.
scrollBy
(
scrollParam
)
},
reachStart
(){
prompt
.
showToast
({
message
:
'
reachStart
'
});
},
reachEnd
(){
prompt
.
showToast
({
message
:
'
reachEnd
'
});
},
reachTop
(){
prompt
.
showToast
({
message
:
'
reachTop
'
});
},
reachBottom
(){
prompt
.
showToast
({
message
:
'
reachBottom
'
});
}
}
ace/ace_standard/src/main/js/default/pages/gridRow/index.css
0 → 100644
浏览文件 @
5bd1ab66
/**
* Copyright (c) 2022 Shenzhen kaiHong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/* xxx.css */
.container
{
flex-direction
:
row
;
width
:
100%
;
height
:
100%
;
padding
:
1px
;
}
.sub-container
{
flex-direction
:
column
;
height
:
100%
;
flex-weight
:
1
;
}
.style-container
{
flex-direction
:
column
;
height
:
70%
;
}
.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/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
;
}
.style7
{
flex-direction
:
column
;
flex-wrap
:
wrap
;
justify-content
:
center
;
align-items
:
center
;
align-content
:
space-around
;
display
:
flex
;
height
:
40px
;
background-color
:
blue
;
}
.flex-item
{
width
:
20px
;
height
:
20px
;
border-radius
:
16px
;
}
.style8
{
flex-direction
:
row
;
flex-wrap
:
nowrap
;
scrollbar-color
:
yellow
;
scrollbar-width
:
10px
;
overscroll-effect
:
spring
;
height
:
20px
;
overflow
:
scroll
;
flex-wrap
:
wrap
;
justify-content
:
center
;
align-items
:
center
;
align-content
:
space-around
;
}
.style9
{
display
:
grid
;
height
:
20px
;
grid-template-columns
:
20%
20%
;
grid-columns-gap
:
14px
;
grid-rows-gap
:
4px
;
grid-template-rows
:
15%
15%
;
}
.color-primary
{
background-color
:
mediumpurple
;
}
.color-warning
{
background-color
:
pink
;
}
.color-success
{
background-color
:
cornflowerblue
;
}
.grid-child
{
width
:
100%
;
border-radius
:
2px
;
}
.grid-left-top
{
width
:
20px
;
height
:
20px
;
border-radius
:
10px
;
border
:
1px
solid
plum
;
background
:
linear-gradient
(
pink
,
purple
);
box-shadow
:
0px
0px
1px
1px
pink
;
grid-row-start
:
0
;
grid-column-start
:
0
;
grid-row-end
:
0
;
grid-column-end
:
0
;
}
.grid-left-bottom
{
width
:
20px
;
height
:
20px
;
border-radius
:
5px
;
border
:
1px
solid
plum
;
background
:
linear-gradient
(
pink
,
#00aaee
);
box-shadow
:
0px
0px
1px
1px
pink
;
grid-row-start
:
1
;
grid-column-start
:
0
;
grid-row-end
:
1
;
grid-column-end
:
0
;
}
.grid-right-top
{
width
:
20px
;
height
:
20px
;
border-radius
:
3px
;
border
:
1px
dotted
plum
;
background
:
linear-gradient
(
mediumpurple
,
#00aaee
);
box-shadow
:
0px
0px
1px
1px
pink
;
grid-row-start
:
0
;
grid-column-start
:
1
;
grid-row-end
:
0
;
grid-column-end
:
1
;
}
.grid-right-bottom
{
width
:
20px
;
height
:
20px
;
border-radius
:
5px
;
border
:
1px
dotted
plum
;
background
:
linear-gradient
(
pink
,
mediumpurple
);
box-shadow
:
0px
0px
2px
2px
pink
;
grid-row-start
:
1
;
grid-column-start
:
1
;
grid-row-end
:
1
;
grid-column-end
:
1
;
}
.event-container
{
flex-direction
:
column
;
flex-weight
:
1
;
}
.event1
{
width
:
60%
;
flex-weight
:
1
;
background-color
:
yellow
;
}
.event2
{
width
:
70%
;
flex-weight
:
1
;
background-color
:
red
;
}
.event3
{
width
:
80%
;
flex-weight
:
1
;
background-color
:
#ad4e2a
;
}
.event4
{
flex-direction
:
row
;
width
:
90%
;
flex-weight
:
1
;
overflow
:
scroll
;
}
.event5
{
flex-direction
:
column
;
width
:
100%
;
height
:
90px
;
overflow
:
scroll
;
}
.prop-container
{
flex-direction
:
column
;
}
#prop1
{
color
:
#ad4e2a
;
height
:
30px
;
background-color
:
mediumslateblue
;
width
:
100%
;
margin
:
5px
;
}
.prop2
{
color
:
#343524
;
height
:
30px
;
background-color
:
pink
;
width
:
100%
;
margin
:
5px
;
}
.prop3
{
color
:
#456345
;
height
:
30px
;
background-color
:
darkseagreen
;
width
:
100%
;
margin
:
5px
;
}
.prop5
{
color
:
#831834
;
margin
:
5px
;
height
:
70px
;
}
.ani-container
{
flex-direction
:
column
;
height
:
100%
;
flex-weight
:
1
;
}
.ani1
{
color
:
#72ac33
;
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
{
color
:
#ad4e2a
;
width
:
55px
;
height
:
55px
;
margin
:
5px
;
}
.gradient-container
{
flex-direction
:
column
;
}
.gradient1
{
width
:
100%
;
height
:
20px
;
margin
:
5px
;
background
:
linear-gradient
(
red
,
#00ff00
);
}
.gradient2
{
width
:
100%
;
height
:
20px
;
margin
:
5px
;
background
:
linear-gradient
(
45deg
,
rgb
(
255
,
0
,
0
),
rgb
(
0
,
255
,
0
));
}
.gradient3
{
width
:
100%
;
height
:
20px
;
margin
:
5px
;
background
:
linear-gradient
(
to
right
,
rgb
(
255
,
0
,
0
)
90px
,
rgb
(
0
,
255
,
0
)
60%
);
}
.gradient4
{
width
:
100%
;
height
:
20px
;
margin
:
5px
;
background
:
repeating-linear-gradient
(
to
right
,
rgba
(
255
,
255
,
0
,
1
)
30px
,
rgba
(
0
,
0
,
255
,
.5
)
60px
);
}
.accessibility-container
{
flex-direction
:
column
;
}
.accessibility1
{
background-color
:
#321124
;
margin
:
5px
;
width
:
90%
;
height
:
30px
;
}
.atom-container
{
flex-direction
:
column
;
}
.multiMode-container
{
flex-direction
:
column
;
}
.multiMode1
{
background-color
:
#978666
;
width
:
100%
;
height
:
30px
;
margin
:
5px
;
}
.function-container
{
flex-direction
:
column
;
}
.function1
{
background-color
:
#ff0000
;
width
:
60%
;
height
:
20px
;
}
.function2
{
background-color
:
#00ff00
;
width
:
60%
;
height
:
20px
;
}
.function3
{
background-color
:
#0000ff
;
width
:
100%
;
height
:
20px
;
}
.function4
{
flex-direction
:
row
;
width
:
60%
;
height
:
20px
;
overflow
:
scroll
;
}
.container-style
{
width
:
100%
;
height
:
50px
;
background-color
:
#b8b8bf
;
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/gridRow/index.hml
0 → 100644
浏览文件 @
5bd1ab66
<!--/**
* 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.
*/-->
<div class="container">
<div class="sub-container">
<div class="style-container">
<text class="title">
通用样式
</text>
<text class="sub-title">
div通用样式1
</text>
<grid-container class="container-style">
<grid-row class="style1" >
</grid-row>
</grid-container>
<text class="sub-title">
div通用样式2
</text>
<grid-container class="container-style">
<grid-row class="style2" >
</grid-row>
</grid-container>
<text class="sub-title">
div通用样式3
</text>
<grid-container class="container-style">
<grid-row class="style3" >
</grid-row>
</grid-container>
<text class="sub-title">
div通用样式4
</text>
<grid-container class="container-style">
<grid-row class="style4" >
</grid-row>
</grid-container>
<text class="sub-title">
div通用样式5
</text>
<grid-container class="contain1">
<grid-row class="style5" >
</grid-row>
<grid-row class="style6" >
</grid-row>
</grid-container>
<text class="sub-title">
div特有样式
</text>
<grid-container class="style7">
<grid-row class="flex-item color-primary">
</grid-row>
<grid-row class="flex-item color-warning">
</grid-row>
<grid-row class="flex-item color-success">
</grid-row>
</grid-container>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="ani-container">
<text class="title">
动画样式
</text>
<text class="sub-title">
div动画样式1
</text>
<grid-container class="container-style">
<grid-row class="ani1" >
</grid-row>
</grid-container>
<text class="sub-title">
div动画样式2
</text>
<grid-container class="container-style">
<grid-row class="ani2" >
</grid-row>
</grid-container>
</div>
</div>
<div style="background-color: #000000; width: 2px; height: 100%;">
</div>
<div class="sub-container">
<div class="prop-container">
<text class="title">
通用属性
</text>
<text class="sub-title">
div通用属性1
</text>
<grid-container class="container-style">
<grid-row id="prop1" class="prop1"
disabled = "true" focusable ="true"
data-name ="prop1" click-effect="spring-medium"
dir ="rtl">
</grid-row>
</grid-container>
<text class="sub-title">
div通用属性2
</text>
<grid-container class="container-style">
<grid-row class="prop2" ref ="prop2"
disabled = "false" focusable ="false"
data-name ="prop2" click-effect="spring-large"
dir ="ltr">
</grid-row>
</grid-container>
<text class="sub-title">
div通用属性3
</text>
<grid-container class="container-style">
<grid-row style="color: #679855; margin: 5px;" class="prop3">
</grid-row>
</grid-container>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="event-container" >
<text class="title">
通用事件
</text>
<text class="sub-title">
div通用事件1
</text>
<grid-container class="container-style">
<grid-row class ="event1" ontouchstart="touchStart" ontouchmove="touchMove"
ontouchend="touchEnd" ontouchcancel="touchCancel">
</grid-row>
</grid-container>
<text class="sub-title">
div通用事件2
</text>
<grid-container class="container-style">
<grid-row class ="event2" onclick="click" ondoubleclick="doubleClick"
onlongpress="longPress" onfocus="focus" onblur="blur" onkey="key"
onswipe="swipe" onattached="attached" ondetached="detached">
</grid-row>
</grid-container>
<text class="sub-title">
div通用事件3
</text>
<grid-container class="container-style">
<grid-row class ="event3" onpinchstart="pinchStart" onpinchupdate="pinchUpdate"
onpinchend="pinchEnd" onpinchcancel="pinchCancel"
ondragstart="dragStart" ondrag="drag"
ondragend="dragEnd" ondragenter="dragEnter"
ondragover="dragOver" ondragleave="dragLeave"
ondrop="drop">
</grid-row>
</grid-container>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="function-container">
<text class="title">
通用方法
</text>
<text class="sub-title">
div通用方法1
</text>
<div id="function1" class="function1" ontouchstart="functionTest1">
</div>
<text class="sub-title">
div通用方法2
</text>
<grid-row id="function2" class="function2" ontouchstart="functionTest2">
</grid-row>
<text class="sub-title">
div通用方法3
</text>
<grid-row id="function3" class="function3" ontouchstart="functionTest3">
</grid-row>
</div>
</div>
<div style="background-color: #000000; width: 2px; height: 100%;">
</div>
<div class="sub-container">
<div class="gradient-container">
<text class="title">
渐变样式
</text>
<text class="sub-title">
div渐变样式1
</text>
<grid-row class="gradient1">
</grid-row>
<text class="sub-title">
div渐变样式2
</text>
<grid-row class="gradient2">
</grid-row>
<text class="sub-title">
div渐变样式3
</text>
<grid-row class="gradient3">
</grid-row>
<text class="sub-title">
div渐变样式4
</text>
<grid-row class="gradient4">
</grid-row>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="accessibility-container">
<text class="title">
无障碍
</text>
<text class="sub-title">
div无障碍1
</text>
<grid-row class="accessibility1" accessibilitygroup ="true"
accessibilitytext="这是div"
accessibilitydescription="点击此按键会弹出一个对话框"
accessibilityimportance="no-hide-descendants">
</grid-row>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="atom-container">
<text class="title">
原子布局
</text>
<text class="sub-title">
div原子布局1
</text>
<div style="flex-direction: row;height: 30px;width: 100%;">
<grid-row style="width:20px;height:20px;background-color: blue;display-index: 1;">
</grid-row>
<grid-row style="width:30px; height:20px;background-color: black;display-index: 5;">
</grid-row>
<grid-row style="width:40px; height:20px;background-color: yellow;display-index: 4;">
</grid-row>
<grid-row style="width:10px; height:20px;background-color: red;display-index: 3;">
</grid-row>
<grid-row style="width:25px; height:20px;background-color:pink;display-index: 7;">
</grid-row>
<grid-row style="width:15px; height:20px;background-color: palegoldenrod;display-index: 2;">
</grid-row>
</div>
<text class="sub-title">
div原子布局2
</text>
<div style="flex-direction: row;height: 30px;width: 100%;">
<grid-row style="height:20px;background-color: blue;flex-weight: 1;">
</grid-row>
<grid-row style="height:20px;background-color: black;flex-weight: 5;">
</grid-row>
<grid-row style="height:20px;background-color: yellow;flex-weight: 4;">
</grid-row>
<grid-row style="height:20px;background-color: red;flex-weight: 3;">
</grid-row>
<grid-row style="height:20px;background-color:pink;flex-weight: 7;">
</grid-row>
<grid-row style="height:20px;background-color: palegoldenrod;flex-weight: 2;">
</grid-row>
</div>
<text class="sub-title">
div原子布局3
</text>
<div style="flex-direction: row;height:60px;width: 100%;">
<grid-row style="width:30px;background-color: blue;aspect-ratio: 0.6;">
</grid-row>
<grid-row style="width:30px;background-color: black;aspect-ratio:0.5;">
</grid-row>
<grid-row style="width:30px;background-color: yellow;aspect-ratio: 1.5;">
</grid-row>
<grid-row style="width:30px;background-color: red;aspect-ratio: 1.3;">
</grid-row>
<grid-row style="width:30px;background-color:pink;aspect-ratio: 1;">
</grid-row>
<grid-row style="width:30px;background-color: palegoldenrod;aspect-ratio:2;">
</grid-row>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="multiMode-container">
<text class="title">
多模输入
</text>
<text class="sub-title">
div多模输入1
</text>
<grid-row class="multiMode1" voicelabel = "voice"
subscriptflag="on" subscriptlabel="div" scenelabel="common">
</grid-row>
</div>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/gridRow/index.js
0 → 100644
浏览文件 @
5bd1ab66
import
prompt
from
'
@system.prompt
'
;
export
default
{
onShow
(){
// 通用属性
var
prop1
=
this
.
$element
(
'
prop1
'
);
var
name1
=
prop1
.
dataSet
.
name
var
prop2
=
this
.
$refs
.
prop2
;
var
name2
=
prop2
.
dataSet
.
name
prompt
.
showToast
({
message
:
'
prop1--
'
+
name1
+
'
\n
prop2--
'
+
name2
});
},
touchStart
(
event
){
var
globalX
=
event
.
touches
[
0
].
globalX
var
globalY
=
event
.
touches
[
0
].
globalY
var
localX
=
event
.
touches
[
0
].
localX
var
localY
=
event
.
touches
[
0
].
localY
var
size
=
event
.
touches
[
0
].
size
var
force
=
event
.
touches
[
0
].
force
var
changeGlobalX
=
event
.
changedTouches
[
0
].
globalX
var
changeGlobalY
=
event
.
changedTouches
[
0
].
globalY
var
changeLocalX
=
event
.
changedTouches
[
0
].
localX
var
changeLocalY
=
event
.
changedTouches
[
0
].
localY
var
changeSize
=
event
.
changedTouches
[
0
].
size
var
changeForce
=
event
.
changedTouches
[
0
].
force
var
message
=
'
globalX--
'
+
globalX
+
'
,globalY--
'
+
globalY
+
'
,localX--
'
+
localX
+
'
,localY--
'
+
localY
+
'
,size--
'
+
size
+
'
,force--
'
+
force
+
'
,changeGlobalX--
'
+
changeGlobalX
+
'
,changeGlobalY--
'
+
changeGlobalY
+
'
,changeLocalX--
'
+
changeLocalX
+
'
,changeLocalY--
'
+
changeLocalY
+
'
,changeSize--
'
+
changeSize
+
'
,changeForce--
'
+
changeForce
;
prompt
.
showToast
({
message
:
'
touchstart:
\n
'
+
message
});
},
touchMove
(
event
){
var
globalX
=
event
.
touches
[
0
].
globalX
var
globalY
=
event
.
touches
[
0
].
globalY
var
localX
=
event
.
touches
[
0
].
localX
var
localY
=
event
.
touches
[
0
].
localY
var
size
=
event
.
touches
[
0
].
size
var
force
=
event
.
touches
[
0
].
force
var
changeGlobalX
=
event
.
changedTouches
[
0
].
globalX
var
changeGlobalY
=
event
.
changedTouches
[
0
].
globalY
var
changeLocalX
=
event
.
changedTouches
[
0
].
localX
var
changeLocalY
=
event
.
changedTouches
[
0
].
localY
var
changeSize
=
event
.
changedTouches
[
0
].
size
var
changeForce
=
event
.
changedTouches
[
0
].
force
var
message
=
'
globalX--
'
+
globalX
+
'
,globalY--
'
+
globalY
+
'
,localX--
'
+
localX
+
'
,localY--
'
+
localY
+
'
,size--
'
+
size
+
'
,force--
'
+
force
+
'
,changeGlobalX--
'
+
changeGlobalX
+
'
,changeGlobalY--
'
+
changeGlobalY
+
'
,changeLocalX--
'
+
changeLocalX
+
'
,changeLocalY--
'
+
changeLocalY
+
'
,changeSize--
'
+
changeSize
+
'
,changeForce--
'
+
changeForce
;
prompt
.
showToast
({
message
:
'
touchMove:
\n
'
+
message
});
},
touchEnd
(
event
){
var
globalX
=
event
.
touches
[
0
].
globalX
var
globalY
=
event
.
touches
[
0
].
globalY
var
localX
=
event
.
touches
[
0
].
localX
var
localY
=
event
.
touches
[
0
].
localY
var
size
=
event
.
touches
[
0
].
size
var
force
=
event
.
touches
[
0
].
force
var
changeGlobalX
=
event
.
changedTouches
[
0
].
globalX
var
changeGlobalY
=
event
.
changedTouches
[
0
].
globalY
var
changeLocalX
=
event
.
changedTouches
[
0
].
localX
var
changeLocalY
=
event
.
changedTouches
[
0
].
localY
var
changeSize
=
event
.
changedTouches
[
0
].
size
var
changeForce
=
event
.
changedTouches
[
0
].
force
var
message
=
'
globalX--
'
+
globalX
+
'
,globalY--
'
+
globalY
+
'
,localX--
'
+
localX
+
'
,localY--
'
+
localY
+
'
,size--
'
+
size
+
'
,force--
'
+
force
+
'
,changeGlobalX--
'
+
changeGlobalX
+
'
,changeGlobalY--
'
+
changeGlobalY
+
'
,changeLocalX--
'
+
changeLocalX
+
'
,changeLocalY--
'
+
changeLocalY
+
'
,changeSize--
'
+
changeSize
+
'
,changeForce--
'
+
changeForce
;
prompt
.
showToast
({
message
:
'
touchEnd:
\n
'
+
message
});
},
touchCancel
(
event
){
var
globalX
=
event
.
touches
[
0
].
globalX
var
globalY
=
event
.
touches
[
0
].
globalY
var
localX
=
event
.
touches
[
0
].
localX
var
localY
=
event
.
touches
[
0
].
localY
var
size
=
event
.
touches
[
0
].
size
var
force
=
event
.
touches
[
0
].
force
var
changeGlobalX
=
event
.
changedTouches
[
0
].
globalX
var
changeGlobalY
=
event
.
changedTouches
[
0
].
globalY
var
changeLocalX
=
event
.
changedTouches
[
0
].
localX
var
changeLocalY
=
event
.
changedTouches
[
0
].
localY
var
changeSize
=
event
.
changedTouches
[
0
].
size
var
changeForce
=
event
.
changedTouches
[
0
].
force
var
message
=
'
globalX--
'
+
globalX
+
'
,globalY--
'
+
globalY
+
'
,localX--
'
+
localX
+
'
,localY--
'
+
localY
+
'
,size--
'
+
size
+
'
,force--
'
+
force
+
'
,changeGlobalX--
'
+
changeGlobalX
+
'
,changeGlobalY--
'
+
changeGlobalY
+
'
,changeLocalX--
'
+
changeLocalX
+
'
,changeLocalY--
'
+
changeLocalY
+
'
,changeSize--
'
+
changeSize
+
'
,changeForce--
'
+
changeForce
;
prompt
.
showToast
({
message
:
'
touchCancel:
\n
'
+
message
});
},
click
(){
prompt
.
showToast
({
message
:
'
click
'
});
},
doubleClick
(){
prompt
.
showToast
({
message
:
'
doubleClick
'
});
},
longPress
(){
prompt
.
showToast
({
message
:
'
longPress
'
});
},
focus
(){
prompt
.
showToast
({
message
:
'
focus
'
});
},
blur
(){
prompt
.
showToast
({
message
:
'
blur
'
});
},
key
(
event
){
var
code
=
event
.
code
;
var
action
=
event
.
action
;
var
repeatCount
=
event
.
repeatCount
;
var
timestampStart
=
event
.
timestampStart
;
var
message
=
'
code--
'
+
code
+
'
,action--
'
+
action
+
'
,repeatCount--
'
+
repeatCount
+
'
,timestampStart--
'
+
timestampStart
;
prompt
.
showToast
({
message
:
'
key:
\n
'
+
message
});
},
swipe
(
event
){
var
direction
=
event
.
direction
;
var
distance
=
event
.
distance
;
var
message
=
'
direction--
'
+
direction
+
'
,distance--
'
+
distance
;
prompt
.
showToast
({
message
:
'
swipe:
\n
'
+
message
});
},
attached
(){
prompt
.
showToast
({
message
:
'
attached
'
});
},
detached
(){
prompt
.
showToast
({
message
:
'
detached
'
});
},
pinchStart
(
event
){
var
scale
=
event
.
scale
var
pinchCenterX
=
event
.
pinchCenterX
var
pinchCenterY
=
event
.
pinchCenterY
var
message
=
'
scale--
'
+
scale
+
'
,pinchCenterX--
'
+
pinchCenterX
+
'
,pinchCenterY--
'
+
pinchCenterY
;
prompt
.
showToast
({
message
:
'
pinchStart:
\n
'
+
message
});
},
pinchUpdate
(
event
){
var
scale
=
event
.
scale
var
pinchCenterX
=
event
.
pinchCenterX
var
pinchCenterY
=
event
.
pinchCenterY
var
message
=
'
scale--
'
+
scale
+
'
,pinchCenterX--
'
+
pinchCenterX
+
'
,pinchCenterY--
'
+
pinchCenterY
;
prompt
.
showToast
({
message
:
'
pinchUpdate:
\n
'
+
message
});
},
pinchEnd
(
event
){
var
scale
=
event
.
scale
var
pinchCenterX
=
event
.
pinchCenterX
var
pinchCenterY
=
event
.
pinchCenterY
var
message
=
'
scale--
'
+
scale
+
'
,pinchCenterX--
'
+
pinchCenterX
+
'
,pinchCenterY--
'
+
pinchCenterY
;
prompt
.
showToast
({
message
:
'
pinchUpdate:
\n
'
+
message
});
},
pinchCancel
(
event
){
var
scale
=
event
.
scale
var
pinchCenterX
=
event
.
pinchCenterX
var
pinchCenterY
=
event
.
pinchCenterY
var
message
=
'
scale--
'
+
scale
+
'
,pinchCenterX--
'
+
pinchCenterX
+
'
,pinchCenterY--
'
+
pinchCenterY
;
prompt
.
showToast
({
message
:
'
pinchCancel:
\n
'
+
message
});
},
dragStart
(
event
){
var
type
=
event
.
type
var
globalX
=
event
.
globalX
var
globalY
=
event
.
globalY
var
timestamp
=
event
.
timestamp
var
message
=
'
type--
'
+
type
+
'
,globalX--
'
+
globalX
+
'
,globalY--
'
+
globalY
+
'
,timestamp--
'
+
timestamp
;
prompt
.
showToast
({
message
:
'
dragStart:
\n
'
+
message
});
},
drag
(
event
){
var
type
=
event
.
type
var
globalX
=
event
.
globalX
var
globalY
=
event
.
globalY
var
timestamp
=
event
.
timestamp
var
message
=
'
type--
'
+
type
+
'
,globalX--
'
+
globalX
+
'
,globalY--
'
+
globalY
+
'
,timestamp--
'
+
timestamp
;
prompt
.
showToast
({
message
:
'
drag:
\n
'
+
message
});
},
dragEnd
(
event
){
var
type
=
event
.
type
var
globalX
=
event
.
globalX
var
globalY
=
event
.
globalY
var
timestamp
=
event
.
timestamp
var
message
=
'
type--
'
+
type
+
'
,globalX--
'
+
globalX
+
'
,globalY--
'
+
globalY
+
'
,timestamp--
'
+
timestamp
;
prompt
.
showToast
({
message
:
'
dragEnd:
\n
'
+
message
});
},
dragEnter
(
event
){
var
type
=
event
.
type
var
globalX
=
event
.
globalX
var
globalY
=
event
.
globalY
var
timestamp
=
event
.
timestamp
var
message
=
'
type--
'
+
type
+
'
,globalX--
'
+
globalX
+
'
,globalY--
'
+
globalY
+
'
,timestamp--
'
+
timestamp
;
prompt
.
showToast
({
message
:
'
dragEnter:
\n
'
+
message
});
},
dragOver
(
event
){
var
type
=
event
.
type
var
globalX
=
event
.
globalX
var
globalY
=
event
.
globalY
var
timestamp
=
event
.
timestamp
var
message
=
'
type--
'
+
type
+
'
,globalX--
'
+
globalX
+
'
,globalY--
'
+
globalY
+
'
,timestamp--
'
+
timestamp
;
prompt
.
showToast
({
message
:
'
dragOver:
\n
'
+
message
});
},
dragLeave
(
event
){
var
type
=
event
.
type
var
globalX
=
event
.
globalX
var
globalY
=
event
.
globalY
var
timestamp
=
event
.
timestamp
var
message
=
'
type--
'
+
type
+
'
,globalX--
'
+
globalX
+
'
,globalY--
'
+
globalY
+
'
,timestamp--
'
+
timestamp
;
prompt
.
showToast
({
message
:
'
dragLeave:
\n
'
+
message
});
},
drop
(
event
){
var
type
=
event
.
type
var
globalX
=
event
.
globalX
var
globalY
=
event
.
globalY
var
timestamp
=
event
.
timestamp
var
message
=
'
type--
'
+
type
+
'
,globalX--
'
+
globalX
+
'
,globalY--
'
+
globalY
+
'
,timestamp--
'
+
timestamp
;
prompt
.
showToast
({
message
:
'
drop:
\n
'
+
message
});
},
functionTest1
(
event
){
var
function1
=
this
.
$element
(
'
function1
'
);
function1
.
focus
(
true
)
var
rect
=
function1
.
getBoundingClientRect
();
var
width
=
rect
.
width
;
var
height
=
rect
.
height
;
var
left
=
rect
.
left
;
var
top
=
rect
.
top
;
var
message
=
'
width--
'
+
width
+
'
,height--
'
+
height
+
'
,left--
'
+
left
+
'
,top--
'
+
top
;
prompt
.
showToast
({
message
:
'
function1 rect:
\n
'
+
message
});
},
functionTest2
(
event
){
var
function2
=
this
.
$element
(
'
function2
'
);
let
observer
=
function2
.
createIntersectionObserver
({
ratios
:
[
0.2
,
0
],
// number
});
observer
.
observe
((
isVisible
,
ratio
)
=>
{
console
.
info
(
'
this element is
'
+
isVisible
+
'
ratio is
'
+
ratio
)
prompt
.
showToast
({
message
:
'
function2 observer:
\n
'
+
'
isVisible--
'
+
isVisible
+
'
,ratio--
'
+
ratio
});
})
observer
.
unobserve
()
},
functionTest3
(
event
){
var
function3
=
this
.
$element
(
'
function3
'
);
var
options
=
{
duration
:
1500
,
easing
:
'
friction
'
,
delay
:
100
,
fill
:
'
forwards
'
,
iterations
:
2
,
direction
:
'
normal
'
,
};
var
frames
=
[
{
transform
:
{
translate
:
'
-120px
'
,
rotate
:
'
10deg
'
,
scale
:
0.2
,
skew
:
'
40deg
'
},
opacity
:
0.1
,
offset
:
0.0
,
width
:
'
40%
'
,
height
:
'
20px
'
,
backgroundColor
:
'
#ff0000
'
,
backgroundPosition
:
'
10px 20px
'
,
transformOrigin
:
'
left top
'
},
{
transform
:
{
translateX
:
'
0px
'
,
translateY
:
'
5px
'
,
rotateX
:
'
10deg
'
,
rotateY
:
'
10deg
'
,
scaleX
:
0.5
,
scaleY
:
0.7
,
skewX
:
'
22deg
'
,
skewY
:
'
30deg
'
},
opacity
:
0.6
,
offset
:
2.0
,
width
:
'
60%
'
,
height
:
'
30px
'
,
backgroundColor
:
'
#ff00ff
'
,
backgroundPosition
:
'
15px 25px
'
,
transformOrigin
:
'
center top
'
},
{
transform
:
{
translateX
:
'
100px
'
,
translateY
:
'
0px
'
,
translateZ
:
'
20px
'
,
rotateX
:
'
0deg
'
,
rotateY
:
'
0deg
'
,
rotateZ
:
'
30deg
'
,
scaleX
:
1
,
scaleY
:
1
,
scaleZ
:
2
,
skewX
:
'
0
'
,
skewY
:
'
0
'
,
skewZ
:
'
30deg
'
},
opacity
:
1
,
offset
:
0.0
,
width
:
'
100%
'
,
height
:
'
30px
'
,
backgroundColor
:
'
#ffff00
'
,
backgroundPosition
:
'
0px
'
,
transformOrigin
:
'
center center
'
},
];
var
animation
=
function3
.
animate
(
frames
,
options
);
animation
.
play
()
animation
.
onfinish
=
function
(){
prompt
.
showToast
({
message
:
'
The animation is finished.
'
});
};
animation
.
oncancel
=
function
(){
prompt
.
showToast
({
message
:
'
The animation is canceled.
'
});
};
animation
.
onrepeat
=
function
(){
prompt
.
showToast
({
message
:
'
The animation is repeated.
'
});
};
setTimeout
(()
=>
{
animation
.
reverse
()
},
500
)
setTimeout
(()
=>
{
animation
.
pause
()
},
1000
)
setTimeout
(()
=>
{
animation
.
cancel
()
},
1500
)
},
functionTest4
(
event
){
var
function4
=
this
.
$element
(
'
function4
'
);
var
scrollOffset
=
function4
.
getScrollOffset
();
var
x
=
scrollOffset
.
x
;
var
y
=
scrollOffset
.
y
;
var
message
=
'
x--
'
+
x
+
'
,y--
'
+
y
;
prompt
.
showToast
({
message
:
'
functionTest4 scrollOffset:
\n
'
+
message
});
var
scrollParam
=
{
dx
:
60
,
dy
:
0
,
smooth
:
true
}
function4
.
scrollBy
(
scrollParam
)
},
reachStart
(){
prompt
.
showToast
({
message
:
'
reachStart
'
});
},
reachEnd
(){
prompt
.
showToast
({
message
:
'
reachEnd
'
});
},
reachTop
(){
prompt
.
showToast
({
message
:
'
reachTop
'
});
},
reachBottom
(){
prompt
.
showToast
({
message
:
'
reachBottom
'
});
}
}
ace/ace_standard/src/main/js/default/pages/line/index.css
0 → 100644
浏览文件 @
5bd1ab66
/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/* xxx.css */
.container
{
flex-direction
:
row
;
width
:
100%
;
height
:
100%
;
padding
:
1px
;
}
.sub-container
{
flex-direction
:
column
;
height
:
100%
;
flex-weight
:
1
;
}
.style-container
{
flex-direction
:
column
;
height
:
100%
;
flex-weight
:
1
;
}
.title
{
width
:
100%
;
font-size
:
18px
;
margin
:
2px
;
padding
:
2px
;
font-weight
:
bold
;
text-align
:
center
;
}
.sub-title
{
width
:
100%
;
font-size
:
14px
;
text-align
:
left
;
margin
:
2px
;
padding
:
2px
;
}
.style1
{
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%;*/
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
:
85%
;
height
:
7%
;
padding
:
10px
;
margin
:
5px
;
border
:
2px
solid
#000000
;
}
.contain1
{
width
:
100%
;
height
:
70px
;
flex-direction
:
column
;
}
.style5
{
width
:
80%
;
height
:
50px
;
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
:
100px
;
height
:
50px
;
position
:
absolute
;
left
:
10px
;
top
:
50px
;
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
:
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
:
tomato
;
width
:
100%
;
margin
:
3px
5px
;
}
.prop8
{
background-color
:
darkblue
;
width
:
100%
;
margin
:
3px
5px
;
}
.prop9
{
background-color
:
blueviolet
;
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
;
}
@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
)
}
}
.ani2
{
color
:
#ad4e2a
;
stroke-width
:
55px
;
margin
:
5px
;
transform-origin
:
2%
3%
;
animation-name
:
ani2Go
;
animation-delay
:
5s
;
animation-duration
:
10s
;
animation-iteration-count
:
4
;
animation-timing-function
:
ease-out
;
animation-direction
:
reverse
;
animation-fill-mode
:
forwards
;
animation-play-state
:
running
;
transition
:
all
0
ease
0
;
}
@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
);
}
}
.gradient-container
{
flex-direction
:
column
;
flex-weight
:
1
;
}
.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/line/index.hml
0 → 100644
浏览文件 @
5bd1ab66
<div class="container">
<div class="style-container">
<text class="title">
通用样式
</text>
<text class="sub-title">
line通用样式1
</text>
<svg height="80">
<line class="style1" id="style1" x1="0" x2="70" y1="10" y2="10" stroke="green" stroke-width="4" ></line>
</svg>
<text class="sub-title">
line通用样式2
</text>
<svg height="20">
<line class="style2" id="style2" x1="0" x2="70" y1="10" y2="10" stroke="green" stroke-width="4" ></line>
</svg>
<text class="sub-title">
line通用样式3
</text>
<svg height="80">
<line class="style3" id="style3" x1="0" x2="70" y1="30" y2="30" stroke="blue" stroke-width="4" ></line>
</svg>
<text class="sub-title">
line通用样式4
</text>
<svg height="80">
<line class="style4" id="style4" x1="0" x2="70" y1="30" y2="30" stroke="blue" stroke-width="4" ></line>
</svg>
<text class="sub-title">
line通用样式5
</text>
<div class="contain1">
<svg >
<line class="style5" id="style4" x1="0" x2="70" y1="30" y2="30" stroke="blue" stroke-width="4" ></line>
</svg>
<svg >
<line class="style6" id="style4" x1="5" x2="70" y1="30" y2="30" stroke="blue" stroke-width="4" ></line>
</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">
line通用属性1
</text>
<svg width="200" height="50">
<line class="prop1" id="prop1" data-name ="prop1" x1="10" x2="80" y1="20" y2="20"
stroke="green" stroke-width="4" ></line>
</svg>
<text class="sub-title">
line通用属性2
</text>
<svg width="200" height="50">
<line class="prop2" ref="prop2" data-name ="prop2" x1="10" x2="80" y1="20" y2="20"
stroke="white" stroke-width="4" opacity="0.5"></line>
</svg>
<text class="sub-title">
line通用属性3
</text>
<svg width="200" height="50">
<line class="prop3" id="prop3" x1="10" x2="80" y1="20" y2="20" stroke="red"
stroke-width="4" stroke-dasharray="5 3" stroke-dashoffset="3"></line>
</svg>
<text class="sub-title">
line通用属性4
</text>
<svg width="200" height="50">
<line class="prop4" id="prop4" x1="10" x2="80" y1="20" y2="20" stroke="black"
stroke-width="4" stroke-linecap="round"></line>
</svg>
<text class="sub-title">
line通用属性5
</text>
<svg width="200" height="50">
<line class="prop5" id="prop5" x1="10" x2="80" y1="20" y2="20" stroke="black"
stroke-width="4" stroke-linecap="butt"></line>
</svg>
<text class="sub-title">
line通用属性6
</text>
<svg width="200" height="50">
<line class="prop6" id="prop6" x1="10" x2="80" y1="20" y2="20" stroke="black"
stroke-width="4" stroke-linecap="square"></line>
</svg>
<text class="sub-title">
line通用属性7
</text>
<svg width="200" height="50">
<line class="prop7" id="prop7" x1="10" x2="80" y1="20" y2="20" stroke="blue" stroke-width="4" transform="rotate(-5)"></line>
</svg>
<text class="sub-title">
line通用属性8
</text>
<svg width="200" height="50">
<line class="prop8" id="prop8" x1="10" x2="80" y1="20" y2="20" stroke="yellow" stroke-width="4" transform="skewX(20)"></line>
</svg>
<text class="sub-title">
line通用属性9
</text>
<svg width="200" height="50">
<line class="prop9" id="prop9" x1="10" x2="80" y1="10" y2="10" stroke="blue" stroke-width="4" transform="skewY(10)"></line>
</svg>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="ani-container">
<text class="title">
动画样式
</text>
<text class="sub-title">
line动画样式1
</text>
<svg class="ani1" width="100" height="100">
<line id="prop1" data-name ="prop1" x1="10" x2="80" y1="20" y2="20" stroke="blue" stroke-width="4" ></line>
</svg>
<text class="sub-title">
path动画样式2
</text>
<svg class="ani2" width="100" height="100">
<line id="prop1" data-name ="prop1" x1="10" x2="80" y1="20" y2="20" stroke="green" stroke-width="4" ></line>
</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">
line渐变样式1
</text>
<svg width="200" height="80">
<line class="gradient1" x1="10" x2="100" y1="40" y2="40" stroke="green" stroke-width="4" ></line>
</svg>
<text class="sub-title">
line渐变样式2
</text>
<svg width="200" height="80">
<line class="gradient2" x1="10" x2="100" y1="40" y2="40" stroke="blue" stroke-width="4" ></line>
</svg>
<text class="sub-title">
line渐变样式3
</text>
<svg width="200" height="80">
<line class="gradient3" x1="10" x2="100" y1="40" y2="40" stroke="yellow" stroke-width="4" ></line>
</svg>
<text class="sub-title">
line渐变样式4
</text>
<svg width="200" height="80">
<line class="gradient4" x1="10" x2="100" y1="40" y2="40" stroke="green" stroke-width="4" ></line>
</svg>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="access-container">
<text class="title">
无障碍
</text>
<text class="sub-title">
line无障碍1
</text>
<svg
width="200" height="80">
<line class="access1" accessibilitygroup ="true"
accessibilitytext="这是line"
accessibilitydescription="点击此按键会弹出一个对话框"
ccessibilityimportance="no-hide-descendants"
x1="10" x2="80" y1="20" y2="20" stroke="red" stroke-width="4" ></line>
</svg>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="multimode-container">
<text class="title">
多模输入
</text>
<text class="sub-title">
line多模输入1
</text>
<svg >
<line class="multimode1" width="200" height="100" voicelabel = "voice"
subscriptflag="on" subscriptlabel="line" scenelabel="common"
x1="10" x2="80" y1="20" y2="20" stroke="#978666" stroke-width="4" ></line>
</svg>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/line/index.js
0 → 100644
浏览文件 @
5bd1ab66
/**
* 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
:
{
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/obj_CanvasGradient/index.css
0 → 100644
浏览文件 @
5bd1ab66
/**
* 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
;
}
.prop_all-container
{
flex-direction
:
row
;
height
:
100%
;
flex-weight
:
1
;
}
.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
;
}
.prop1
{
color
:
#ad4e2a
;
height
:
30px
;
background-color
:
mediumslateblue
;
width
:
100%
;
margin
:
5px
;
}
.prop2
{
color
:
#343524
;
height
:
30px
;
background-color
:
pink
;
width
:
100%
;
margin
:
5px
;
}
.prop3
{
color
:
#456345
;
height
:
30px
;
background-color
:
darkseagreen
;
width
:
100%
;
margin
:
5px
;
}
.prop5
{
color
:
#831834
;
stroke-width
:
40px
;
line-cap
:
square
;
margin
:
5px
;
height
:
70px
;
}
.ani-container
{
flex-direction
:
column
;
height
:
100%
;
flex-weight
:
1
;
}
.ani1
{
color
:
#72ac33
;
stroke-width
:
55px
;
line-cap
:
square
;
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
)
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
)
}
}
.ani2
{
color
:
#ad4e2a
;
width
:
55px
;
height
:
55px
;
margin
:
5px
;
transform-origin
:
2%
3%
;
animation-name
:
ani2Go
;
animation-delay
:
5s
;
animation-duration
:
10s
;
animation-iteration-count
:
4
;
animation-timing-function
:
ease-out
;
animation-direction
:
reverse
;
animation-fill-mode
:
forwards
;
animation-play-state
:
running
;
transition
:
all
0
ease
0
;
}
@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
);
}
}
.gradient-container
{
flex-direction
:
column
;
}
.gradient1
{
width
:
100%
;
height
:
20px
;
margin
:
5px
;
background
:
linear-gradient
(
red
,
#00ff00
);
}
.gradient2
{
width
:
100%
;
height
:
20px
;
margin
:
5px
;
background
:
linear-gradient
(
45deg
,
rgb
(
255
,
0
,
0
),
rgb
(
0
,
255
,
0
));
}
.gradient3
{
width
:
100%
;
height
:
20px
;
margin
:
5px
;
background
:
linear-gradient
(
to
right
,
rgb
(
255
,
0
,
0
)
90px
,
rgb
(
0
,
255
,
0
)
60%
);
}
.gradient4
{
width
:
100%
;
height
:
20px
;
margin
:
5px
;
background
:
repeating-linear-gradient
(
to
right
,
rgba
(
255
,
255
,
0
,
1
)
30px
,
rgba
(
0
,
0
,
255
,
.5
)
60px
);
}
.accessibility-container
{
flex-direction
:
column
;
}
.accessibility1
{
width
:
100%
;
height
:
30px
;
}
.atom-container
{
flex-direction
:
column
;
}
.multiMode-container
{
flex-direction
:
column
;
}
.multiMode1
{
background-color
:
#978666
;
width
:
100%
;
height
:
30px
;
margin
:
5px
;
}
.flex-box
{
justify-content
:
space-around
;
align-items
:
center
;
height
:
50px
;
background-color
:
#ffffff
;
}
.flex-item
{
width
:
20px
;
height
:
20px
;
border-radius
:
16px
;
}
.color-primary
{
background-color
:
mediumpurple
;
}
.color-warning
{
background-color
:
pink
;
}
.color-success
{
background-color
:
cornflowerblue
;
}
.dragContent
{
width
:
60px
;
height
:
60px
;
background-color
:
red
;
}
.flex-box2
{
justify-content
:
space-around
;
align-items
:
center
;
flex-wrap
:
wrap
;
height
:
100px
;
background-color
:
#ffffff
;
}
.common
{
background-color
:
#ffffff
;
align-items
:
center
;
justify-content
:
center
;
}
.grid-parent
{
display
:
grid
;
grid-template-columns
:
20%
20%
;
grid-columns-gap
:
14px
;
grid-rows-gap
:
4px
;
grid-template-rows
:
15%
15%
;
}
.grid-child
{
width
:
100%
;
/* height: 100%;*/
border-radius
:
2px
;
}
.grid-left-top
{
width
:
20px
;
height
:
20px
;
border-radius
:
10px
;
border
:
1px
solid
plum
;
background
:
linear-gradient
(
pink
,
purple
);
box-shadow
:
0px
0px
1px
1px
pink
;
grid-row-start
:
0
;
grid-column-start
:
0
;
grid-row-end
:
0
;
grid-column-end
:
0
;
}
.grid-left-bottom
{
width
:
20px
;
height
:
20px
;
border-radius
:
5px
;
border
:
1px
solid
plum
;
background
:
linear-gradient
(
pink
,
#00aaee
);
box-shadow
:
0px
0px
1px
1px
pink
;
grid-row-start
:
1
;
grid-column-start
:
0
;
grid-row-end
:
1
;
grid-column-end
:
0
;
}
.grid-right-top
{
width
:
20px
;
height
:
20px
;
border-radius
:
3px
;
border
:
1px
dotted
plum
;
background
:
linear-gradient
(
mediumpurple
,
#00aaee
);
box-shadow
:
0px
0px
1px
1px
pink
;
grid-row-start
:
0
;
grid-column-start
:
1
;
grid-row-end
:
0
;
grid-column-end
:
1
;
}
.grid-right-bottom
{
width
:
20px
;
height
:
20px
;
border-radius
:
5px
;
border
:
1px
dotted
plum
;
background
:
linear-gradient
(
pink
,
mediumpurple
);
box-shadow
:
0px
0px
2px
2px
pink
;
grid-row-start
:
1
;
grid-column-start
:
1
;
grid-row-end
:
1
;
grid-column-end
:
1
;
}
.event-container
{
flex-direction
:
column
;
height
:
30%
;
}
.event1
{
width
:
60%
;
flex-weight
:
1
;
}
.event2
{
width
:
70%
;
flex-weight
:
1
;
}
.event3
{
width
:
80%
;
flex-weight
:
1
;
}
.function-container
{
flex-direction
:
column
;
}
.function
{
height
:
30px
;
width
:
100%
;
}
ace/ace_standard/src/main/js/default/pages/obj_CanvasGradient/index.hml
0 → 100644
浏览文件 @
5bd1ab66
<!--/**
* 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.
*/-->
<div class="container">
<div class="sub-container">
<div class="prop-container">
<text class="title">
CanvasGradient对象的方法
</text>
<text class="sub-title">
方法1
</text>
<canvas ref="canvas" style="width: 100%; height: 200px; background-color: #ffff00;"></canvas>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/obj_CanvasGradient/index.js
0 → 100644
浏览文件 @
5bd1ab66
/**
* 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.
*/
import
prompt
from
'
@system.prompt
'
;
export
default
{
data
:{
left
:
0
,
top
:
0
,
},
onShow
()
{
this
.
functionTest
()
},
functionTest
()
{
const
el
=
this
.
$refs
.
canvas
;
const
ctx
=
el
.
getContext
(
'
2d
'
);
const
gradient
=
ctx
.
createLinearGradient
(
0
,
0
,
200
,
0
);
gradient
.
addColorStop
(
0
,
'
#00ffff
'
);
gradient
.
addColorStop
(
1
,
'
#ffff00
'
);
ctx
.
fillStyle
=
gradient
;
ctx
.
fillRect
(
20
,
20
,
300
,
100
);
},
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/obj_CanvasRenderingContext2D/index.css
0 → 100644
浏览文件 @
5bd1ab66
/**
* 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
;
}
.prop_all-container
{
flex-direction
:
row
;
height
:
100%
;
flex-weight
:
1
;
}
.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
;
}
.prop1
{
color
:
#ad4e2a
;
height
:
30px
;
background-color
:
mediumslateblue
;
width
:
100%
;
margin
:
5px
;
}
.prop2
{
color
:
#343524
;
height
:
30px
;
background-color
:
pink
;
width
:
100%
;
margin
:
5px
;
}
.prop3
{
color
:
#456345
;
height
:
30px
;
background-color
:
darkseagreen
;
width
:
100%
;
margin
:
5px
;
}
.prop5
{
color
:
#831834
;
stroke-width
:
40px
;
line-cap
:
square
;
margin
:
5px
;
height
:
70px
;
}
.ani-container
{
flex-direction
:
column
;
height
:
100%
;
flex-weight
:
1
;
}
.ani1
{
color
:
#72ac33
;
stroke-width
:
55px
;
line-cap
:
square
;
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
)
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
)
}
}
.ani2
{
color
:
#ad4e2a
;
width
:
55px
;
height
:
55px
;
margin
:
5px
;
transform-origin
:
2%
3%
;
animation-name
:
ani2Go
;
animation-delay
:
5s
;
animation-duration
:
10s
;
animation-iteration-count
:
4
;
animation-timing-function
:
ease-out
;
animation-direction
:
reverse
;
animation-fill-mode
:
forwards
;
animation-play-state
:
running
;
transition
:
all
0
ease
0
;
}
@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
);
}
}
.gradient-container
{
flex-direction
:
column
;
}
.gradient1
{
width
:
100%
;
height
:
20px
;
margin
:
5px
;
background
:
linear-gradient
(
red
,
#00ff00
);
}
.gradient2
{
width
:
100%
;
height
:
20px
;
margin
:
5px
;
background
:
linear-gradient
(
45deg
,
rgb
(
255
,
0
,
0
),
rgb
(
0
,
255
,
0
));
}
.gradient3
{
width
:
100%
;
height
:
20px
;
margin
:
5px
;
background
:
linear-gradient
(
to
right
,
rgb
(
255
,
0
,
0
)
90px
,
rgb
(
0
,
255
,
0
)
60%
);
}
.gradient4
{
width
:
100%
;
height
:
20px
;
margin
:
5px
;
background
:
repeating-linear-gradient
(
to
right
,
rgba
(
255
,
255
,
0
,
1
)
30px
,
rgba
(
0
,
0
,
255
,
.5
)
60px
);
}
.accessibility-container
{
flex-direction
:
column
;
}
.accessibility1
{
width
:
100%
;
height
:
30px
;
}
.atom-container
{
flex-direction
:
column
;
}
.multiMode-container
{
flex-direction
:
column
;
}
.multiMode1
{
background-color
:
#978666
;
width
:
100%
;
height
:
30px
;
margin
:
5px
;
}
.flex-box
{
justify-content
:
space-around
;
align-items
:
center
;
height
:
50px
;
background-color
:
#ffffff
;
}
.flex-item
{
width
:
20px
;
height
:
20px
;
border-radius
:
16px
;
}
.color-primary
{
background-color
:
mediumpurple
;
}
.color-warning
{
background-color
:
pink
;
}
.color-success
{
background-color
:
cornflowerblue
;
}
.dragContent
{
width
:
60px
;
height
:
60px
;
background-color
:
red
;
}
.flex-box2
{
justify-content
:
space-around
;
align-items
:
center
;
flex-wrap
:
wrap
;
height
:
100px
;
background-color
:
#ffffff
;
}
.common
{
background-color
:
#ffffff
;
align-items
:
center
;
justify-content
:
center
;
}
.grid-parent
{
display
:
grid
;
grid-template-columns
:
20%
20%
;
grid-columns-gap
:
14px
;
grid-rows-gap
:
4px
;
grid-template-rows
:
15%
15%
;
}
.grid-child
{
width
:
100%
;
/* height: 100%;*/
border-radius
:
2px
;
}
.grid-left-top
{
width
:
20px
;
height
:
20px
;
border-radius
:
10px
;
border
:
1px
solid
plum
;
background
:
linear-gradient
(
pink
,
purple
);
box-shadow
:
0px
0px
1px
1px
pink
;
grid-row-start
:
0
;
grid-column-start
:
0
;
grid-row-end
:
0
;
grid-column-end
:
0
;
}
.grid-left-bottom
{
width
:
20px
;
height
:
20px
;
border-radius
:
5px
;
border
:
1px
solid
plum
;
background
:
linear-gradient
(
pink
,
#00aaee
);
box-shadow
:
0px
0px
1px
1px
pink
;
grid-row-start
:
1
;
grid-column-start
:
0
;
grid-row-end
:
1
;
grid-column-end
:
0
;
}
.grid-right-top
{
width
:
20px
;
height
:
20px
;
border-radius
:
3px
;
border
:
1px
dotted
plum
;
background
:
linear-gradient
(
mediumpurple
,
#00aaee
);
box-shadow
:
0px
0px
1px
1px
pink
;
grid-row-start
:
0
;
grid-column-start
:
1
;
grid-row-end
:
0
;
grid-column-end
:
1
;
}
.grid-right-bottom
{
width
:
20px
;
height
:
20px
;
border-radius
:
5px
;
border
:
1px
dotted
plum
;
background
:
linear-gradient
(
pink
,
mediumpurple
);
box-shadow
:
0px
0px
2px
2px
pink
;
grid-row-start
:
1
;
grid-column-start
:
1
;
grid-row-end
:
1
;
grid-column-end
:
1
;
}
.event-container
{
flex-direction
:
column
;
height
:
30%
;
}
.event1
{
width
:
60%
;
flex-weight
:
1
;
}
.event2
{
width
:
70%
;
flex-weight
:
1
;
}
.event3
{
width
:
80%
;
flex-weight
:
1
;
}
.function-container
{
flex-direction
:
column
;
}
.function
{
height
:
30px
;
width
:
100%
;
}
ace/ace_standard/src/main/js/default/pages/obj_CanvasRenderingContext2D/index.hml
0 → 100644
浏览文件 @
5bd1ab66
<!--/**
* 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.
*/-->
<div class="container">
<div class="sub-container">
<div class="prop-container">
<text class="title">
对象的属性
</text>
<text class="sub-title">
属性1
</text>
<canvas ref="canvas1" style="width: 100%; height: 30px;margin-top: 5px; ">
</canvas>
<text class="sub-title">
属性2
</text>
<canvas ref="canvas2" style="width: 100%; height: 30px;margin-top: 5px; ">
</canvas>
<text class="sub-title">
属性3
</text>
<canvas ref="canvas3" style="width: 100%; height: 20px;margin-top: 5px;">
</canvas>
<text class="sub-title">
属性4
</text>
<canvas ref="canvas4" style="width: 100%; height: 50px;margin-top: 5px;">
</canvas>
<text class="sub-title">
属性5
</text>
<canvas ref="canvas5" style="width: 100%; height: 40px;margin-top: 5px;">
</canvas>
<text class="sub-title">
属性6
</text>
<canvas ref="canvas6" style="width: 100%; height: 30px;margin-top: 5px;">
</canvas>
<text class="sub-title">
属性7
</text>
<canvas ref="canvas7" style="width: 100%; height: 80px;margin-top: 5px;">
</canvas>
<text class="sub-title">
属性8
</text>
<canvas ref="canvas8" style="width: 100%; height: 80px; background-color: #ffff00;margin-top: 5px;">
</canvas>
<text class="sub-title">
属性9
</text>
<canvas ref="canvas9" style="width: 100%; height: 70px;margin-top: 5px;">
</canvas>
</div>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="true">
</divider>
<div class="sub-container">
<div class="prop-container">
<text class="sub-title">
属性10
</text>
<canvas ref="canvas10" style="width: 100%; height: 90px;margin-top: 5px;">
</canvas>
<text class="sub-title">
属性11
</text>
<canvas ref="canvas11" style="width: 100%; height: 80px;margin-top: 5px;">
</canvas>
<text class="sub-title">
属性12
</text>
<canvas ref="canvas12" style="width: 100%; height: 40px;margin-bottom: 10px;margin-top: 5px;">
</canvas>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<text class="title">
对象的方法
</text>
<text class="sub-title">
方法1
</text>
<canvas style="width: 100%; height: 50px;margin-top: 5px;" ref="function1">
</canvas>
<text class="sub-title">
方法2
</text>
<canvas style="width: 100%; height: 30px;margin-top: 5px;" ref="function2">
</canvas>
<text class="sub-title">
方法3
</text>
<canvas style="width: 100%; height: 40px;margin-top: 5px;" ref="function3">
</canvas>
<text class="sub-title">
方法4
</text>
<canvas style="width: 100%; height: 70px;margin-top: 5px;" ref="function4"></canvas>
<text class="sub-title">
方法5
</text>
<canvas style="width: 100%; height: 50px;margin-top: 5px;" ref="function5"></canvas>
</div>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="true">
</divider>
<div class="sub-container">
<div class="function-container">
<text class="sub-title">
方法6
</text>
<canvas style="width: 100%; height: 40px;margin-top: 5px;" ref="function6"></canvas>
<text class="sub-title">
方法7
</text>
<canvas style="width: 100%; height: 40px;margin-top: 5px;" ref="function7"></canvas>
<text class="sub-title">
方法8
</text>
<canvas style="width: 100%; height: 50px;margin-top: 5px;" ref="function8"></canvas>
<text class="sub-title">
方法9
</text>
<canvas style="width: 100%; height: 100px;background-color: #ffff00;margin-top: 5px;" ref="function9"></canvas>
<text class="sub-title">
方法10
</text>
<canvas style="width: 100%; height: 60px;margin-top: 5px;" ref="function10"></canvas>
<text class="sub-title">
方法11
</text>
<canvas style="width: 100%; height: 70px;margin-top: 5px;" ref="function11"></canvas>
<text class="sub-title">
方法12
</text>
<canvas style="width: 100%; height: 60px;margin-top: 5px;" ref="function12"></canvas>
<text class="sub-title">
方法13
</text>
<canvas style="width: 100%; height: 60px;margin-top: 5px;" ref="function13"></canvas>
<text class="sub-title">
方法14
</text>
<canvas style="width: 100%; height: 60px;margin-top: 5px;" ref="function14"></canvas>
<text class="sub-title">
方法15
</text>
<canvas style="width: 100%; height: 60px;margin-top: 5px;" ref="function15"></canvas>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/obj_CanvasRenderingContext2D/index.js
0 → 100644
浏览文件 @
5bd1ab66
/**
* 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.
*/
import
prompt
from
'
@system.prompt
'
;
export
default
{
data
:{
left
:
0
,
top
:
0
,
},
onShow
(){
// 屬性
this
.
props1
()
this
.
props2
()
this
.
props3
()
this
.
props4
()
this
.
props5
()
this
.
props6
()
this
.
props7
()
this
.
props8
()
this
.
props9
()
this
.
props10
()
this
.
props11
()
this
.
props12
()
// 方法
this
.
functionTouch1
()
this
.
functionTouch2
()
this
.
functionTouch3
()
this
.
functionTouch4
()
this
.
functionTouch5
()
this
.
functionTouch6
()
this
.
functionTouch7
()
this
.
functionTouch8
()
this
.
functionTouch9
()
this
.
functionTouch10
()
this
.
functionTouch11
()
this
.
functionTouch12
()
this
.
functionTouch13
()
this
.
functionTouch14
()
this
.
functionTouch15
()
},
props1
()
{
const
el
=
this
.
$refs
.
canvas1
;
const
ctx
=
el
.
getContext
(
'
2d
'
);
ctx
.
fillStyle
=
'
#0000ff
'
;
ctx
.
fillRect
(
0
,
0
,
100
,
30
);
},
props2
()
{
const
el
=
this
.
$refs
.
canvas2
;
const
ctx
=
el
.
getContext
(
'
2d
'
);
ctx
.
lineWidth
=
10
;
ctx
.
strokeStyle
=
'
#0000ff
'
;
ctx
.
lineCap
=
'
round
'
;
ctx
.
strokeRect
(
0
,
0
,
100
,
30
);
},
props3
()
{
const
el
=
this
.
$refs
.
canvas3
;
const
ctx
=
el
.
getContext
(
'
2d
'
);
ctx
.
lineWidth
=
8
;
ctx
.
beginPath
();
ctx
.
lineCap
=
'
round
'
;
ctx
.
moveTo
(
10
,
10
);
ctx
.
lineTo
(
100
,
10
);
ctx
.
stroke
();
},
props4
()
{
const
el
=
this
.
$refs
.
canvas4
;
const
ctx
=
el
.
getContext
(
'
2d
'
);
ctx
.
beginPath
();
ctx
.
lineWidth
=
5
;
ctx
.
lineJoin
=
'
miter
'
;
ctx
.
moveTo
(
10
,
10
);
ctx
.
lineTo
(
80
,
30
);
ctx
.
lineTo
(
10
,
50
);
ctx
.
stroke
();
},
props5
()
{
const
el
=
this
.
$refs
.
canvas5
;
const
ctx
=
el
.
getContext
(
'
2d
'
);
ctx
.
lineWidth
=
5
;
ctx
.
lineJoin
=
'
miter
'
;
ctx
.
miterLimit
=
3
;
ctx
.
moveTo
(
10
,
10
);
ctx
.
lineTo
(
60
,
15
);
ctx
.
lineTo
(
10
,
40
);
ctx
.
stroke
();
},
props6
()
{
const
el
=
this
.
$refs
.
canvas6
;
const
ctx
=
el
.
getContext
(
'
2d
'
);
ctx
.
font
=
'
20px sans-serif
'
;
ctx
.
fillText
(
"
Hello World
"
,
10
,
20
);
},
props7
()
{
const
el
=
this
.
$refs
.
canvas7
;
const
ctx
=
el
.
getContext
(
'
2d
'
);
ctx
.
fillStyle
=
'
rgb(255,0,0)
'
;
ctx
.
fillRect
(
0
,
0
,
40
,
40
);
ctx
.
globalAlpha
=
0.4
;
ctx
.
fillStyle
=
'
rgb(0,0,255)
'
;
ctx
.
fillRect
(
40
,
40
,
40
,
40
);
},
props8
()
{
const
el
=
this
.
$refs
.
canvas8
;
const
ctx
=
el
.
getContext
(
'
2d
'
);
ctx
.
arc
(
50
,
40
,
30
,
0
,
6.28
);
ctx
.
setLineDash
([
10
,
20
]);
ctx
.
lineDashOffset
=
10.0
;
ctx
.
stroke
();
},
props9
()
{
const
el
=
this
.
$refs
.
canvas9
;
const
ctx
=
el
.
getContext
(
'
2d
'
);
ctx
.
fillStyle
=
'
rgb(255,0,0)
'
;
ctx
.
fillRect
(
10
,
10
,
30
,
30
);
ctx
.
globalCompositeOperation
=
'
source-over
'
;
ctx
.
fillStyle
=
'
rgb(0,0,255)
'
;
ctx
.
fillRect
(
25
,
25
,
30
,
30
);
// Start drawing second example
ctx
.
fillStyle
=
'
rgb(255,0,0)
'
;
ctx
.
fillRect
(
70
,
10
,
30
,
30
);
ctx
.
globalCompositeOperation
=
'
destination-over
'
;
ctx
.
fillStyle
=
'
rgb(0,0,255)
'
;
ctx
.
fillRect
(
85
,
25
,
30
,
30
);
},
props10
()
{
const
el
=
this
.
$refs
.
canvas10
;
const
ctx
=
el
.
getContext
(
'
2d
'
);
ctx
.
shadowBlur
=
30
;
ctx
.
shadowColor
=
'
rgb(0,0,0)
'
;
ctx
.
fillStyle
=
'
rgb(255,0,0)
'
;
ctx
.
fillRect
(
20
,
20
,
70
,
50
);
},
props11
()
{
const
el
=
this
.
$refs
.
canvas11
;
const
ctx
=
el
.
getContext
(
'
2d
'
);
ctx
.
shadowBlur
=
10
;
ctx
.
shadowOffsetX
=
20
;
ctx
.
shadowOffsetY
=
20
;
ctx
.
shadowColor
=
'
rgb(0,0,0)
'
;
ctx
.
fillStyle
=
'
rgb(255,0,0)
'
;
ctx
.
fillRect
(
10
,
0
,
70
,
50
);
},
props12
()
{
const
el
=
this
.
$refs
.
canvas12
;
const
ctx
=
el
.
getContext
(
'
2d
'
);
var
img
=
new
Image
();
img
.
src
=
'
common/images/image.png
'
;
img
.
onload
=
function
()
{
ctx
.
imageSmoothingEnabled
=
false
;
ctx
.
drawImage
(
img
,
10
,
0
,
100
,
60
);
};
},
functionTouch1
()
{
const
el
=
this
.
$refs
.
function1
;
const
ctx
=
el
.
getContext
(
'
2d
'
);
ctx
.
fillStyle
=
'
rgb(0,0,255)
'
;
ctx
.
fillRect
(
0
,
0
,
100
,
40
);
ctx
.
clearRect
(
20
,
10
,
60
,
20
);
},
functionTouch2
()
{
const
el
=
this
.
$refs
.
function2
;
const
ctx
=
el
.
getContext
(
'
2d
'
);
ctx
.
font
=
'
18px sans-serif
'
;
ctx
.
strokeText
(
"
Hello World!
"
,
0
,
20
);
},
functionTouch3
()
{
const
el
=
this
.
$refs
.
function3
;
const
ctx
=
el
.
getContext
(
'
2d
'
);
ctx
.
font
=
'
16px sans-serif
'
;
var
txt
=
'
Hello World
'
;
ctx
.
fillText
(
"
width:
"
+
ctx
.
measureText
(
txt
).
width
,
0
,
10
);
ctx
.
fillText
(
txt
,
0
,
25
);
},
functionTouch4
()
{
const
el
=
this
.
$refs
.
function4
;
const
ctx
=
el
.
getContext
(
'
2d
'
);
ctx
.
beginPath
();
ctx
.
moveTo
(
5
,
5
);
ctx
.
lineTo
(
70
,
5
);
ctx
.
lineTo
(
40
,
60
);
ctx
.
closePath
();
ctx
.
stroke
();
},
functionTouch5
()
{
const
el
=
this
.
$refs
.
function5
;
const
ctx
=
el
.
getContext
(
'
2d
'
);
var
img
=
new
Image
();
img
.
src
=
'
common/images/sun.png
'
;
var
pat
=
ctx
.
createPattern
(
img
,
'
repeat
'
);
ctx
.
fillStyle
=
pat
;
ctx
.
fillRect
(
20
,
0
,
60
,
50
);
},
functionTouch6
()
{
const
el
=
this
.
$refs
.
function6
;
const
ctx
=
el
.
getContext
(
'
2d
'
);
ctx
.
beginPath
();
ctx
.
moveTo
(
10
,
10
);
ctx
.
bezierCurveTo
(
20
,
40
,
80
,
40
,
100
,
10
);
ctx
.
stroke
();
},
functionTouch7
()
{
const
el
=
this
.
$refs
.
function7
;
const
ctx
=
el
.
getContext
(
'
2d
'
);
ctx
.
beginPath
();
ctx
.
moveTo
(
10
,
10
);
ctx
.
quadraticCurveTo
(
50
,
50
,
100
,
10
);
ctx
.
stroke
();
},
functionTouch8
()
{
const
el
=
this
.
$refs
.
function8
;
const
ctx
=
el
.
getContext
(
'
2d
'
);
ctx
.
moveTo
(
30
,
20
);
ctx
.
arcTo
(
70
,
10
,
70
,
20
,
30
);
// Create an arc
ctx
.
stroke
();
},
functionTouch9
()
{
const
el
=
this
.
$refs
.
function9
;
const
ctx
=
el
.
getContext
(
'
2d
'
);
ctx
.
beginPath
();
ctx
.
ellipse
(
50
,
50
,
30
,
60
,
Math
.
PI
*
0.25
,
Math
.
PI
*
0.5
,
Math
.
PI
,
1
);
ctx
.
stroke
();
},
functionTouch10
()
{
const
el
=
this
.
$refs
.
function10
;
const
ctx
=
el
.
getContext
(
'
2d
'
);
ctx
.
rect
(
10
,
0
,
60
,
60
);
// Create a 100*100 rectangle at (20, 20)
ctx
.
fill
();
// Draw it in default setting
},
functionTouch11
()
{
const
el
=
this
.
$refs
.
function11
;
const
ctx
=
el
.
getContext
(
'
2d
'
);
ctx
.
rect
(
10
,
0
,
50
,
50
);
ctx
.
stroke
();
ctx
.
clip
();
// Draw red rectangle after clip
ctx
.
fillStyle
=
"
rgb(255,0,0)
"
;
ctx
.
fillRect
(
0
,
0
,
40
,
40
);
},
functionTouch12
()
{
const
el
=
this
.
$refs
.
function12
;
const
ctx
=
el
.
getContext
(
'
2d
'
);
ctx
.
rotate
(
45
*
Math
.
PI
/
180
);
// Rotate the rectangle 45 degrees
ctx
.
fillRect
(
20
,
0
,
20
,
20
);
},
functionTouch13
()
{
const
el
=
this
.
$refs
.
function13
;
const
ctx
=
el
.
getContext
(
'
2d
'
);
ctx
.
strokeRect
(
10
,
10
,
25
,
25
);
ctx
.
scale
(
1.5
,
1.5
);
// Scale to 200%
ctx
.
strokeRect
(
10
,
10
,
20
,
20
);
},
functionTouch14
()
{
const
el
=
this
.
$refs
.
function14
;
const
ctx
=
el
.
getContext
(
'
2d
'
);
ctx
.
fillStyle
=
'
rgb(0,0,0)
'
;
ctx
.
fillRect
(
0
,
0
,
30
,
30
)
ctx
.
transform
(
1
,
0.5
,
-
0.5
,
1
,
3
,
3
);
ctx
.
fillStyle
=
'
rgb(255,0,0)
'
;
ctx
.
fillRect
(
0
,
0
,
30
,
30
);
ctx
.
transform
(
1
,
0.5
,
-
0.5
,
1
,
3
,
3
);
ctx
.
fillStyle
=
'
rgb(0,0,255)
'
;
ctx
.
fillRect
(
0
,
0
,
30
,
30
);
},
functionTouch15
()
{
const
el
=
this
.
$refs
.
function15
;
const
ctx
=
el
.
getContext
(
'
2d
'
);
ctx
.
fillRect
(
10
,
10
,
30
,
30
);
ctx
.
translate
(
50
,
10
);
ctx
.
fillRect
(
10
,
10
,
30
,
30
);
}
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/obj_Image/index.css
0 → 100644
浏览文件 @
5bd1ab66
/**
* 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
;
}
.prop_all-container
{
flex-direction
:
row
;
height
:
100%
;
flex-weight
:
1
;
}
.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
;
}
.prop1
{
color
:
#ad4e2a
;
height
:
30px
;
background-color
:
mediumslateblue
;
width
:
100%
;
margin
:
5px
;
}
.prop2
{
color
:
#343524
;
height
:
30px
;
background-color
:
pink
;
width
:
100%
;
margin
:
5px
;
}
.prop3
{
color
:
#456345
;
height
:
30px
;
background-color
:
darkseagreen
;
width
:
100%
;
margin
:
5px
;
}
.prop5
{
color
:
#831834
;
stroke-width
:
40px
;
line-cap
:
square
;
margin
:
5px
;
height
:
70px
;
}
.ani-container
{
flex-direction
:
column
;
height
:
100%
;
flex-weight
:
1
;
}
.ani1
{
color
:
#72ac33
;
stroke-width
:
55px
;
line-cap
:
square
;
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
)
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
)
}
}
.ani2
{
color
:
#ad4e2a
;
width
:
55px
;
height
:
55px
;
margin
:
5px
;
transform-origin
:
2%
3%
;
animation-name
:
ani2Go
;
animation-delay
:
5s
;
animation-duration
:
10s
;
animation-iteration-count
:
4
;
animation-timing-function
:
ease-out
;
animation-direction
:
reverse
;
animation-fill-mode
:
forwards
;
animation-play-state
:
running
;
transition
:
all
0
ease
0
;
}
@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
);
}
}
.gradient-container
{
flex-direction
:
column
;
}
.gradient1
{
width
:
100%
;
height
:
20px
;
margin
:
5px
;
background
:
linear-gradient
(
red
,
#00ff00
);
}
.gradient2
{
width
:
100%
;
height
:
20px
;
margin
:
5px
;
background
:
linear-gradient
(
45deg
,
rgb
(
255
,
0
,
0
),
rgb
(
0
,
255
,
0
));
}
.gradient3
{
width
:
100%
;
height
:
20px
;
margin
:
5px
;
background
:
linear-gradient
(
to
right
,
rgb
(
255
,
0
,
0
)
90px
,
rgb
(
0
,
255
,
0
)
60%
);
}
.gradient4
{
width
:
100%
;
height
:
20px
;
margin
:
5px
;
background
:
repeating-linear-gradient
(
to
right
,
rgba
(
255
,
255
,
0
,
1
)
30px
,
rgba
(
0
,
0
,
255
,
.5
)
60px
);
}
.accessibility-container
{
flex-direction
:
column
;
}
.accessibility1
{
width
:
100%
;
height
:
30px
;
}
.atom-container
{
flex-direction
:
column
;
}
.multiMode-container
{
flex-direction
:
column
;
}
.multiMode1
{
background-color
:
#978666
;
width
:
100%
;
height
:
30px
;
margin
:
5px
;
}
.flex-box
{
justify-content
:
space-around
;
align-items
:
center
;
height
:
50px
;
background-color
:
#ffffff
;
}
.flex-item
{
width
:
20px
;
height
:
20px
;
border-radius
:
16px
;
}
.color-primary
{
background-color
:
mediumpurple
;
}
.color-warning
{
background-color
:
pink
;
}
.color-success
{
background-color
:
cornflowerblue
;
}
.dragContent
{
width
:
60px
;
height
:
60px
;
background-color
:
red
;
}
.flex-box2
{
justify-content
:
space-around
;
align-items
:
center
;
flex-wrap
:
wrap
;
height
:
100px
;
background-color
:
#ffffff
;
}
.common
{
background-color
:
#ffffff
;
align-items
:
center
;
justify-content
:
center
;
}
.grid-parent
{
display
:
grid
;
grid-template-columns
:
20%
20%
;
grid-columns-gap
:
14px
;
grid-rows-gap
:
4px
;
grid-template-rows
:
15%
15%
;
}
.grid-child
{
width
:
100%
;
/* height: 100%;*/
border-radius
:
2px
;
}
.grid-left-top
{
width
:
20px
;
height
:
20px
;
border-radius
:
10px
;
border
:
1px
solid
plum
;
background
:
linear-gradient
(
pink
,
purple
);
box-shadow
:
0px
0px
1px
1px
pink
;
grid-row-start
:
0
;
grid-column-start
:
0
;
grid-row-end
:
0
;
grid-column-end
:
0
;
}
.grid-left-bottom
{
width
:
20px
;
height
:
20px
;
border-radius
:
5px
;
border
:
1px
solid
plum
;
background
:
linear-gradient
(
pink
,
#00aaee
);
box-shadow
:
0px
0px
1px
1px
pink
;
grid-row-start
:
1
;
grid-column-start
:
0
;
grid-row-end
:
1
;
grid-column-end
:
0
;
}
.grid-right-top
{
width
:
20px
;
height
:
20px
;
border-radius
:
3px
;
border
:
1px
dotted
plum
;
background
:
linear-gradient
(
mediumpurple
,
#00aaee
);
box-shadow
:
0px
0px
1px
1px
pink
;
grid-row-start
:
0
;
grid-column-start
:
1
;
grid-row-end
:
0
;
grid-column-end
:
1
;
}
.grid-right-bottom
{
width
:
20px
;
height
:
20px
;
border-radius
:
5px
;
border
:
1px
dotted
plum
;
background
:
linear-gradient
(
pink
,
mediumpurple
);
box-shadow
:
0px
0px
2px
2px
pink
;
grid-row-start
:
1
;
grid-column-start
:
1
;
grid-row-end
:
1
;
grid-column-end
:
1
;
}
.event-container
{
flex-direction
:
column
;
height
:
30%
;
}
.event1
{
width
:
60%
;
flex-weight
:
1
;
}
.event2
{
width
:
70%
;
flex-weight
:
1
;
}
.event3
{
width
:
80%
;
flex-weight
:
1
;
}
.function-container
{
flex-direction
:
column
;
}
.function
{
height
:
30px
;
width
:
100%
;
}
ace/ace_standard/src/main/js/default/pages/obj_Image/index.hml
0 → 100644
浏览文件 @
5bd1ab66
<!--/**
* 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.
*/-->
<div class="container">
<div class="sub-container">
<div class="prop-container">
<text class="title">
Image对象的属性
</text>
<text class="sub-title">
属性1
</text>
<canvas ref="canvas1" style="width: 100%; height: 300px; ">
</canvas>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/obj_Image/index.js
0 → 100644
浏览文件 @
5bd1ab66
/**
* 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.
*/
import
prompt
from
'
@system.prompt
'
;
export
default
{
data
:{
left
:
0
,
top
:
0
,
},
onShow
(){
// 屬性
this
.
props1
()
},
props1
()
{
const
el
=
this
.
$refs
.
canvas1
var
ctx
=
el
.
getContext
(
'
2d
'
);
var
img
=
new
Image
();
img
.
src
=
'
common/images/image.png
'
;
img
.
onload
=
function
()
{
console
.
log
(
'
Image load success
'
);
ctx
.
drawImage
(
img
,
0
,
0
,
300
,
250
);
prompt
.
showToast
({
message
:
'
Image load success: width=
'
+
img
.
width
+
'
,height=
'
+
img
.
height
});
};
img
.
onerror
=
function
()
{
console
.
log
(
'
Image load fail
'
);
};
},
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/obj_ImageBitmap/index.css
0 → 100644
浏览文件 @
5bd1ab66
/**
* 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
;
}
.prop_all-container
{
flex-direction
:
row
;
height
:
100%
;
flex-weight
:
1
;
}
.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
;
}
.prop1
{
color
:
#ad4e2a
;
height
:
30px
;
background-color
:
mediumslateblue
;
width
:
100%
;
margin
:
5px
;
}
.prop2
{
color
:
#343524
;
height
:
30px
;
background-color
:
pink
;
width
:
100%
;
margin
:
5px
;
}
.prop3
{
color
:
#456345
;
height
:
30px
;
background-color
:
darkseagreen
;
width
:
100%
;
margin
:
5px
;
}
.prop5
{
color
:
#831834
;
stroke-width
:
40px
;
line-cap
:
square
;
margin
:
5px
;
height
:
70px
;
}
.ani-container
{
flex-direction
:
column
;
height
:
100%
;
flex-weight
:
1
;
}
.ani1
{
color
:
#72ac33
;
stroke-width
:
55px
;
line-cap
:
square
;
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
)
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
)
}
}
.ani2
{
color
:
#ad4e2a
;
width
:
55px
;
height
:
55px
;
margin
:
5px
;
transform-origin
:
2%
3%
;
animation-name
:
ani2Go
;
animation-delay
:
5s
;
animation-duration
:
10s
;
animation-iteration-count
:
4
;
animation-timing-function
:
ease-out
;
animation-direction
:
reverse
;
animation-fill-mode
:
forwards
;
animation-play-state
:
running
;
transition
:
all
0
ease
0
;
}
@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
);
}
}
.gradient-container
{
flex-direction
:
column
;
}
.gradient1
{
width
:
100%
;
height
:
20px
;
margin
:
5px
;
background
:
linear-gradient
(
red
,
#00ff00
);
}
.gradient2
{
width
:
100%
;
height
:
20px
;
margin
:
5px
;
background
:
linear-gradient
(
45deg
,
rgb
(
255
,
0
,
0
),
rgb
(
0
,
255
,
0
));
}
.gradient3
{
width
:
100%
;
height
:
20px
;
margin
:
5px
;
background
:
linear-gradient
(
to
right
,
rgb
(
255
,
0
,
0
)
90px
,
rgb
(
0
,
255
,
0
)
60%
);
}
.gradient4
{
width
:
100%
;
height
:
20px
;
margin
:
5px
;
background
:
repeating-linear-gradient
(
to
right
,
rgba
(
255
,
255
,
0
,
1
)
30px
,
rgba
(
0
,
0
,
255
,
.5
)
60px
);
}
.accessibility-container
{
flex-direction
:
column
;
}
.accessibility1
{
width
:
100%
;
height
:
30px
;
}
.atom-container
{
flex-direction
:
column
;
}
.multiMode-container
{
flex-direction
:
column
;
}
.multiMode1
{
background-color
:
#978666
;
width
:
100%
;
height
:
30px
;
margin
:
5px
;
}
.flex-box
{
justify-content
:
space-around
;
align-items
:
center
;
height
:
50px
;
background-color
:
#ffffff
;
}
.flex-item
{
width
:
20px
;
height
:
20px
;
border-radius
:
16px
;
}
.color-primary
{
background-color
:
mediumpurple
;
}
.color-warning
{
background-color
:
pink
;
}
.color-success
{
background-color
:
cornflowerblue
;
}
.dragContent
{
width
:
60px
;
height
:
60px
;
background-color
:
red
;
}
.flex-box2
{
justify-content
:
space-around
;
align-items
:
center
;
flex-wrap
:
wrap
;
height
:
100px
;
background-color
:
#ffffff
;
}
.common
{
background-color
:
#ffffff
;
align-items
:
center
;
justify-content
:
center
;
}
.grid-parent
{
display
:
grid
;
grid-template-columns
:
20%
20%
;
grid-columns-gap
:
14px
;
grid-rows-gap
:
4px
;
grid-template-rows
:
15%
15%
;
}
.grid-child
{
width
:
100%
;
/* height: 100%;*/
border-radius
:
2px
;
}
.grid-left-top
{
width
:
20px
;
height
:
20px
;
border-radius
:
10px
;
border
:
1px
solid
plum
;
background
:
linear-gradient
(
pink
,
purple
);
box-shadow
:
0px
0px
1px
1px
pink
;
grid-row-start
:
0
;
grid-column-start
:
0
;
grid-row-end
:
0
;
grid-column-end
:
0
;
}
.grid-left-bottom
{
width
:
20px
;
height
:
20px
;
border-radius
:
5px
;
border
:
1px
solid
plum
;
background
:
linear-gradient
(
pink
,
#00aaee
);
box-shadow
:
0px
0px
1px
1px
pink
;
grid-row-start
:
1
;
grid-column-start
:
0
;
grid-row-end
:
1
;
grid-column-end
:
0
;
}
.grid-right-top
{
width
:
20px
;
height
:
20px
;
border-radius
:
3px
;
border
:
1px
dotted
plum
;
background
:
linear-gradient
(
mediumpurple
,
#00aaee
);
box-shadow
:
0px
0px
1px
1px
pink
;
grid-row-start
:
0
;
grid-column-start
:
1
;
grid-row-end
:
0
;
grid-column-end
:
1
;
}
.grid-right-bottom
{
width
:
20px
;
height
:
20px
;
border-radius
:
5px
;
border
:
1px
dotted
plum
;
background
:
linear-gradient
(
pink
,
mediumpurple
);
box-shadow
:
0px
0px
2px
2px
pink
;
grid-row-start
:
1
;
grid-column-start
:
1
;
grid-row-end
:
1
;
grid-column-end
:
1
;
}
.event-container
{
flex-direction
:
column
;
height
:
30%
;
}
.event1
{
width
:
60%
;
flex-weight
:
1
;
}
.event2
{
width
:
70%
;
flex-weight
:
1
;
}
.event3
{
width
:
80%
;
flex-weight
:
1
;
}
.function-container
{
flex-direction
:
column
;
}
.function
{
height
:
30px
;
width
:
100%
;
}
ace/ace_standard/src/main/js/default/pages/obj_ImageBitmap/index.hml
0 → 100644
浏览文件 @
5bd1ab66
<!--/**
* 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.
*/-->
<div class="container">
<div class="sub-container">
<div class="prop-container">
<text class="title">
ImageBitmap对象的属性
</text>
<text class="sub-title">
属性1
</text>
<canvas ref="canvas1" style="width: 100%; height: 300px;background-color: #ffff00; ">
</canvas>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/obj_ImageBitmap/index.js
0 → 100644
浏览文件 @
5bd1ab66
/**
* 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.
*/
import
prompt
from
'
@system.prompt
'
;
export
default
{
data
:{
left
:
0
,
top
:
0
,
},
onShow
(){
// 屬性
this
.
props1
()
},
props1
()
{
const
canvas
=
this
.
$refs
.
canvas1
var
ctx
=
canvas
.
getContext
(
'
2d
'
);
var
offscreen
=
new
OffscreenCanvas
(
200
,
120
);
var
offscreenCanvasCtx
=
offscreen
.
getContext
(
"
2d
"
);
offscreenCanvasCtx
.
rect
(
10
,
10
,
100
,
100
);
offscreenCanvasCtx
.
stroke
();
this
.
textValue2
=
offscreenCanvasCtx
.
isPointInStroke
(
20
,
10
);
var
bitmap
=
offscreen
.
transferToImageBitmap
();
ctx
.
transferFromImageBitmap
(
bitmap
);
prompt
.
showToast
({
message
:
'
function1 ImageBitmap:
\n
'
+
JSON
.
stringify
(
bitmap
),
duration
:
3000
});
console
.
log
(
JSON
.
stringify
(
bitmap
))
},
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/obj_ImageData/index.css
0 → 100644
浏览文件 @
5bd1ab66
/**
* 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
;
}
.prop_all-container
{
flex-direction
:
row
;
height
:
100%
;
flex-weight
:
1
;
}
.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
;
}
.prop1
{
color
:
#ad4e2a
;
height
:
30px
;
background-color
:
mediumslateblue
;
width
:
100%
;
margin
:
5px
;
}
.prop2
{
color
:
#343524
;
height
:
30px
;
background-color
:
pink
;
width
:
100%
;
margin
:
5px
;
}
.prop3
{
color
:
#456345
;
height
:
30px
;
background-color
:
darkseagreen
;
width
:
100%
;
margin
:
5px
;
}
.prop5
{
color
:
#831834
;
stroke-width
:
40px
;
line-cap
:
square
;
margin
:
5px
;
height
:
70px
;
}
.ani-container
{
flex-direction
:
column
;
height
:
100%
;
flex-weight
:
1
;
}
.ani1
{
color
:
#72ac33
;
stroke-width
:
55px
;
line-cap
:
square
;
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
)
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
)
}
}
.ani2
{
color
:
#ad4e2a
;
width
:
55px
;
height
:
55px
;
margin
:
5px
;
transform-origin
:
2%
3%
;
animation-name
:
ani2Go
;
animation-delay
:
5s
;
animation-duration
:
10s
;
animation-iteration-count
:
4
;
animation-timing-function
:
ease-out
;
animation-direction
:
reverse
;
animation-fill-mode
:
forwards
;
animation-play-state
:
running
;
transition
:
all
0
ease
0
;
}
@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
);
}
}
.gradient-container
{
flex-direction
:
column
;
}
.gradient1
{
width
:
100%
;
height
:
20px
;
margin
:
5px
;
background
:
linear-gradient
(
red
,
#00ff00
);
}
.gradient2
{
width
:
100%
;
height
:
20px
;
margin
:
5px
;
background
:
linear-gradient
(
45deg
,
rgb
(
255
,
0
,
0
),
rgb
(
0
,
255
,
0
));
}
.gradient3
{
width
:
100%
;
height
:
20px
;
margin
:
5px
;
background
:
linear-gradient
(
to
right
,
rgb
(
255
,
0
,
0
)
90px
,
rgb
(
0
,
255
,
0
)
60%
);
}
.gradient4
{
width
:
100%
;
height
:
20px
;
margin
:
5px
;
background
:
repeating-linear-gradient
(
to
right
,
rgba
(
255
,
255
,
0
,
1
)
30px
,
rgba
(
0
,
0
,
255
,
.5
)
60px
);
}
.accessibility-container
{
flex-direction
:
column
;
}
.accessibility1
{
width
:
100%
;
height
:
30px
;
}
.atom-container
{
flex-direction
:
column
;
}
.multiMode-container
{
flex-direction
:
column
;
}
.multiMode1
{
background-color
:
#978666
;
width
:
100%
;
height
:
30px
;
margin
:
5px
;
}
.flex-box
{
justify-content
:
space-around
;
align-items
:
center
;
height
:
50px
;
background-color
:
#ffffff
;
}
.flex-item
{
width
:
20px
;
height
:
20px
;
border-radius
:
16px
;
}
.color-primary
{
background-color
:
mediumpurple
;
}
.color-warning
{
background-color
:
pink
;
}
.color-success
{
background-color
:
cornflowerblue
;
}
.dragContent
{
width
:
60px
;
height
:
60px
;
background-color
:
red
;
}
.flex-box2
{
justify-content
:
space-around
;
align-items
:
center
;
flex-wrap
:
wrap
;
height
:
100px
;
background-color
:
#ffffff
;
}
.common
{
background-color
:
#ffffff
;
align-items
:
center
;
justify-content
:
center
;
}
.grid-parent
{
display
:
grid
;
grid-template-columns
:
20%
20%
;
grid-columns-gap
:
14px
;
grid-rows-gap
:
4px
;
grid-template-rows
:
15%
15%
;
}
.grid-child
{
width
:
100%
;
/* height: 100%;*/
border-radius
:
2px
;
}
.grid-left-top
{
width
:
20px
;
height
:
20px
;
border-radius
:
10px
;
border
:
1px
solid
plum
;
background
:
linear-gradient
(
pink
,
purple
);
box-shadow
:
0px
0px
1px
1px
pink
;
grid-row-start
:
0
;
grid-column-start
:
0
;
grid-row-end
:
0
;
grid-column-end
:
0
;
}
.grid-left-bottom
{
width
:
20px
;
height
:
20px
;
border-radius
:
5px
;
border
:
1px
solid
plum
;
background
:
linear-gradient
(
pink
,
#00aaee
);
box-shadow
:
0px
0px
1px
1px
pink
;
grid-row-start
:
1
;
grid-column-start
:
0
;
grid-row-end
:
1
;
grid-column-end
:
0
;
}
.grid-right-top
{
width
:
20px
;
height
:
20px
;
border-radius
:
3px
;
border
:
1px
dotted
plum
;
background
:
linear-gradient
(
mediumpurple
,
#00aaee
);
box-shadow
:
0px
0px
1px
1px
pink
;
grid-row-start
:
0
;
grid-column-start
:
1
;
grid-row-end
:
0
;
grid-column-end
:
1
;
}
.grid-right-bottom
{
width
:
20px
;
height
:
20px
;
border-radius
:
5px
;
border
:
1px
dotted
plum
;
background
:
linear-gradient
(
pink
,
mediumpurple
);
box-shadow
:
0px
0px
2px
2px
pink
;
grid-row-start
:
1
;
grid-column-start
:
1
;
grid-row-end
:
1
;
grid-column-end
:
1
;
}
.event-container
{
flex-direction
:
column
;
height
:
30%
;
}
.event1
{
width
:
60%
;
flex-weight
:
1
;
}
.event2
{
width
:
70%
;
flex-weight
:
1
;
}
.event3
{
width
:
80%
;
flex-weight
:
1
;
}
.function-container
{
flex-direction
:
column
;
}
.function
{
height
:
30px
;
width
:
100%
;
}
ace/ace_standard/src/main/js/default/pages/obj_ImageData/index.hml
0 → 100644
浏览文件 @
5bd1ab66
<!--/**
* 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.
*/-->
<div class="container">
<div class="sub-container">
<div class="prop-container">
<text class="title">
ImageData对象的属性
</text>
<text class="sub-title">
属性1
</text>
<canvas ref="canvas1" style="width: 100%; height: 300px; background-color: #ffff00;">
</canvas>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/obj_ImageData/index.js
0 → 100644
浏览文件 @
5bd1ab66
/**
* 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.
*/
import
prompt
from
'
@system.prompt
'
;
export
default
{
data
:{
left
:
0
,
top
:
0
,
},
onShow
(){
// 屬性
this
.
props1
()
},
props1
()
{
const
el
=
this
.
$refs
.
canvas1
;
const
ctx
=
el
.
getContext
(
'
2d
'
);
ctx
.
fillRect
(
0
,
0
,
200
,
200
)
var
imageData
=
ctx
.
createImageData
(
1
,
1
)
prompt
.
showToast
({
message
:
JSON
.
stringify
(
imageData
),
duration
:
5000
})
console
.
log
(
JSON
.
stringify
(
imageData
))
},
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/index.css
0 → 100644
浏览文件 @
5bd1ab66
/**
* 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
;
}
.prop_all-container
{
flex-direction
:
row
;
height
:
100%
;
flex-weight
:
1
;
}
.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
;
}
.prop1
{
color
:
#ad4e2a
;
height
:
30px
;
background-color
:
mediumslateblue
;
width
:
100%
;
margin
:
5px
;
}
.prop2
{
color
:
#343524
;
height
:
30px
;
background-color
:
pink
;
width
:
100%
;
margin
:
5px
;
}
.prop3
{
color
:
#456345
;
height
:
30px
;
background-color
:
darkseagreen
;
width
:
100%
;
margin
:
5px
;
}
.prop5
{
color
:
#831834
;
stroke-width
:
40px
;
line-cap
:
square
;
margin
:
5px
;
height
:
70px
;
}
.ani-container
{
flex-direction
:
column
;
height
:
100%
;
flex-weight
:
1
;
}
.ani1
{
color
:
#72ac33
;
stroke-width
:
55px
;
line-cap
:
square
;
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
)
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
)
}
}
.ani2
{
color
:
#ad4e2a
;
width
:
55px
;
height
:
55px
;
margin
:
5px
;
transform-origin
:
2%
3%
;
animation-name
:
ani2Go
;
animation-delay
:
5s
;
animation-duration
:
10s
;
animation-iteration-count
:
4
;
animation-timing-function
:
ease-out
;
animation-direction
:
reverse
;
animation-fill-mode
:
forwards
;
animation-play-state
:
running
;
transition
:
all
0
ease
0
;
}
@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
);
}
}
.gradient-container
{
flex-direction
:
column
;
}
.gradient1
{
width
:
100%
;
height
:
20px
;
margin
:
5px
;
background
:
linear-gradient
(
red
,
#00ff00
);
}
.gradient2
{
width
:
100%
;
height
:
20px
;
margin
:
5px
;
background
:
linear-gradient
(
45deg
,
rgb
(
255
,
0
,
0
),
rgb
(
0
,
255
,
0
));
}
.gradient3
{
width
:
100%
;
height
:
20px
;
margin
:
5px
;
background
:
linear-gradient
(
to
right
,
rgb
(
255
,
0
,
0
)
90px
,
rgb
(
0
,
255
,
0
)
60%
);
}
.gradient4
{
width
:
100%
;
height
:
20px
;
margin
:
5px
;
background
:
repeating-linear-gradient
(
to
right
,
rgba
(
255
,
255
,
0
,
1
)
30px
,
rgba
(
0
,
0
,
255
,
.5
)
60px
);
}
.accessibility-container
{
flex-direction
:
column
;
}
.accessibility1
{
width
:
100%
;
height
:
30px
;
}
.atom-container
{
flex-direction
:
column
;
}
.multiMode-container
{
flex-direction
:
column
;
}
.multiMode1
{
background-color
:
#978666
;
width
:
100%
;
height
:
30px
;
margin
:
5px
;
}
.flex-box
{
justify-content
:
space-around
;
align-items
:
center
;
height
:
50px
;
background-color
:
#ffffff
;
}
.flex-item
{
width
:
20px
;
height
:
20px
;
border-radius
:
16px
;
}
.color-primary
{
background-color
:
mediumpurple
;
}
.color-warning
{
background-color
:
pink
;
}
.color-success
{
background-color
:
cornflowerblue
;
}
.dragContent
{
width
:
60px
;
height
:
60px
;
background-color
:
red
;
}
.flex-box2
{
justify-content
:
space-around
;
align-items
:
center
;
flex-wrap
:
wrap
;
height
:
100px
;
background-color
:
#ffffff
;
}
.common
{
background-color
:
#ffffff
;
align-items
:
center
;
justify-content
:
center
;
}
.grid-parent
{
display
:
grid
;
grid-template-columns
:
20%
20%
;
grid-columns-gap
:
14px
;
grid-rows-gap
:
4px
;
grid-template-rows
:
15%
15%
;
}
.grid-child
{
width
:
100%
;
/* height: 100%;*/
border-radius
:
2px
;
}
.grid-left-top
{
width
:
20px
;
height
:
20px
;
border-radius
:
10px
;
border
:
1px
solid
plum
;
background
:
linear-gradient
(
pink
,
purple
);
box-shadow
:
0px
0px
1px
1px
pink
;
grid-row-start
:
0
;
grid-column-start
:
0
;
grid-row-end
:
0
;
grid-column-end
:
0
;
}
.grid-left-bottom
{
width
:
20px
;
height
:
20px
;
border-radius
:
5px
;
border
:
1px
solid
plum
;
background
:
linear-gradient
(
pink
,
#00aaee
);
box-shadow
:
0px
0px
1px
1px
pink
;
grid-row-start
:
1
;
grid-column-start
:
0
;
grid-row-end
:
1
;
grid-column-end
:
0
;
}
.grid-right-top
{
width
:
20px
;
height
:
20px
;
border-radius
:
3px
;
border
:
1px
dotted
plum
;
background
:
linear-gradient
(
mediumpurple
,
#00aaee
);
box-shadow
:
0px
0px
1px
1px
pink
;
grid-row-start
:
0
;
grid-column-start
:
1
;
grid-row-end
:
0
;
grid-column-end
:
1
;
}
.grid-right-bottom
{
width
:
20px
;
height
:
20px
;
border-radius
:
5px
;
border
:
1px
dotted
plum
;
background
:
linear-gradient
(
pink
,
mediumpurple
);
box-shadow
:
0px
0px
2px
2px
pink
;
grid-row-start
:
1
;
grid-column-start
:
1
;
grid-row-end
:
1
;
grid-column-end
:
1
;
}
.event-container
{
flex-direction
:
column
;
height
:
30%
;
}
.event1
{
width
:
60%
;
flex-weight
:
1
;
}
.event2
{
width
:
70%
;
flex-weight
:
1
;
}
.event3
{
width
:
80%
;
flex-weight
:
1
;
}
.function-container
{
flex-direction
:
column
;
}
.function
{
height
:
30px
;
width
:
100%
;
}
ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/index.hml
0 → 100644
浏览文件 @
5bd1ab66
<!--/**
* 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.
*/-->
<div class="container">
<div class="sub-container">
<div class="prop-container">
<text class="title">
OffscreenCanvas对象的属性
</text>
<text class="sub-title">
属性1
</text>
<canvas ref="canvas1" style="width: 100%; height: 300px; ">
</canvas>
</div>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="true">
</divider>
<div class="sub-container">
<div class="function-container">
<text class="title">
OffscreenCanvas对象的方法
</text>
<text class="sub-title">
方法1
</text>
<canvas style="width: 100%; height: 300px;" ref="function1"></canvas>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/index.js
0 → 100644
浏览文件 @
5bd1ab66
/**
* 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.
*/
import
prompt
from
'
@system.prompt
'
;
export
default
{
data
:{
left
:
0
,
top
:
0
,
},
onShow
(){
// 属性
this
.
props1
()
// 方法
this
.
functionTouch1
()
},
props1
()
{
const
el
=
this
.
$refs
.
canvas1
const
ctx
=
el
.
getContext
(
'
2d
'
);
var
offscreen
=
new
OffscreenCanvas
(
200
,
100
);
var
offscreenCanvasCtx
=
offscreen
.
getContext
(
"
2d
"
);
var
img
=
new
Image
();
img
.
src
=
'
common/images/image.png
'
;
offscreenCanvasCtx
.
drawImage
(
img
,
0
,
0
,
100
,
100
);
prompt
.
showToast
({
message
:
'
OffscreenCanvas width=
'
+
offscreen
.
width
+
'
,OffscreenCanvas height=
'
+
offscreen
.
height
});
console
.
log
(
'
OffscreenCanvas width=
'
+
offscreen
.
width
+
'
,OffscreenCanvas height=
'
+
offscreen
.
height
)
var
bitmap
=
offscreen
.
transferToImageBitmap
();
ctx
.
transferFromImageBitmap
(
bitmap
);
},
functionTouch1
()
{
const
el
=
this
.
$refs
.
function1
const
ctx
=
el
.
getContext
(
'
2d
'
);
var
offscreen
=
new
OffscreenCanvas
(
500
,
500
);
var
offscreenCanvasCtx
=
offscreen
.
getContext
(
"
2d
"
);
var
img
=
new
Image
();
img
.
src
=
'
common/images/image.png
'
;
offscreenCanvasCtx
.
drawImage
(
img
,
0
,
0
,
100
,
100
);
var
dataURL
=
offscreen
.
toDataURL
();
var
bitmap
=
offscreen
.
transferToImageBitmap
();
ctx
.
transferFromImageBitmap
(
bitmap
);
prompt
.
showToast
({
message
:
'
offscreenCanvasCtx=
'
+
offscreenCanvasCtx
+
'
,dataURL=
'
+
dataURL
+
'
,bitmap=
'
+
JSON
.
stringify
(
bitmap
)
});
console
.
log
(
'
offscreenCanvasCtx=
'
+
offscreenCanvasCtx
+
'
,dataURL=
'
+
dataURL
+
'
,bitmap=
'
+
JSON
.
stringify
(
bitmap
));
//data:image/png;base64,xxxxxx
},
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/index.css
0 → 100644
浏览文件 @
5bd1ab66
/**
* 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
;
}
.prop_all-container
{
flex-direction
:
row
;
height
:
100%
;
flex-weight
:
1
;
}
.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
;
}
.prop1
{
color
:
#ad4e2a
;
height
:
30px
;
background-color
:
mediumslateblue
;
width
:
100%
;
margin
:
5px
;
}
.prop2
{
color
:
#343524
;
height
:
30px
;
background-color
:
pink
;
width
:
100%
;
margin
:
5px
;
}
.prop3
{
color
:
#456345
;
height
:
30px
;
background-color
:
darkseagreen
;
width
:
100%
;
margin
:
5px
;
}
.prop5
{
color
:
#831834
;
stroke-width
:
40px
;
line-cap
:
square
;
margin
:
5px
;
height
:
70px
;
}
.ani-container
{
flex-direction
:
column
;
height
:
100%
;
flex-weight
:
1
;
}
.ani1
{
color
:
#72ac33
;
stroke-width
:
55px
;
line-cap
:
square
;
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
)
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
)
}
}
.ani2
{
color
:
#ad4e2a
;
width
:
55px
;
height
:
55px
;
margin
:
5px
;
transform-origin
:
2%
3%
;
animation-name
:
ani2Go
;
animation-delay
:
5s
;
animation-duration
:
10s
;
animation-iteration-count
:
4
;
animation-timing-function
:
ease-out
;
animation-direction
:
reverse
;
animation-fill-mode
:
forwards
;
animation-play-state
:
running
;
transition
:
all
0
ease
0
;
}
@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
);
}
}
.gradient-container
{
flex-direction
:
column
;
}
.gradient1
{
width
:
100%
;
height
:
20px
;
margin
:
5px
;
background
:
linear-gradient
(
red
,
#00ff00
);
}
.gradient2
{
width
:
100%
;
height
:
20px
;
margin
:
5px
;
background
:
linear-gradient
(
45deg
,
rgb
(
255
,
0
,
0
),
rgb
(
0
,
255
,
0
));
}
.gradient3
{
width
:
100%
;
height
:
20px
;
margin
:
5px
;
background
:
linear-gradient
(
to
right
,
rgb
(
255
,
0
,
0
)
90px
,
rgb
(
0
,
255
,
0
)
60%
);
}
.gradient4
{
width
:
100%
;
height
:
20px
;
margin
:
5px
;
background
:
repeating-linear-gradient
(
to
right
,
rgba
(
255
,
255
,
0
,
1
)
30px
,
rgba
(
0
,
0
,
255
,
.5
)
60px
);
}
.accessibility-container
{
flex-direction
:
column
;
}
.accessibility1
{
width
:
100%
;
height
:
30px
;
}
.atom-container
{
flex-direction
:
column
;
}
.multiMode-container
{
flex-direction
:
column
;
}
.multiMode1
{
background-color
:
#978666
;
width
:
100%
;
height
:
30px
;
margin
:
5px
;
}
.flex-box
{
justify-content
:
space-around
;
align-items
:
center
;
height
:
50px
;
background-color
:
#ffffff
;
}
.flex-item
{
width
:
20px
;
height
:
20px
;
border-radius
:
16px
;
}
.color-primary
{
background-color
:
mediumpurple
;
}
.color-warning
{
background-color
:
pink
;
}
.color-success
{
background-color
:
cornflowerblue
;
}
.dragContent
{
width
:
60px
;
height
:
60px
;
background-color
:
red
;
}
.flex-box2
{
justify-content
:
space-around
;
align-items
:
center
;
flex-wrap
:
wrap
;
height
:
100px
;
background-color
:
#ffffff
;
}
.common
{
background-color
:
#ffffff
;
align-items
:
center
;
justify-content
:
center
;
}
.grid-parent
{
display
:
grid
;
grid-template-columns
:
20%
20%
;
grid-columns-gap
:
14px
;
grid-rows-gap
:
4px
;
grid-template-rows
:
15%
15%
;
}
.grid-child
{
width
:
100%
;
/* height: 100%;*/
border-radius
:
2px
;
}
.grid-left-top
{
width
:
20px
;
height
:
20px
;
border-radius
:
10px
;
border
:
1px
solid
plum
;
background
:
linear-gradient
(
pink
,
purple
);
box-shadow
:
0px
0px
1px
1px
pink
;
grid-row-start
:
0
;
grid-column-start
:
0
;
grid-row-end
:
0
;
grid-column-end
:
0
;
}
.grid-left-bottom
{
width
:
20px
;
height
:
20px
;
border-radius
:
5px
;
border
:
1px
solid
plum
;
background
:
linear-gradient
(
pink
,
#00aaee
);
box-shadow
:
0px
0px
1px
1px
pink
;
grid-row-start
:
1
;
grid-column-start
:
0
;
grid-row-end
:
1
;
grid-column-end
:
0
;
}
.grid-right-top
{
width
:
20px
;
height
:
20px
;
border-radius
:
3px
;
border
:
1px
dotted
plum
;
background
:
linear-gradient
(
mediumpurple
,
#00aaee
);
box-shadow
:
0px
0px
1px
1px
pink
;
grid-row-start
:
0
;
grid-column-start
:
1
;
grid-row-end
:
0
;
grid-column-end
:
1
;
}
.grid-right-bottom
{
width
:
20px
;
height
:
20px
;
border-radius
:
5px
;
border
:
1px
dotted
plum
;
background
:
linear-gradient
(
pink
,
mediumpurple
);
box-shadow
:
0px
0px
2px
2px
pink
;
grid-row-start
:
1
;
grid-column-start
:
1
;
grid-row-end
:
1
;
grid-column-end
:
1
;
}
.event-container
{
flex-direction
:
column
;
height
:
30%
;
}
.event1
{
width
:
60%
;
flex-weight
:
1
;
}
.event2
{
width
:
70%
;
flex-weight
:
1
;
}
.event3
{
width
:
80%
;
flex-weight
:
1
;
}
.function-container
{
flex-direction
:
column
;
}
.function
{
height
:
30px
;
width
:
100%
;
}
ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/index.hml
0 → 100644
浏览文件 @
5bd1ab66
<!--/**
* 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.
*/-->
<div class="container">
<div class="sub-container">
<div class="prop-container">
<text class="title">
对象的属性
</text>
<text class="sub-title">
属性1
</text>
<canvas ref="canvas1" style="width: 100%; height: 30px;margin-top: 5px; ">
</canvas>
<text class="sub-title">
属性2
</text>
<canvas ref="canvas2" style="width: 100%; height: 30px;margin-top: 5px; ">
</canvas>
<text class="sub-title">
属性3
</text>
<canvas ref="canvas3" style="width: 100%; height: 20px;margin-top: 5px;">
</canvas>
<text class="sub-title">
属性4
</text>
<canvas ref="canvas4" style="width: 100%; height: 50px;margin-top: 5px;">
</canvas>
<text class="sub-title">
属性5
</text>
<canvas ref="canvas5" style="width: 100%; height: 40px;margin-top: 5px;">
</canvas>
<text class="sub-title">
属性6
</text>
<canvas ref="canvas6" style="width: 100%; height: 30px;margin-top: 5px;">
</canvas>
<text class="sub-title">
属性7
</text>
<canvas ref="canvas7" style="width: 100%; height: 80px;margin-top: 5px;">
</canvas>
<text class="sub-title">
属性8
</text>
<canvas ref="canvas8" style="width: 100%; height: 80px; background-color: #ffff00;margin-top: 5px;">
</canvas>
<text class="sub-title">
属性9
</text>
<canvas ref="canvas9" style="width: 100%; height: 70px;margin-top: 5px;">
</canvas>
</div>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="true">
</divider>
<div class="sub-container">
<div class="prop-container">
<text class="sub-title">
属性10
</text>
<canvas ref="canvas10" style="width: 100%; height: 90px;margin-top: 5px;">
</canvas>
<text class="sub-title">
属性11
</text>
<canvas ref="canvas11" style="width: 100%; height: 80px;margin-top: 5px;">
</canvas>
<text class="sub-title">
属性12
</text>
<canvas ref="canvas12" style="width: 100%; height: 150px;margin-top: 5px;">
</canvas>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<text class="title">
对象的方法
</text>
<text class="sub-title">
方法1
</text>
<canvas style="width: 100%; height: 40px;margin-top: 5px;" ref="function1">
</canvas>
<text class="sub-title">
方法2
</text>
<canvas style="width: 100%; height: 30px;margin-top: 5px;" ref="function2">
</canvas>
<text class="sub-title">
方法3
</text>
<canvas style="width: 100%; height: 40px;margin-top: 5px;" ref="function3">
</canvas>
<text class="sub-title">
方法4
</text>
<canvas style="width: 100%; height: 70px;margin-top: 5px;" ref="function4"></canvas>
<text class="sub-title">
方法5
</text>
<canvas style="width: 100%; height: 50px;margin-top: 5px;" ref="function5"></canvas>
</div>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="true">
</divider>
<div class="sub-container">
<div class="function-container">
<text class="sub-title">
方法6
</text>
<canvas style="width: 100%; height: 40px;margin-top: 5px;" ref="function6"></canvas>
<text class="sub-title">
方法7
</text>
<canvas style="width: 100%; height: 40px;margin-top: 5px;" ref="function7"></canvas>
<text class="sub-title">
方法8
</text>
<canvas style="width: 100%; height: 50px;margin-top: 5px;" ref="function8"></canvas>
<text class="sub-title">
方法9
</text>
<canvas style="width: 100%; height: 100px;background-color: #ffff00;margin-top: 5px;" ref="function9"></canvas>
<text class="sub-title">
方法10
</text>
<canvas style="width: 100%; height: 60px;margin-top: 5px;" ref="function10"></canvas>
<text class="sub-title">
方法11
</text>
<canvas style="width: 100%; height: 70px;margin-top: 5px;" ref="function11"></canvas>
<text class="sub-title">
方法12
</text>
<canvas style="width: 100%; height: 50px;margin-top: 5px;" ref="function12"></canvas>
<text class="sub-title">
方法13
</text>
<canvas style="width: 100%; height: 50px;background-color: #ffff00;margin-top: 5px;" ref="function13"></canvas>
<text class="sub-title">
方法14
</text>
<canvas style="width: 100%; height: 50px;background-color: #ffff00;margin-top: 5px;" ref="function14"></canvas>
<text class="sub-title">
方法15
</text>
<canvas style="width: 100%; height: 50px;background-color: #ffff00;margin-top: 5px;" ref="function15"></canvas>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/index.js
0 → 100644
浏览文件 @
5bd1ab66
/**
* 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.
*/
import
prompt
from
'
@system.prompt
'
;
export
default
{
data
:{
left
:
0
,
top
:
0
,
textValue
:
0
,
textValue2
:
0
},
onShow
(){
// 屬性
this
.
props1
()
this
.
props2
()
this
.
props3
()
this
.
props4
()
this
.
props5
()
this
.
props6
()
this
.
props7
()
this
.
props8
()
this
.
props9
()
this
.
props10
()
this
.
props11
()
this
.
props12
()
// 方法
this
.
functionTouch1
()
this
.
functionTouch2
()
this
.
functionTouch3
()
this
.
functionTouch4
()
this
.
functionTouch5
()
this
.
functionTouch6
()
this
.
functionTouch7
()
this
.
functionTouch8
()
this
.
functionTouch9
()
this
.
functionTouch10
()
this
.
functionTouch11
()
this
.
functionTouch12
()
this
.
functionTouch13
()
this
.
functionTouch14
()
this
.
functionTouch15
()
},
props1
()
{
const
el
=
this
.
$refs
.
canvas1
;
const
ctx
=
el
.
getContext
(
'
2d
'
);
ctx
.
fillStyle
=
'
#0000ff
'
;
ctx
.
fillRect
(
0
,
0
,
100
,
30
);
},
props2
()
{
const
el
=
this
.
$refs
.
canvas2
;
const
ctx
=
el
.
getContext
(
'
2d
'
);
ctx
.
lineWidth
=
10
;
ctx
.
strokeStyle
=
'
#0000ff
'
;
ctx
.
lineCap
=
'
round
'
;
ctx
.
strokeRect
(
0
,
0
,
100
,
30
);
},
props3
()
{
const
el
=
this
.
$refs
.
canvas3
;
const
ctx
=
el
.
getContext
(
'
2d
'
);
ctx
.
lineWidth
=
8
;
ctx
.
beginPath
();
ctx
.
lineCap
=
'
round
'
;
ctx
.
moveTo
(
10
,
10
);
ctx
.
lineTo
(
100
,
10
);
ctx
.
stroke
();
},
props4
()
{
const
el
=
this
.
$refs
.
canvas4
;
const
ctx
=
el
.
getContext
(
'
2d
'
);
ctx
.
beginPath
();
ctx
.
lineWidth
=
5
;
ctx
.
lineJoin
=
'
miter
'
;
ctx
.
moveTo
(
10
,
10
);
ctx
.
lineTo
(
80
,
30
);
ctx
.
lineTo
(
10
,
50
);
ctx
.
stroke
();
},
props5
()
{
const
el
=
this
.
$refs
.
canvas5
;
const
ctx
=
el
.
getContext
(
'
2d
'
);
ctx
.
lineWidth
=
5
;
ctx
.
lineJoin
=
'
miter
'
;
ctx
.
miterLimit
=
3
;
ctx
.
moveTo
(
10
,
10
);
ctx
.
lineTo
(
60
,
15
);
ctx
.
lineTo
(
10
,
40
);
ctx
.
stroke
();
},
props6
()
{
const
el
=
this
.
$refs
.
canvas6
;
const
ctx
=
el
.
getContext
(
'
2d
'
);
ctx
.
font
=
'
20px sans-serif
'
;
ctx
.
fillText
(
"
Hello World
"
,
10
,
20
);
},
props7
()
{
const
el
=
this
.
$refs
.
canvas7
;
const
ctx
=
el
.
getContext
(
'
2d
'
);
ctx
.
fillStyle
=
'
rgb(255,0,0)
'
;
ctx
.
fillRect
(
0
,
0
,
40
,
40
);
ctx
.
globalAlpha
=
0.4
;
ctx
.
fillStyle
=
'
rgb(0,0,255)
'
;
ctx
.
fillRect
(
40
,
40
,
40
,
40
);
},
props8
()
{
const
el
=
this
.
$refs
.
canvas8
;
const
ctx
=
el
.
getContext
(
'
2d
'
);
ctx
.
arc
(
50
,
40
,
30
,
0
,
6.28
);
ctx
.
setLineDash
([
10
,
20
]);
ctx
.
lineDashOffset
=
10.0
;
ctx
.
stroke
();
},
props9
()
{
const
el
=
this
.
$refs
.
canvas9
;
const
ctx
=
el
.
getContext
(
'
2d
'
);
ctx
.
fillStyle
=
'
rgb(255,0,0)
'
;
ctx
.
fillRect
(
10
,
10
,
30
,
30
);
ctx
.
globalCompositeOperation
=
'
source-over
'
;
ctx
.
fillStyle
=
'
rgb(0,0,255)
'
;
ctx
.
fillRect
(
25
,
25
,
30
,
30
);
// Start drawing second example
ctx
.
fillStyle
=
'
rgb(255,0,0)
'
;
ctx
.
fillRect
(
70
,
10
,
30
,
30
);
ctx
.
globalCompositeOperation
=
'
destination-over
'
;
ctx
.
fillStyle
=
'
rgb(0,0,255)
'
;
ctx
.
fillRect
(
85
,
25
,
30
,
30
);
},
props10
()
{
const
el
=
this
.
$refs
.
canvas10
;
const
ctx
=
el
.
getContext
(
'
2d
'
);
ctx
.
shadowBlur
=
30
;
ctx
.
shadowColor
=
'
rgb(0,0,0)
'
;
ctx
.
fillStyle
=
'
rgb(255,0,0)
'
;
ctx
.
fillRect
(
20
,
20
,
70
,
50
);
},
props11
()
{
const
el
=
this
.
$refs
.
canvas11
;
const
ctx
=
el
.
getContext
(
'
2d
'
);
ctx
.
shadowBlur
=
10
;
ctx
.
shadowOffsetX
=
20
;
ctx
.
shadowOffsetY
=
20
;
ctx
.
shadowColor
=
'
rgb(0,0,0)
'
;
ctx
.
fillStyle
=
'
rgb(255,0,0)
'
;
ctx
.
fillRect
(
10
,
0
,
70
,
50
);
},
props12
()
{
var
ctx
=
this
.
$refs
.
canvas12
.
getContext
(
'
2d
'
);
var
offscreen
=
new
OffscreenCanvas
(
100
,
300
);
var
offCanvas2
=
offscreen
.
getContext
(
"
2d
"
);
var
img
=
new
Image
();
img
.
src
=
'
common/images/image.png
'
;
offCanvas2
.
drawImage
(
img
,
0
,
0
,
33
,
33
);
offCanvas2
.
filter
=
'
blur(5px)
'
;
offCanvas2
.
drawImage
(
img
,
33
,
0
,
33
,
33
);
offCanvas2
.
filter
=
'
grayscale(50%)
'
;
offCanvas2
.
drawImage
(
img
,
66
,
0
,
33
,
33
);
offCanvas2
.
filter
=
'
hue-rotate(90deg)
'
;
offCanvas2
.
drawImage
(
img
,
0
,
33
,
33
,
33
);
offCanvas2
.
filter
=
'
invert(100%)
'
;
offCanvas2
.
drawImage
(
img
,
33
,
33
,
33
,
33
);
offCanvas2
.
filter
=
'
drop-shadow(8px 8px 10px green)
'
;
offCanvas2
.
drawImage
(
img
,
66
,
33
,
33
,
33
);
offCanvas2
.
filter
=
'
brightness(0.4)
'
;
offCanvas2
.
drawImage
(
img
,
0
,
66
,
33
,
33
);
offCanvas2
.
filter
=
'
opacity(25%)
'
;
offCanvas2
.
drawImage
(
img
,
33
,
66
,
33
,
33
);
offCanvas2
.
filter
=
'
saturate(30%)
'
;
offCanvas2
.
drawImage
(
img
,
66
,
66
,
33
,
33
);
offCanvas2
.
filter
=
'
sepia(60%)
'
;
offCanvas2
.
drawImage
(
img
,
0
,
99
,
33
,
33
);
offCanvas2
.
filter
=
'
contrast(200%)
'
;
offCanvas2
.
drawImage
(
img
,
33
,
99
,
33
,
33
);
var
bitmap
=
offscreen
.
transferToImageBitmap
();
ctx
.
transferFromImageBitmap
(
bitmap
);
},
functionTouch1
()
{
const
el
=
this
.
$refs
.
function1
;
const
ctx
=
el
.
getContext
(
'
2d
'
);
ctx
.
fillStyle
=
'
rgb(0,0,255)
'
;
ctx
.
fillRect
(
0
,
0
,
100
,
40
);
ctx
.
clearRect
(
20
,
10
,
60
,
20
);
},
functionTouch2
()
{
const
el
=
this
.
$refs
.
function2
;
const
ctx
=
el
.
getContext
(
'
2d
'
);
ctx
.
font
=
'
18px sans-serif
'
;
ctx
.
strokeText
(
"
Hello World!
"
,
0
,
20
);
},
functionTouch3
()
{
const
el
=
this
.
$refs
.
function3
;
const
ctx
=
el
.
getContext
(
'
2d
'
);
ctx
.
font
=
'
14px sans-serif
'
;
var
txt
=
'
Hello World
'
;
ctx
.
fillText
(
"
width:
"
+
ctx
.
measureText
(
txt
).
width
,
0
,
10
);
ctx
.
fillText
(
txt
,
0
,
25
);
},
functionTouch4
()
{
const
el
=
this
.
$refs
.
function4
;
const
ctx
=
el
.
getContext
(
'
2d
'
);
ctx
.
beginPath
();
ctx
.
moveTo
(
5
,
5
);
ctx
.
lineTo
(
70
,
5
);
ctx
.
lineTo
(
40
,
60
);
ctx
.
closePath
();
ctx
.
stroke
();
},
functionTouch5
()
{
const
el
=
this
.
$refs
.
function5
;
const
ctx
=
el
.
getContext
(
'
2d
'
);
var
img
=
new
Image
();
img
.
src
=
'
common/images/sun.png
'
;
var
pat
=
ctx
.
createPattern
(
img
,
'
repeat
'
);
ctx
.
fillStyle
=
pat
;
ctx
.
fillRect
(
20
,
0
,
60
,
50
);
},
functionTouch6
()
{
const
el
=
this
.
$refs
.
function6
;
const
ctx
=
el
.
getContext
(
'
2d
'
);
ctx
.
beginPath
();
ctx
.
moveTo
(
10
,
10
);
ctx
.
bezierCurveTo
(
20
,
40
,
80
,
40
,
100
,
10
);
ctx
.
stroke
();
},
functionTouch7
()
{
const
el
=
this
.
$refs
.
function7
;
const
ctx
=
el
.
getContext
(
'
2d
'
);
ctx
.
beginPath
();
ctx
.
moveTo
(
10
,
10
);
ctx
.
quadraticCurveTo
(
50
,
50
,
100
,
10
);
ctx
.
stroke
();
},
functionTouch8
()
{
const
el
=
this
.
$refs
.
function8
;
const
ctx
=
el
.
getContext
(
'
2d
'
);
ctx
.
moveTo
(
30
,
20
);
ctx
.
arcTo
(
70
,
10
,
70
,
20
,
30
);
// Create an arc
ctx
.
stroke
();
},
functionTouch9
()
{
const
el
=
this
.
$refs
.
function9
;
const
ctx
=
el
.
getContext
(
'
2d
'
);
ctx
.
beginPath
();
ctx
.
ellipse
(
50
,
50
,
30
,
60
,
Math
.
PI
*
0.25
,
Math
.
PI
*
0.5
,
Math
.
PI
,
1
);
ctx
.
stroke
();
},
functionTouch10
()
{
const
el
=
this
.
$refs
.
function10
;
const
ctx
=
el
.
getContext
(
'
2d
'
);
ctx
.
rect
(
10
,
0
,
60
,
60
);
// Create a 100*100 rectangle at (20, 20)
ctx
.
fill
();
// Draw it in default setting
},
functionTouch11
()
{
const
el
=
this
.
$refs
.
function11
;
const
ctx
=
el
.
getContext
(
'
2d
'
);
ctx
.
rect
(
10
,
0
,
50
,
50
);
ctx
.
stroke
();
ctx
.
clip
();
// Draw red rectangle after clip
ctx
.
fillStyle
=
"
rgb(255,0,0)
"
;
ctx
.
fillRect
(
0
,
0
,
40
,
40
);
},
functionTouch12
()
{
const
el
=
this
.
$refs
.
function12
;
const
ctx
=
el
.
getContext
(
'
2d
'
);
ctx
.
rotate
(
45
*
Math
.
PI
/
180
);
// Rotate the rectangle 45 degrees
ctx
.
fillRect
(
20
,
0
,
20
,
20
);
},
functionTouch13
()
{
var
canvas
=
this
.
$refs
.
function13
.
getContext
(
'
2d
'
);
var
offscreen
=
new
OffscreenCanvas
(
100
,
40
);
var
offscreenCanvasCtx
=
offscreen
.
getContext
(
"
2d
"
);
offscreenCanvasCtx
.
rect
(
10
,
10
,
40
,
40
);
offscreenCanvasCtx
.
fill
();
this
.
textValue
=
offscreenCanvasCtx
.
isPointInPath
(
30
,
20
);
var
bitmap
=
offscreen
.
transferToImageBitmap
();
canvas
.
transferFromImageBitmap
(
bitmap
);
prompt
.
showToast
({
message
:
'
function success: textValue=
'
+
this
.
textValue
});
},
functionTouch14
()
{
var
canvas
=
this
.
$refs
.
function14
.
getContext
(
'
2d
'
);
var
offscreen
=
new
OffscreenCanvas
(
100
,
40
);
var
offscreenCanvasCtx
=
offscreen
.
getContext
(
"
2d
"
);
offscreenCanvasCtx
.
rect
(
10
,
10
,
30
,
30
);
offscreenCanvasCtx
.
stroke
();
this
.
textValue2
=
offscreenCanvasCtx
.
isPointInStroke
(
20
,
10
);
var
bitmap
=
offscreen
.
transferToImageBitmap
();
canvas
.
transferFromImageBitmap
(
bitmap
);
prompt
.
showToast
({
message
:
'
function success: textValue2=
'
+
this
.
textValue2
});
},
functionTouch15
()
{
var
canvas
=
this
.
$refs
.
function15
.
getContext
(
'
2d
'
);
var
offscreen
=
new
OffscreenCanvas
(
100
,
50
);
var
offscreenCanvasCtx
=
offscreen
.
getContext
(
"
2d
"
);
offscreenCanvasCtx
.
transform
(
1
,
0
,
1.7
,
1
,
0
,
0
);
offscreenCanvasCtx
.
fillStyle
=
'
gray
'
;
offscreenCanvasCtx
.
fillRect
(
15
,
10
,
20
,
10
);
offscreenCanvasCtx
.
fillRect
(
15
,
30
,
20
,
10
);
// Non-skewed rectangles
offscreenCanvasCtx
.
resetTransform
();
offscreenCanvasCtx
.
fillStyle
=
'
red
'
;
offscreenCanvasCtx
.
fillRect
(
10
,
10
,
20
,
10
);
offscreenCanvasCtx
.
fillRect
(
10
,
30
,
20
,
10
);
var
bitmap
=
offscreen
.
transferToImageBitmap
();
canvas
.
transferFromImageBitmap
(
bitmap
);
}
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/obj_Path2D/index.css
0 → 100644
浏览文件 @
5bd1ab66
/**
* 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
;
}
.prop_all-container
{
flex-direction
:
row
;
height
:
100%
;
flex-weight
:
1
;
}
.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
;
}
.prop1
{
color
:
#ad4e2a
;
height
:
30px
;
background-color
:
mediumslateblue
;
width
:
100%
;
margin
:
5px
;
}
.prop2
{
color
:
#343524
;
height
:
30px
;
background-color
:
pink
;
width
:
100%
;
margin
:
5px
;
}
.prop3
{
color
:
#456345
;
height
:
30px
;
background-color
:
darkseagreen
;
width
:
100%
;
margin
:
5px
;
}
.prop5
{
color
:
#831834
;
stroke-width
:
40px
;
line-cap
:
square
;
margin
:
5px
;
height
:
70px
;
}
.ani-container
{
flex-direction
:
column
;
height
:
100%
;
flex-weight
:
1
;
}
.ani1
{
color
:
#72ac33
;
stroke-width
:
55px
;
line-cap
:
square
;
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
)
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
)
}
}
.ani2
{
color
:
#ad4e2a
;
width
:
55px
;
height
:
55px
;
margin
:
5px
;
transform-origin
:
2%
3%
;
animation-name
:
ani2Go
;
animation-delay
:
5s
;
animation-duration
:
10s
;
animation-iteration-count
:
4
;
animation-timing-function
:
ease-out
;
animation-direction
:
reverse
;
animation-fill-mode
:
forwards
;
animation-play-state
:
running
;
transition
:
all
0
ease
0
;
}
@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
);
}
}
.gradient-container
{
flex-direction
:
column
;
}
.gradient1
{
width
:
100%
;
height
:
20px
;
margin
:
5px
;
background
:
linear-gradient
(
red
,
#00ff00
);
}
.gradient2
{
width
:
100%
;
height
:
20px
;
margin
:
5px
;
background
:
linear-gradient
(
45deg
,
rgb
(
255
,
0
,
0
),
rgb
(
0
,
255
,
0
));
}
.gradient3
{
width
:
100%
;
height
:
20px
;
margin
:
5px
;
background
:
linear-gradient
(
to
right
,
rgb
(
255
,
0
,
0
)
90px
,
rgb
(
0
,
255
,
0
)
60%
);
}
.gradient4
{
width
:
100%
;
height
:
20px
;
margin
:
5px
;
background
:
repeating-linear-gradient
(
to
right
,
rgba
(
255
,
255
,
0
,
1
)
30px
,
rgba
(
0
,
0
,
255
,
.5
)
60px
);
}
.accessibility-container
{
flex-direction
:
column
;
}
.accessibility1
{
width
:
100%
;
height
:
30px
;
}
.atom-container
{
flex-direction
:
column
;
}
.multiMode-container
{
flex-direction
:
column
;
}
.multiMode1
{
background-color
:
#978666
;
width
:
100%
;
height
:
30px
;
margin
:
5px
;
}
.flex-box
{
justify-content
:
space-around
;
align-items
:
center
;
height
:
50px
;
background-color
:
#ffffff
;
}
.flex-item
{
width
:
20px
;
height
:
20px
;
border-radius
:
16px
;
}
.color-primary
{
background-color
:
mediumpurple
;
}
.color-warning
{
background-color
:
pink
;
}
.color-success
{
background-color
:
cornflowerblue
;
}
.dragContent
{
width
:
60px
;
height
:
60px
;
background-color
:
red
;
}
.flex-box2
{
justify-content
:
space-around
;
align-items
:
center
;
flex-wrap
:
wrap
;
height
:
100px
;
background-color
:
#ffffff
;
}
.common
{
background-color
:
#ffffff
;
align-items
:
center
;
justify-content
:
center
;
}
.grid-parent
{
display
:
grid
;
grid-template-columns
:
20%
20%
;
grid-columns-gap
:
14px
;
grid-rows-gap
:
4px
;
grid-template-rows
:
15%
15%
;
}
.grid-child
{
width
:
100%
;
/* height: 100%;*/
border-radius
:
2px
;
}
.grid-left-top
{
width
:
20px
;
height
:
20px
;
border-radius
:
10px
;
border
:
1px
solid
plum
;
background
:
linear-gradient
(
pink
,
purple
);
box-shadow
:
0px
0px
1px
1px
pink
;
grid-row-start
:
0
;
grid-column-start
:
0
;
grid-row-end
:
0
;
grid-column-end
:
0
;
}
.grid-left-bottom
{
width
:
20px
;
height
:
20px
;
border-radius
:
5px
;
border
:
1px
solid
plum
;
background
:
linear-gradient
(
pink
,
#00aaee
);
box-shadow
:
0px
0px
1px
1px
pink
;
grid-row-start
:
1
;
grid-column-start
:
0
;
grid-row-end
:
1
;
grid-column-end
:
0
;
}
.grid-right-top
{
width
:
20px
;
height
:
20px
;
border-radius
:
3px
;
border
:
1px
dotted
plum
;
background
:
linear-gradient
(
mediumpurple
,
#00aaee
);
box-shadow
:
0px
0px
1px
1px
pink
;
grid-row-start
:
0
;
grid-column-start
:
1
;
grid-row-end
:
0
;
grid-column-end
:
1
;
}
.grid-right-bottom
{
width
:
20px
;
height
:
20px
;
border-radius
:
5px
;
border
:
1px
dotted
plum
;
background
:
linear-gradient
(
pink
,
mediumpurple
);
box-shadow
:
0px
0px
2px
2px
pink
;
grid-row-start
:
1
;
grid-column-start
:
1
;
grid-row-end
:
1
;
grid-column-end
:
1
;
}
.event-container
{
flex-direction
:
column
;
height
:
30%
;
}
.event1
{
width
:
60%
;
flex-weight
:
1
;
}
.event2
{
width
:
70%
;
flex-weight
:
1
;
}
.event3
{
width
:
80%
;
flex-weight
:
1
;
}
.function-container
{
flex-direction
:
column
;
}
.function
{
height
:
30px
;
width
:
100%
;
}
ace/ace_standard/src/main/js/default/pages/obj_Path2D/index.hml
0 → 100644
浏览文件 @
5bd1ab66
<!--/**
* 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.
*/-->
<div class="container">
<div class="sub-container">
<div class="prop-container">
<text class="title">
Path2D对象的方法
</text>
<text class="sub-title">
方法1
</text>
<canvas style="width: 100%; height: 110px;background-color: #ffff00;" ref="function1">
</canvas>
<text class="sub-title">
方法2
</text>
<canvas style="width: 100%; height: 80px;background-color: #ffff00;" ref="function2">
</canvas>
<text class="sub-title">
方法3
</text>
<canvas style="width: 100%; height: 100px;background-color: #ffff00;" ref="function3">
</canvas>
<text class="sub-title">
方法4
</text>
<canvas style="width: 100%; height: 60px;background-color: #ffff00;" ref="function4"></canvas>
<text class="sub-title">
方法5
</text>
<canvas style="width: 100%; height: 60px;background-color: #ffff00;" ref="function5"></canvas>
</div>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="true">
</divider>
<div class="sub-container">
<div class="function-container">
<text class="sub-title">
方法6
</text>
<canvas style="width: 100%; height: 100px;background-color: #ffff00;" ref="function6"></canvas>
<text class="sub-title">
方法7
</text>
<canvas style="width: 100%; height: 60px;background-color: #ffff00;" ref="function7"></canvas>
<text class="sub-title">
方法8
</text>
<canvas style="width: 100%; height: 110px;background-color: #ffff00;" ref="function8"></canvas>
<text class="sub-title">
方法9
</text>
<canvas style="width: 100%; height: 110px;background-color: #ffff00;" ref="function9"></canvas>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/obj_Path2D/index.js
0 → 100644
浏览文件 @
5bd1ab66
/**
* 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.
*/
import
prompt
from
'
@system.prompt
'
;
export
default
{
data
:{
left
:
0
,
top
:
0
,
},
onShow
(){
// 方法
this
.
functionTouch1
()
this
.
functionTouch2
()
this
.
functionTouch3
()
this
.
functionTouch4
()
this
.
functionTouch5
()
this
.
functionTouch6
()
this
.
functionTouch7
()
this
.
functionTouch8
()
this
.
functionTouch9
()
},
functionTouch1
()
{
const
el
=
this
.
$refs
.
function1
;
const
ctx
=
el
.
getContext
(
'
2d
'
);
var
path1
=
ctx
.
createPath2D
(
"
M80 20 L40 100 L120 100 Z
"
);
var
path2
=
ctx
.
createPath2D
();
path2
.
addPath
(
path1
);
ctx
.
stroke
(
path2
);
},
functionTouch2
()
{
const
el
=
this
.
$refs
.
function2
;
const
ctx
=
el
.
getContext
(
'
2d
'
);
var
path
=
ctx
.
createPath2D
(
"
M80 20 L40 100 L120 100 Z
"
);
path
.
setTransform
(
0.8
,
0
,
0
,
0.4
,
0
,
0
);
ctx
.
stroke
(
path
);
},
functionTouch3
()
{
const
el
=
this
.
$refs
.
function3
;
const
ctx
=
el
.
getContext
(
'
2d
'
);
var
path
=
ctx
.
createPath2D
();
path
.
moveTo
(
80
,
40
);
path
.
lineTo
(
120
,
40
);
path
.
lineTo
(
80
,
80
);
path
.
closePath
();
ctx
.
stroke
(
path
);
},
functionTouch4
()
{
const
el
=
this
.
$refs
.
function4
;
const
ctx
=
el
.
getContext
(
'
2d
'
);
var
path
=
ctx
.
createPath2D
();
path
.
moveTo
(
10
,
10
);
path
.
bezierCurveTo
(
10
,
50
,
100
,
50
,
100
,
10
);
ctx
.
stroke
(
path
);
},
functionTouch5
()
{
const
el
=
this
.
$refs
.
function5
;
const
ctx
=
el
.
getContext
(
'
2d
'
);
var
path
=
ctx
.
createPath2D
();
path
.
moveTo
(
10
,
10
);
path
.
quadraticCurveTo
(
50
,
50
,
100
,
10
);
ctx
.
stroke
(
path
);
},
functionTouch6
()
{
const
el
=
this
.
$refs
.
function6
;
const
ctx
=
el
.
getContext
(
'
2d
'
);
var
path
=
ctx
.
createPath2D
();
path
.
arc
(
80
,
50
,
40
,
0
,
6.28
);
ctx
.
stroke
(
path
);
},
functionTouch7
()
{
const
el
=
this
.
$refs
.
function7
;
const
ctx
=
el
.
getContext
(
'
2d
'
);
var
path
=
ctx
.
createPath2D
();
path
.
arcTo
(
75
,
10
,
75
,
35
,
25
);
ctx
.
stroke
(
path
);
},
functionTouch8
()
{
const
el
=
this
.
$refs
.
function8
;
const
ctx
=
el
.
getContext
(
'
2d
'
);
var
path
=
ctx
.
createPath2D
();
path
.
ellipse
(
50
,
50
,
25
,
50
,
Math
.
PI
*
0.25
,
Math
.
PI
*
0.5
,
Math
.
PI
,
1
);
ctx
.
stroke
(
path
);
},
functionTouch9
()
{
const
el
=
this
.
$refs
.
function9
;
const
ctx
=
el
.
getContext
(
'
2d
'
);
var
path
=
ctx
.
createPath2D
();
path
.
rect
(
20
,
20
,
100
,
100
);
ctx
.
stroke
(
path
);
},
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/path/index.css
0 → 100644
浏览文件 @
5bd1ab66
/**
* 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
;
}
.prop-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
;
}
.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
{
color
:
#72ac33
;
stroke-width
:
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
)
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
)
}
}
.ani2
{
color
:
#ad4e2a
;
stroke-width
:
55px
;
margin
:
5px
;
transform-origin
:
2%
3%
;
animation-name
:
ani2Go
;
animation-delay
:
5s
;
animation-duration
:
10s
;
animation-iteration-count
:
4
;
animation-timing-function
:
ease-out
;
animation-direction
:
reverse
;
animation-fill-mode
:
forwards
;
animation-play-state
:
running
;
transition
:
all
0
ease
0
;
}
@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
);
}
}
.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/index.hml
0 → 100644
浏览文件 @
5bd1ab66
<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/index.js
0 → 100644
浏览文件 @
5bd1ab66
/**
* 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
:
{
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/polygon/index.css
0 → 100644
浏览文件 @
5bd1ab66
/**
* Copyright (c) 2022 Shenzhen Kaihong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
/* xxx.css */
.container
{
flex-direction
:
row
;
width
:
100%
;
height
:
100%
;
padding
:
1px
;
}
.sub-container
{
flex-direction
:
column
;
height
:
100%
;
flex-weight
:
1
;
}
.style-container
{
flex-direction
:
column
;
height
:
100%
;
flex-weight
:
1
;
}
.title
{
width
:
100%
;
font-size
:
18px
;
margin
:
2px
;
padding
:
2px
;
font-weight
:
bold
;
text-align
:
center
;
}
.sub-title
{
width
:
100%
;
font-size
:
14px
;
text-align
:
left
;
margin
:
2px
;
padding
:
2px
;
}
.style1
{
min-width
:
25px
;
min-height
:
10px
;
max-width
:
300px
;
max-height
:
100px
;
padding-left
:
10px
;
padding-top
:
20px
;
padding-right
:
15px
;
padding-bottom
:
5px
;
margin-left
:
10px
;
margin-top
:
20px
;
margin-right
:
15px
;
margin-bottom
:
5px
;
border-left-style
:
solid
;
border-right-style
:
dashed
;
border-top-style
:
dashed
;
border-bottom-style
:
dotted
;
border-left-width
:
1px
;
border-right-width
:
2px
;
border-top-width
:
2px
;
border-bottom-width
:
1px
;
border-left-color
:
#ff0000
;
border-right-color
:
#00ff00
;
border-top-color
:
#0000ff
;
border-bottom-color
:
#fff000
;
border-bottom-left-radius
:
10px
;
border-bottom-right-radius
:
15px
;
border-top-left-radius
:
8px
;
border-top-right-radius
:
12px
;
background
:
linear-gradient
(
pink
,
#fff000
);
box-shadow
:
2px
4px
6px
8px
#888888
;
opacity
:
0.5
;
display
:
flex
;
visibility
:
visible
;
align-self
:
center
;
image-fill
:
#000fff
;
clip-path
:
margin-box
;
}
.style2
{
padding-start
:
10px
;
padding-end
:
15px
;
margin-start
:
5px
;
margin-end
:
10px
;
border-style
:
dotted
;
border-width
:
2px
;
border-color
:
#000000
;
border-radius
:
5px
;
background-color
:
#ffaa00
;
mask-image
:
url('common/images/icon.png')
;
mask-size
:
cover
;
mask-position
:
center
;
}
.style3
{
padding
:
10px
;
margin
:
5px
;
border-left
:
1px
solid
#000000
;
border-right
:
2px
dashed
#00ff00
;
border-top
:
1.5px
dotted
#0000ff
;
border-bottom
:
2.5px
dotted
#fff000
;
background-image
:
url('common/images/image.png')
;
background-size
:
cover
;
background-repeat
:
repeat-x
;
background-position
:
center
;
flex
:
1
;
flex-grow
:
2
;
flex-basis
:
10px
;
flex-shrink
:
1
;
}
.style4
{
padding
:
10px
;
margin
:
5px
;
border
:
2px
solid
#000000
;
}
.contain1
{
width
:
100%
;
height
:
70px
;
flex-direction
:
column
;
}
.style5
{
background-color
:
yellow
;
border-image-source
:
url('/common/images/image.png')
;
border-image-slice
:
1px
2px
3px
4px
;
border-image-width
:
2px
3px
4px
5px
;
border-image-outset
:
3px
4px
5px
6px
;
border-image-repeat
:
repeat
;
}
.style6
{
/* width: 70px;*/
/* height: 30px;*/
position
:
absolute
;
left
:
10px
;
top
:
80px
;
bottom
:
5px
;
right
:
10px
;
background-color
:
pink
;
border-image
:
url('common/images/icon.png')
1px
2px
3px
4px
2px
3px
4px
5px
3px
4px
5px
6px
round
;
}
.style7
{
margin-bottom
:
50px
;
margin-top
:
10px
;
color
:
green
;
stroke-width
:
30px
;
}
.prop-container
{
flex-direction
:
column
;
height
:
100%
;
flex-weight
:
2
;
}
#prop1
{
background-color
:
mediumslateblue
;
width
:
100%
;
margin
:
3px
5px
;
}
.prop2
{
background-color
:
pink
;
width
:
100%
;
margin
:
3px
5px
;
}
.prop3
{
background-color
:
darkseagreen
;
width
:
100%
;
margin
:
3px
5px
;
}
.prop4
{
background-color
:
yellowgreen
;
width
:
100%
;
margin
:
3px
5px
;
}
.prop5
{
background-color
:
cornflowerblue
;
width
:
100%
;
margin
:
3px
5px
;
}
.prop6
{
background-color
:
burlywood
;
width
:
100%
;
margin
:
3px
5px
;
}
.ani-container
{
flex-direction
:
column
;
height
:
100%
;
flex-weight
:
0.5
;
}
.ani1
{
color
:
#72ac33
;
stroke-width
:
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
)
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
)
}
}
.ani2
{
color
:
#ad4e2a
;
stroke-width
:
55px
;
margin
:
5px
;
transform-origin
:
2%
3%
;
animation-name
:
ani2Go
;
animation-delay
:
5s
;
animation-duration
:
10s
;
animation-iteration-count
:
4
;
animation-timing-function
:
ease-out
;
animation-direction
:
reverse
;
animation-fill-mode
:
forwards
;
animation-play-state
:
running
;
transition
:
all
0
ease
0
;
}
@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
);
}
}
.gradient-container
{
flex-direction
:
column
;
}
.gradient1
{
stroke-width
:
30px
;
margin
:
5px
;
background
:
linear-gradient
(
red
,
#00ff00
);
}
.gradient2
{
stroke-width
:
30px
;
margin
:
5px
;
background
:
linear-gradient
(
45deg
,
rgb
(
255
,
0
,
0
),
rgb
(
0
,
255
,
0
));
}
.gradient3
{
stroke-width
:
30px
;
margin
:
5px
;
background
:
linear-gradient
(
to
right
,
rgb
(
255
,
0
,
0
)
90px
,
rgb
(
0
,
255
,
0
)
60%
);
}
.gradient4
{
stroke-width
:
30px
;
margin
:
5px
;
background
:
repeating-linear-gradient
(
to
right
,
rgba
(
255
,
255
,
0
,
1
)
30px
,
rgba
(
0
,
0
,
255
,
.5
)
60px
);
}
.access-container
{
flex-direction
:
column
;
}
.access1
{
color
:
#321124
;
stroke-width
:
30px
;
margin
:
5px
;
}
.atom-container
{
flex-direction
:
column
;
}
.multimode-container
{
flex-direction
:
column
;
}
.multimode1
{
color
:
#978666
;
stroke-width
:
30px
;
margin
:
5px
;
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/polygon/index.hml
0 → 100644
浏览文件 @
5bd1ab66
<div class="container">
<div class="style-container">
<text class="title">
通用样式
</text>
<text class="sub-title">
polygon通用样式1
</text>
<svg class="style1" x="0" y="0" width="200" height="200" fill="white" fill-opacity="0">
<polygon stroke="blue" stroke-width="2"
points="5,50 20,20 20,50 40,20" stroke-dasharray="10 5" stroke-dashoffset="3"></polygon>
</svg>
<text class="sub-title">
polygon通用样式2
</text>
<svg class="style2" x="0" y="0" width="200" height="50" fill="white" fill-opacity="0">
<polygon fill="white" stroke="blue" stroke-width="2"
points="5,50 20,20 20,50 40,20" stroke-dasharray="10 5" stroke-dashoffset="3"></polygon>
</svg>
<text class="sub-title">
polygon通用样式3
</text>
<svg class="style3" x="0" y="0" width="200" height="50" fill="white" fill-opacity="0">
<polygon fill="white" stroke="red" stroke-width="2"
points="5,50 20,20 20,50 40,20" stroke-dasharray="10 5" stroke-dashoffset="3"></polygon>
</svg>
<text class="sub-title">
polygon通用样式4
</text>
<svg class="style4" x="0" y="0" width="200" height="80" fill="blue" >
<polygon fill="white" stroke="block" stroke-width="2"
points="10,70 50,10 50,65 90,10" stroke-dasharray="10 5" stroke-dashoffset="3"></polygon>
</svg>
<text class="sub-title">
polygon通用样式5
</text>
<div class="contain1">
<svg class="style5" x="0" y="0" width="100" height="200" fill="blue">
<polyline stroke="block" stroke-width="2"
points="10,70 50,10 50,65 90,10" stroke-dasharray="10 5" stroke-dashoffset="3"></polyline>
</svg>
<svg class="style6" x="0" y="0" width="100" height="200" fill="red" >
<polygon stroke="yellow" stroke-width="2"
points="10,70 50,10 50,65 90,10" stroke-dasharray="10 5" stroke-dashoffset="3"></polygon>
</svg>
</div>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="true">
</divider>
<div class="sub-container">
<div class="prop-container">
<text class="title">
通用属性
</text>
<text class="sub-title">
polyline通用属性1
</text>
<svg width="200" height="80">
<polygon id="prop1" data-name ="prop1" points="10,50 10,10 30,50 50,20" fill="red"
stroke="blue" fill-opacity="0.5"></polygon>
</svg>
<text class="sub-title">
polyline通用属性2
</text>
<svg width="200" height="80">
<polygon class="prop2" ref="prop2" data-name ="prop2" points="10,50 10,10 50,50 50,10"
fill="#ad4e2a" stroke="blue" ></polygon>
</svg>
<text class="sub-title">
polyline通用属性3
</text>
<svg width="200" height="80">
<polygon class="prop3" id="prop3" fill="white" stroke="blue" stroke-width="2"
points="10,50 50,10 40,45 80,5" stroke-dasharray="10 5" stroke-dashoffset="3"></polygon>
</svg>
<text class="sub-title">
polyline通用属性4
</text>
<svg width="200" height="80">
<polygon class="prop4" id="prop4"fill="red" stroke="blue" stroke-width="2"
points="10,50 50,10 40,45 80,5" stroke-dasharray="10 5" stroke-dashoffset="3" transform="rotate(-10)"></polygon>
</svg>
<text class="sub-title">
polyline通用属性5
</text>
<svg width="200" height="80">
<polygon class="prop5" id="prop5" fill="red" stroke="blue" stroke-width="2"
points="10,50 50,10 40,45 80,5" stroke-dasharray="10 5" stroke-dashoffset="3" transform="skewX(20)"></polygon>
</svg>
<text class="sub-title">
polyline通用属性6
</text>
<svg width="200" height="80">
<polygon class="prop6" id="prop6" fill="white" stroke="blue" stroke-width="2"
points="10,40 50,5 40,40 80,5" stroke-dasharray="10 5" stroke-dashoffset="3" transform="skewY(10)"></polygon>
</svg>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="ani-container">
<text class="title">
动画样式
</text>
<svg>
<polygon points="60,30 90,90 30,90" fill="red">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 120 140" to="360 360 420" dur="3s" repeatCount="indefinite"></animateTransform>
</polygon>
<polygon points="60,30 90,90 30,90" fill="red">
<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="360" dur="3s" repeatCount="indefinite"></animateTransform>
</polygon>
<polygon points="60,30 90,90 30,90" fill="green">
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1" to="2" dur="3s" repeatCount="indefinite"></animateTransform>
</polygon>
<polygon points="60,30 90,90 30,90" fill="green">
<animateTransform attributeName="transform" attributeType="XML" type="scale" from="1 1" to="2 4" dur="3s" repeatCount="indefinite"></animateTransform>
</polygon>
<polygon points="60,30 90,90 30,90" fill="#D2691E">
<animateTransform attributeName="transform" attributeType="XML" type="skewX" from="10" to="100" dur="3s" repeatCount="indefinite"></animateTransform>
</polygon>
<polygon points="60,30 90,90 30,90" fill="#D2691E">
<animateTransform attributeName="transform" attributeType="XML" type="skewY" from="10" to="100" dur="3s" repeatCount="indefinite"></animateTransform>
</polygon>
<polygon points="60,30 90,90 30,90" fill="#D2691E">
<animateTransform attributeName="transform" attributeType="XML" type="skewX" from="10" to="100" dur="3s" repeatCount="indefinite"></animateTransform>
<animateTransform attributeName="transform" attributeType="XML" type="skewY" from="10" to="100" dur="3s" repeatCount="indefinite"></animateTransform>
</polygon>
<polygon points="60,30 90,90 30,90" fill="blue">
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="0" to="300" dur="3s" repeatCount="indefinite"></animateTransform>
</polygon>
<polygon points="60,30 90,90 30,90" fill="blue">
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="0 0" to="0 300" dur="3s" repeatCount="indefinite"></animateTransform>
</polygon>
<polygon points="60,30 90,90 30,90" fill="blue">
<animateTransform attributeName="transform" attributeType="XML" type="translate" from="0 0" to="300 300" dur="3s" repeatCount="indefinite"></animateTransform>
</polygon>
</svg>
</div>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="true">
</divider>
<div class="sub-container">
<div class="gradient-container">
<text class="title">
渐变样式
</text>
<text class="sub-title">
polygon渐变样式1
</text>
<svg class="gradient1" width="200" height="80">
<polygon ref="prop2" data-name ="prop2" fill="white" stroke="blue" stroke-width="2" fill-opacity="0"
points="10,60 50,20 50,65 90,20" stroke-dasharray="10 5" stroke-dashoffset="3"></polygon>
</svg>
<text class="sub-title">
polygon渐变样式2
</text>
<svg class="gradient2" width="200" height="80">
<polygon ref="prop2" data-name ="prop2" fill="white" stroke="blue" stroke-width="2" fill-opacity="0"
points="10,60 50,20 50,65 90,20" stroke-dasharray="10 5" stroke-dashoffset="3"></polygon>
</svg>
<text class="sub-title">
polygon渐变样式3
</text>
<svg class="gradient3" width="200" height="80">
<polygon ref="prop2" data-name ="prop2" fill="white" stroke="yellow" stroke-width="2" fill-opacity="0"
points="10,60 50,20 50,65 90,20" stroke-dasharray="10 5" stroke-dashoffset="3"></polygon>
</svg>
<text class="sub-title">
polygon渐变样式4
</text>
<svg class="gradient4" width="200" height="80">
<polygon ref="prop2" data-name ="prop2" fill="red" stroke="blue" stroke-width="2"
points="10,60 50,20 50,65 90,20" stroke-dasharray="10 5" stroke-dashoffset="3"></polygon>
</svg>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="access-container">
<text class="title">
无障碍
</text>
<text class="sub-title">
polygon无障碍1
</text>
<svg class="access1" accessibilitygroup ="true"
accessibilitytext="polygon"
accessibilitydescription="点击此按键会弹出一个对话框"
ccessibilityimportance="no-hide-descendants"
width="200" height="100">
<polygon fill="white" stroke="blue" stroke-width="2"
points="10,80 50,20 50,75 90,20" stroke-dasharray="10 5" stroke-dashoffset="3"></polygon>
</svg>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="multimode-container">
<text class="title">
多模输入
</text>
<text class="sub-title">
polygon多模输入1
</text>
<!-- <svg class="multimode1" width="200" height="100" voicelabel = "voice"-->
<!-- subscriptflag="on" subscriptlabel="polygon" scenelabel="common">-->
<!-- <polygon fill="red" stroke="blue" stroke-width="2"-->
<!-- points="10,80 50,20 50,75 90,20" stroke-dasharray="10 5" stroke-dashoffset="3"></polygon>-->
<!-- </svg>-->
<svg class="multimode1" width="200" height="100" voicelabel = "voice"
subscriptflag="on" subscriptlabel="polygon" scenelabel="common">
<polygon fill="red" stroke="blue" stroke-width="2"
points="10,80 50,20 50,75 90,20" stroke-dasharray="10 5" stroke-dashoffset="3"></polygon>
</svg>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/polygon/index.js
0 → 100644
浏览文件 @
5bd1ab66
/**
* 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
:
{
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/polyline/index.css
0 → 100644
浏览文件 @
5bd1ab66
/**
* 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.2
;
}
.style-container
{
flex-direction
:
column
;
height
:
100%
;
flex-weight
:
1
;
}
.title
{
width
:
100%
;
font-size
:
18px
;
margin
:
2px
;
padding
:
2px
;
font-weight
:
bold
;
text-align
:
center
;
}
.sub-title
{
width
:
100%
;
font-size
:
14px
;
text-align
:
left
;
margin
:
2px
;
padding
:
2px
;
}
.style1
{
min-width
:
25px
;
min-height
:
10px
;
max-width
:
300px
;
max-height
:
100px
;
padding-left
:
10px
;
padding-top
:
20px
;
padding-right
:
15px
;
padding-bottom
:
5px
;
margin-left
:
10px
;
margin-top
:
20px
;
margin-right
:
15px
;
margin-bottom
:
5px
;
border-left-style
:
solid
;
border-right-style
:
dashed
;
border-top-style
:
dashed
;
border-bottom-style
:
dotted
;
border-left-width
:
1px
;
border-right-width
:
2px
;
border-top-width
:
2px
;
border-bottom-width
:
1px
;
border-left-color
:
#ff0000
;
border-right-color
:
#00ff00
;
border-top-color
:
#0000ff
;
border-bottom-color
:
#fff000
;
border-bottom-left-radius
:
10px
;
border-bottom-right-radius
:
15px
;
border-top-left-radius
:
8px
;
border-top-right-radius
:
12px
;
background
:
linear-gradient
(
pink
,
#fff000
);
box-shadow
:
2px
4px
6px
8px
#888888
;
opacity
:
0.5
;
display
:
flex
;
visibility
:
visible
;
align-self
:
center
;
image-fill
:
#000fff
;
clip-path
:
margin-box
;
}
.style2
{
padding-start
:
10px
;
padding-end
:
15px
;
margin-start
:
5px
;
margin-end
:
10px
;
border-style
:
dotted
;
border-width
:
2px
;
border-color
:
#000000
;
border-radius
:
5px
;
background-color
:
#ffaa00
;
mask-image
:
url('common/images/icon.png')
;
mask-size
:
cover
;
mask-position
:
center
;
}
.style3
{
padding
:
10px
;
margin
:
5px
;
border-left
:
1px
solid
#000000
;
border-right
:
2px
dashed
#00ff00
;
border-top
:
1.5px
dotted
#0000ff
;
border-bottom
:
2.5px
dotted
#fff000
;
background-image
:
url('common/images/image.png')
;
background-size
:
cover
;
background-repeat
:
repeat-x
;
background-position
:
center
;
flex
:
1
;
flex-grow
:
2
;
flex-basis
:
10px
;
flex-shrink
:
1
;
}
.style4
{
padding
:
10px
;
margin
:
5px
;
border
:
2px
solid
#000000
;
}
.contain1
{
width
:
100%
;
height
:
70px
;
flex-direction
:
column
;
}
.style5
{
background-color
:
yellow
;
border-image-source
:
url('/common/images/image.png')
;
border-image-slice
:
1px
2px
3px
4px
;
border-image-width
:
2px
3px
4px
5px
;
border-image-outset
:
3px
4px
5px
6px
;
border-image-repeat
:
repeat
;
}
.style6
{
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.6
;
}
#prop1
{
background-color
:
mediumslateblue
;
width
:
100%
;
margin
:
3px
5px
;
}
.prop2
{
background-color
:
pink
;
width
:
100%
;
margin
:
3px
5px
;
}
.prop3
{
background-color
:
darkseagreen
;
width
:
100%
;
margin
:
3px
5px
;
}
.prop4
{
background-color
:
yellowgreen
;
width
:
100%
;
margin
:
3px
5px
;
}
.prop5
{
background-color
:
cornflowerblue
;
width
:
100%
;
margin
:
3px
5px
;
}
.prop6
{
background-color
:
burlywood
;
width
:
100%
;
margin
:
3px
5px
;
}
.ani-container
{
flex-direction
:
column
;
height
:
100%
;
flex-weight
:
1
;
}
.ani1
{
color
:
#72ac33
;
stroke-width
:
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
)
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
)
}
}
.ani2
{
color
:
#ad4e2a
;
stroke-width
:
55px
;
margin
:
5px
;
transform-origin
:
2%
3%
;
animation-name
:
ani2Go
;
animation-delay
:
5s
;
animation-duration
:
10s
;
animation-iteration-count
:
4
;
animation-timing-function
:
ease-out
;
animation-direction
:
reverse
;
animation-fill-mode
:
forwards
;
animation-play-state
:
running
;
transition
:
all
0
ease
0
;
}
@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
);
}
}
.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/polyline/index.hml
0 → 100644
浏览文件 @
5bd1ab66
<div class="container">
<div class="style-container">
<text class="title">
通用样式
</text>
<text class="sub-title">
polyline通用样式1
</text>
<svg class="style1" x="0" y="0" width="200" height="200" fill="white" fill-opacity="0">
<polyline stroke="blue" stroke-width="2"
points="5,50 20,20 20,50 40,20" stroke-dasharray="10 5" stroke-dashoffset="3"></polyline>
</svg>
<text class="sub-title">
polyline通用样式2
</text>
<svg class="style2" x="0" y="0" width="200" height="50" fill="white" fill-opacity="0">
<polyline fill="white" stroke="blue" stroke-width="2"
points="5,50 20,20 20,50 40,20" stroke-dasharray="10 5" stroke-dashoffset="3"></polyline>
</svg>
<text class="sub-title">
polyline通用样式3
</text>
<svg class="style3" x="0" y="0" width="200" height="50" fill="white" fill-opacity="0">
<polyline fill="white" stroke="red" stroke-width="2"
points="5,50 20,20 20,50 40,20" stroke-dasharray="10 5" stroke-dashoffset="3"></polyline>
</svg>
<text class="sub-title">
polyline通用样式4
</text>
<svg class="style4" x="0" y="0" width="200" height="80" fill="blue" >
<polyline fill="white" stroke="block" stroke-width="2"
points="10,70 50,10 50,65 90,10" stroke-dasharray="10 5" stroke-dashoffset="3"></polyline>
</svg>
<text class="sub-title">
polyline通用样式5
</text>
<div class="contain1">
<svg class="style5" x="0" y="0" width="100" height="200" fill="blue">
<polyline stroke="block" stroke-width="2"
points="10,70 50,10 50,65 90,10" stroke-dasharray="10 5" stroke-dashoffset="3"></polyline>
</svg>
<svg class="style6" x="0" y="0" width="100" height="200" fill="red" >
<polyline stroke="yellow" stroke-width="2"
points="10,70 50,10 50,65 90,10" stroke-dasharray="10 5" stroke-dashoffset="3"></polyline>
</svg>
</div>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="true">
</divider>
<div class="sub-container">
<div class="prop-container">
<text class="title">
通用属性
</text>
<text class="sub-title">
polyline通用属性1
</text>
<svg width="200" height="80">
<polyline id="prop1" data-name ="prop1" points="10,50 10,10 30,50 50,20" fill="red"
stroke="blue" fill-opacity="0.5"></polyline>
</svg>
<text class="sub-title">
polyline通用属性2
</text>
<svg width="200" height="80">
<polyline class="prop2" ref="prop2" data-name ="prop2" points="10,50 10,10 50,50 50,10"
fill="#ad4e2a" stroke="blue" ></polyline>
</svg>
<text class="sub-title">
polyline通用属性3
</text>
<svg width="200" height="80">
<polyline class="prop3" id="prop3" fill="white" stroke="blue" stroke-width="2"
points="10,50 50,10 40,45 80,5" stroke-dasharray="10 5" stroke-dashoffset="3"></polyline>
</svg>
<text class="sub-title">
polyline通用属性4
</text>
<svg width="200" height="80">
<polyline class="prop4" id="prop4"fill="red" stroke="blue" stroke-width="2"
points="10,50 50,10 40,45 80,5" stroke-dasharray="10 5" stroke-dashoffset="3" transform="rotate(-10)"></polyline>
</svg>
<text class="sub-title">
polyline通用属性5
</text>
<svg width="200" height="80">
<polyline class="prop5" id="prop5" fill="red" stroke="blue" stroke-width="2"
points="10,50 50,10 40,45 80,5" stroke-dasharray="10 5" stroke-dashoffset="3" transform="skewX(20)"></polyline>
</svg>
<text class="sub-title">
polyline通用属性6
</text>
<svg width="200" height="80">
<polyline class="prop6" id="prop6" fill="white" stroke="blue" stroke-width="2"
points="10,50 50,10 40,45 80,5" stroke-dasharray="10 5" stroke-dashoffset="3" transform="skewY(10)"></polyline>
</svg>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="ani-container">
<text class="title">
动画样式
</text>
<text class="sub-title">
polyline动画样式1
</text>
<svg class="ani1" width="100" height="100">
<polyline fill="red" stroke="blue" stroke-width="2"
points="10,80 50,20 50,75 90,20" stroke-dasharray="10 5" stroke-dashoffset="3"></polyline>
</svg>
<text class="sub-title">
path动画样式2
</text>
<svg class="ani2" width="100" height="100">
<polyline fill="white" stroke="blue" stroke-width="2" fill-opacity="0"
points="10,80 50,20 50,75 90,20" stroke-dasharray="10 5" stroke-dashoffset="3"></polyline>
</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">
polyline渐变样式1
</text>
<svg class="gradient1" width="200" height="80">
<polyline ref="prop2" data-name ="prop2" fill="white" stroke="blue" stroke-width="2" fill-opacity="0"
points="10,60 50,20 50,65 90,20" stroke-dasharray="10 5" stroke-dashoffset="3"></polyline>
</svg>
<text class="sub-title">
polyline渐变样式2
</text>
<svg class="gradient2" width="200" height="80">
<polyline ref="prop2" data-name ="prop2" fill="white" stroke="blue" stroke-width="2" fill-opacity="0"
points="10,60 50,20 50,65 90,20" stroke-dasharray="10 5" stroke-dashoffset="3"></polyline>
</svg>
<text class="sub-title">
polyline渐变样式3
</text>
<svg class="gradient3" width="200" height="80">
<polyline ref="prop2" data-name ="prop2" fill="white" stroke="yellow" stroke-width="2" fill-opacity="0"
points="10,60 50,20 50,65 90,20" stroke-dasharray="10 5" stroke-dashoffset="3"></polyline>
</svg>
<text class="sub-title">
polyline渐变样式4
</text>
<svg class="gradient4" width="200" height="80">
<polyline ref="prop2" data-name ="prop2" fill="red" stroke="blue" stroke-width="2"
points="10,60 50,20 50,65 90,20" stroke-dasharray="10 5" stroke-dashoffset="3"></polyline>
</svg>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="access-container">
<text class="title">
无障碍
</text>
<text class="sub-title">
polyline无障碍1
</text>
<svg class="access1" accessibilitygroup ="true"
accessibilitytext="这是line"
accessibilitydescription="点击此按键会弹出一个对话框"
ccessibilityimportance="no-hide-descendants"
width="200" height="100">
<polyline fill="white" stroke="blue" stroke-width="2"
points="10,80 50,20 50,75 90,20" stroke-dasharray="10 5" stroke-dashoffset="3"></polyline>
</svg>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="multimode-container">
<text class="title">
多模输入
</text>
<text class="sub-title">
polyline多模输入1
</text>
<svg class="multimode1" width="200" height="100" voicelabel = "voice"
subscriptflag="on" subscriptlabel="divider" scenelabel="common">
<!-- <line id="prop1" data-name ="prop1" x1="10" x2="150" y1="20" y2="20" stroke="#978666" stroke-width="4" ></line>-->
<polyline fill="red" stroke="blue" stroke-width="2"
points="10,80 50,20 50,75 90,20" stroke-dasharray="10 5" stroke-dashoffset="3"></polyline>
</svg>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/polyline/index.js
0 → 100644
浏览文件 @
5bd1ab66
/**
* 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
:
{
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
0 → 100644
浏览文件 @
5bd1ab66
.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
{
color
:
#72ac33
;
stroke-width
:
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
)
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
)
}
}
.ani2
{
color
:
#ad4e2a
;
stroke-width
:
55px
;
margin
:
5px
;
transform-origin
:
2%
3%
;
animation-name
:
ani2Go
;
animation-delay
:
5s
;
animation-duration
:
10s
;
animation-iteration-count
:
4
;
animation-timing-function
:
ease-out
;
animation-direction
:
reverse
;
animation-fill-mode
:
forwards
;
animation-play-state
:
running
;
transition
:
all
0
ease
0
;
}
@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
);
}
}
.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/index.hml
0 → 100644
浏览文件 @
5bd1ab66
<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">
通用属性
</text>
<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">
<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">
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>
<text class="sub-title">
rect通用属性3
</text>
<svg id="prop3" class="prop3" x="0" y="0" width="180" height="140" 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">
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>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="ani-container">
<text class="title">
动画样式
</text>
<text class="sub-title">
rect动画样式1
</text>
<svg width="200" height="100">
<rect x="20" 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>
<text class="sub-title">
rect动画样式2
</text>
<svg width="200" height="100">
<rect x="20" 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/rect/index.js
0 → 100644
浏览文件 @
5bd1ab66
/**
* 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
:
{
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
0 → 100644
浏览文件 @
5bd1ab66
.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
{
color
:
#72ac33
;
stroke-width
:
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
)
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
)
}
}
.ani2
{
color
:
#ad4e2a
;
stroke-width
:
55px
;
margin
:
5px
;
transform-origin
:
2%
3%
;
animation-name
:
ani2Go
;
animation-delay
:
5s
;
animation-duration
:
10s
;
animation-iteration-count
:
4
;
animation-timing-function
:
ease-out
;
animation-direction
:
reverse
;
animation-fill-mode
:
forwards
;
animation-play-state
:
running
;
transition
:
all
0
ease
0
;
}
@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
);
}
}
.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
0 → 100644
浏览文件 @
5bd1ab66
<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/index.js
0 → 100644
浏览文件 @
5bd1ab66
/**
* 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
:
{
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_text/index.css
0 → 100644
浏览文件 @
5bd1ab66
.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
;
}
.contain1
{
width
:
100%
;
height
:
70px
;
flex-direction
:
column
;
}
.prop-container
{
flex-direction
:
column
;
height
:
100%
;
flex-weight
:
2
;
}
.ani-container
{
flex-direction
:
column
;
height
:
100%
;
flex-weight
:
1
;
}
.ani1
{
color
:
#72ac33
;
stroke-width
:
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
)
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
)
}
}
.ani2
{
color
:
#ad4e2a
;
stroke-width
:
55px
;
margin
:
5px
;
transform-origin
:
2%
3%
;
animation-name
:
ani2Go
;
animation-delay
:
5s
;
animation-duration
:
10s
;
animation-iteration-count
:
4
;
animation-timing-function
:
ease-out
;
animation-direction
:
reverse
;
animation-fill-mode
:
forwards
;
animation-play-state
:
running
;
transition
:
all
0
ease
0
;
}
@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
);
}
}
.gradient-container
{
flex-direction
:
column
;
}
.gradient1
{
margin
:
5px
;
background
:
linear-gradient
(
red
,
#00ff00
);
}
.gradient2
{
margin
:
5px
;
background
:
linear-gradient
(
45deg
,
rgb
(
255
,
0
,
0
),
rgb
(
0
,
255
,
0
));
}
.gradient3
{
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
;
background-color
:
#321124
;
stroke-width
:
30px
;
margin
:
5px
;
}
.multimode-container
{
flex-direction
:
column
;
}
.multimode1
{
background-color
:
#978666
;
margin
:
5px
;
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/svg_text/index.hml
0 → 100644
浏览文件 @
5bd1ab66
<div class="container">
<div class="sub-container">
<div class="prop-container">
<text class="title">
通用属性
</text>
<text class="sub-title">
svg_text通用属性1
</text>
<svg width="200" height="50">
<text id="text1" x="5%" y="20" font-size="18" fill="red">x: 5% ; y: 20</text>
<text x="5%" y="30" dx="10%" dy="10" font-size="18" fill="blue">dx: 10% ; dy: 10</text>
</svg>
<text class="sub-title">
svg_text通用属性2
</text>
<svg width="200" height="50">
<text x="5%" y="10" font-size="18" fill="blue" rotate="30">rotate: 30</text>
<text x="5%" y="35" font-size="18" fill="black" rotate="-30">rotate: -30</text>
</svg>
<text class="sub-title">
svg_text通用属性3
</text>
<svg width="200" height="50">
<text x="5%" y="18" font-size="22" fill="black">font-size: 22px</text>
<text x="5%" y="40" font-size="18" fill="#00ff00">fill: #00ff00</text>
</svg>
<text class="sub-title">
svg_text通用属性4
</text>
<svg width="200" height="50">
<text x="5%" y="20" font-size="18" fill="red" fill-opacity="0.5">fill-opacity: 0.5</text>
<text x="5%" y="40" font-size="18" fill="red" opacity="0.7">opacity: 0.7</text>
</svg>
<text class="sub-title">
svg_text通用属性5
</text>
<svg width="200" height="70">
<text x="5%" y="20" font-size="18" fill="white" stroke="black">stroke: black</text>
<text x="5%" y="40" font-size="18" fill="white" stroke="black" stroke-width="2">stroke-width: 2</text>
<text x="5%" y="60" font-size="18" fill="white" stroke="black" stroke-width="2" stroke-opacity="0.5">stroke-opacity: 0.5</text>
</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_text动画样式1
</text>
<svg class="ani1" width="100" height="100">
<text id="text1" x="5%" y="20" font-size="18" fill="red">svg_text</text>
</svg>
<text class="sub-title">
svg_text动画样式2
</text>
<svg class="ani2" width="100" height="100">
<text id="text1" x="5%" y="20" font-size="18" fill="red">svg_text</text>
</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_text渐变样式1
</text>
<svg class="gradient1" width="200" height="80">
<text id="text1" x="5%" y="20" font-size="18" fill="#ffffff">svg_text</text>
</svg>
<text class="sub-title">
svg_text渐变样式2
</text>
<svg class="gradient2" width="200" height="80">
<text id="text1" x="5%" y="20" font-size="18" fill="#ffffff">svg_text</text>
</svg>
<text class="sub-title">
svg_text渐变样式3
</text>
<svg class="gradient3" width="200" height="80">
<text id="text1" x="5%" y="20" font-size="18" fill="#ffffff">svg_text</text>
</svg>
<text class="sub-title">
svg_text渐变样式4
</text>
<svg class="gradient4" width="200" height="80">
<text id="text1" x="5%" y="20" font-size="18" fill="#ffffff">svg_text</text>
</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_text无障碍1
</text>
<svg class="access1" accessibilitygroup ="true"
accessibilitytext="这是line"
accessibilitydescription="点击此按键会弹出一个对话框"
ccessibilityimportance="no-hide-descendants"
width="200" height="100">
<text id="text1" x="5%" y="40" font-size="18" fill="#ff00ff">svg_text</text>
</svg>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="multimode-container">
<text class="title">
多模输入
</text>
<text class="sub-title">
svg_text多模输入1
</text>
<svg class="multimode1" width="200" height="100" voicelabel = "voice"
subscriptflag="on" subscriptlabel="divider" scenelabel="common">
<text id="text1" x="5%" y="20" font-size="18" fill="black">svg_text</text>
</svg>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/svg_text/index.js
0 → 100644
浏览文件 @
5bd1ab66
/**
* 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
{
onShow
(){
// 通用属性
var
prop1
=
this
.
$element
(
"
prop1
"
);
var
name1
=
prop1
.
dataSet
.
a
var
prop2
=
this
.
$refs
.
prop2
;
var
name2
=
prop2
.
dataSet
.
a
}
}
ace/ace_standard/src/main/js/default/pages/textPath/index.css
0 → 100644
浏览文件 @
5bd1ab66
.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
;
}
.contain1
{
width
:
100%
;
height
:
70px
;
flex-direction
:
column
;
}
.prop-container
{
flex-direction
:
column
;
height
:
100%
;
flex-weight
:
2
;
}
.ani-container
{
flex-direction
:
column
;
height
:
100%
;
flex-weight
:
1
;
}
.ani1
{
color
:
#72ac33
;
stroke-width
:
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
)
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
)
}
}
.ani2
{
color
:
#ad4e2a
;
stroke-width
:
55px
;
margin
:
5px
;
transform-origin
:
2%
3%
;
animation-name
:
ani2Go
;
animation-delay
:
5s
;
animation-duration
:
10s
;
animation-iteration-count
:
4
;
animation-timing-function
:
ease-out
;
animation-direction
:
reverse
;
animation-fill-mode
:
forwards
;
animation-play-state
:
running
;
transition
:
all
0
ease
0
;
}
@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
);
}
}
.gradient-container
{
flex-direction
:
column
;
}
.gradient1
{
margin
:
5px
;
background
:
linear-gradient
(
red
,
#00ff00
);
}
.gradient2
{
margin
:
5px
;
background
:
linear-gradient
(
45deg
,
rgb
(
255
,
0
,
0
),
rgb
(
0
,
255
,
0
));
}
.gradient3
{
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
{
background-color
:
#321124
;
stroke-width
:
30px
;
margin
:
5px
;
}
.multimode-container
{
flex-direction
:
column
;
}
.multimode1
{
background-color
:
#978666
;
margin
:
5px
;
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/textPath/index.hml
0 → 100644
浏览文件 @
5bd1ab66
<div class="container">
<div class="sub-container">
<div class="prop-container">
<text class="title">
通用属性
</text>
<text class="sub-title">
textPath通用属性1
</text>
<svg width="200" height="100">
<path d="M20,20 Q60,90 90,80 Q90,40 60,40 Q40,40 40,60 Q40,100 80,100 Q100,100 100,100" stroke="red"
fill="none"></path>
<text >
<textpath fill="blue" path="M20,20 Q60,90 90,80 Q90,40 60,40 Q40,40 40,60 Q40,100 80,100 Q100,100 100,100"
font-size="18">
textPath
</textpath>
<textpath fill="red" startOffset="75%" path="M20,20 Q60,90 90,80 Q90,40 60,40 Q40,40 40,60 Q40,100 80,100 Q100,100 100,100"
font-size="15">
textPath
</textpath>
</text>
</svg>
<text class="sub-title">
textPath通用属性2
</text>
<svg width="200" height="100">
<path d="M20,20 Q60,90 90,80 Q100,0 20,40 Q00,40 40,80 Q60,95 100,95" stroke="red"
fill="none"></path>
<text>
<textpath fill="blue" path="M20,20 Q60,90 90,80 Q100,0 20,40 Q00,40 40,80 Q60,95 100,95"
font-size="18" opacity="0.5">
textPath
</textpath>
<textpath fill="#ffffff" path="M20,20 Q60,90 90,80 Q100,0 20,40 Q00,40 40,80 Q60,95 100,95"
font-size="18" startOffset="30%" stroke="red">
textPath
</textpath>
<textpath fill="blue" path="M20,20 Q60,90 90,80 Q100,0 20,40 Q00,40 40,80 Q60,95 100,95"
font-size="16" startOffset="70%" fill-opacity="0.8">
textPath
</textpath>
</text>
</svg>
<text class="sub-title">
textPath通用属性3
</text>
<svg width="200" height="200">
<path d="M20,20 Q60,90 90,80 Q100,0 20,40 Q00,40 40,80 Q60,95 100,95" stroke="red"
fill="none"></path>
<text>
<textpath fill="#ffffff" path="M20,20 Q60,90 90,80 Q100,0 20,40 Q00,40 40,80 Q60,95 100,95"
font-size="18" stroke="red" stroke-width="2">
textPath
</textpath>
<textpath fill="#ffffff" startOffset="75%" path="M20,20 Q60,90 90,80 Q100,0 20,40 Q00,40 40,80 Q60,95 100,95"
font-size="18" stroke="red" stroke-width="2" stroke-opacity="0.5">
textPath
</textpath>
</text>
</svg>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="ani-container">
<text class="title">
动画样式
</text>
<text class="sub-title">
textPath动画样式1
</text>
<svg class="ani1" width="100" height="100">
<text>
<textpath fill="#ffffff" path="M20,20 Q60,90 90,80 Q100,0 20,40 Q00,40 40,80 Q60,95 100,95"
font-size="18" stroke="red" stroke-width="2">
textPath
</textpath>
<textpath fill="#ffffff" startOffset="75%" path="M20,20 Q60,90 90,80 Q100,0 20,40 Q00,40 40,80 Q60,95 100,95"
font-size="18" stroke="red" stroke-width="2" stroke-opacity="0.5">
textPath
</textpath>
</text>
</svg>
<text class="sub-title">
textPath动画样式2
</text>
<svg class="ani2" width="100" height="100">
<text>
<textpath fill="#ffffff" path="M20,20 Q60,90 90,80 Q100,0 20,40 Q00,40 40,80 Q60,95 100,95"
font-size="18" stroke="red" stroke-width="2">
textPath
</textpath>
<textpath fill="#ffffff" startOffset="75%" path="M20,20 Q60,90 90,80 Q100,0 20,40 Q00,40 40,80 Q60,95 100,95"
font-size="18" stroke="red" stroke-width="2" stroke-opacity="0.5">
textPath
</textpath>
</text>
</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">
textPath渐变样式1
</text>
<svg class="gradient1" width="200" height="80">
<text>
<textpath fill="#ffffff" path="M20,20 Q60,90 90,80 Q80,0 20,40 Q00,40 40,80 Q60,95 80,95"
font-size="18" stroke="#ffffff" stroke-width="2">
textPath
</textpath>
</text>
</svg>
<text class="sub-title">
textPath渐变样式2
</text>
<svg class="gradient2" width="200" height="80">
<text>
<textpath fill="#ffffff" path="M20,20 Q60,90 90,80 Q80,0 20,40 Q00,40 40,80 Q60,95 80,95"
font-size="18" stroke="#ffffff" stroke-width="2">
textPath
</textpath>
</text>
</svg>
<text class="sub-title">
textPath渐变样式3
</text>
<svg class="gradient3" width="200" height="80">
<text>
<textpath fill="#ffffff" path="M20,20 Q60,90 90,80 Q80,0 20,40 Q00,40 40,80 Q60,95 80,95"
font-size="18" stroke="#ffffff" stroke-width="2">
textPath
</textpath>
</text>
</svg>
<text class="sub-title">
textPath渐变样式4
</text>
<svg class="gradient4" width="200" height="80">
<text>
<textpath fill="#ffffff" path="M20,20 Q60,90 90,80 Q80,0 20,40 Q00,40 40,80 Q60,95 80,95"
font-size="18" stroke="#ffffff" stroke-width="2">
textPath
</textpath>
</text>
</svg>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="access-container">
<text class="title">
无障碍
</text>
<text class="sub-title">
textPath无障碍1
</text>
<svg class="access1" accessibilitygroup ="true"
accessibilitytext="这是line"
accessibilitydescription="点击此按键会弹出一个对话框"
ccessibilityimportance="no-hide-descendants"
width="200" height="100">
<text>
<textpath fill="#ffffff" path="M20,20 Q60,90 90,80 Q80,0 20,40 Q00,40 40,80 Q60,95 80,95"
font-size="18" stroke="#ff00ff" stroke-width="2">
textPath
</textpath>
</text>
</svg>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="multimode-container">
<text class="title">
多模输入
</text>
<text class="sub-title">
textPath多模输入1
</text>
<svg class="multimode1" width="200" height="100" voicelabel = "voice"
subscriptflag="on" subscriptlabel="divider" scenelabel="common">
<text>
<textpath fill="#ffffff" path="M20,20 Q60,90 90,80 Q80,0 20,40 Q00,40 40,80 Q60,95 80,95"
font-size="18" stroke="black" stroke-width="2">
textPath
</textpath>
</text>
</svg>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/textPath/index.js
0 → 100644
浏览文件 @
5bd1ab66
/**
* 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
{
}
ace/ace_standard/src/main/js/default/pages/tspan/index.css
0 → 100644
浏览文件 @
5bd1ab66
.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
;
}
.contain1
{
width
:
100%
;
height
:
70px
;
flex-direction
:
column
;
}
.prop-container
{
flex-direction
:
column
;
height
:
100%
;
flex-weight
:
2
;
}
.ani-container
{
flex-direction
:
column
;
height
:
100%
;
flex-weight
:
1
;
}
.ani1
{
color
:
#72ac33
;
stroke-width
:
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
)
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
)
}
}
.ani2
{
color
:
#ad4e2a
;
stroke-width
:
55px
;
margin
:
5px
;
transform-origin
:
2%
3%
;
animation-name
:
ani2Go
;
animation-delay
:
5s
;
animation-duration
:
10s
;
animation-iteration-count
:
4
;
animation-timing-function
:
ease-out
;
animation-direction
:
reverse
;
animation-fill-mode
:
forwards
;
animation-play-state
:
running
;
transition
:
all
0
ease
0
;
}
@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
);
}
}
.gradient-container
{
flex-direction
:
column
;
}
.gradient1
{
margin
:
5px
;
background
:
linear-gradient
(
red
,
#00ff00
);
}
.gradient2
{
margin
:
5px
;
background
:
linear-gradient
(
45deg
,
rgb
(
255
,
0
,
0
),
rgb
(
0
,
255
,
0
));
}
.gradient3
{
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
{
background-color
:
#321124
;
margin
:
5px
;
}
.multimode-container
{
flex-direction
:
column
;
}
.multimode1
{
margin
:
5px
;
background-color
:
#978666
;
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/tspan/index.hml
0 → 100644
浏览文件 @
5bd1ab66
<div class="container">
<div class="sub-container">
<div class="prop-container">
<text class="title">
通用属性
</text>
<text class="sub-title">
tspan通用属性1
</text>
<svg width="200" height="100">
<text>
<tspan id="tspan" font-size="18" x="10" y="20">
X: 0; Y: 60
</tspan>
<tspan font-size="18" x="10" y="20" dx="10" dy="30">
dx: 10; dy: 40
</tspan>
<tspan font-size="25" x="10" y="80">
font-size: 25px
</tspan>
</text>
</svg>
<text class="sub-title">
tspan通用属性2
</text>
<svg width="200" height="100">
<text>
<tspan font-size="18" x="10" y="20" rotate="30">
rotate: 30
</tspan>
<tspan font-size="18" x="10" y="45" rotate="-30">
rotate: -30
</tspan>
<tspan font-size="18" x="10" y="65" fill="red">
fill: red
</tspan>
<tspan font-size="18" x="10" y="85" fill="#ff00ff">
fill: #ff00ff
</tspan>
</text>
</svg>
<text class="sub-title">
tspan通用属性3
</text>
<svg width="200" height="200">
<text>
<tspan font-size="18" x="10" y="20" opacity="0.5">
opacity: 0.5
</tspan>
<tspan font-size="18" x="10" y="45" fill-opacity="0.8">
fill-opacity: 0.8
</tspan>
<tspan font-size="18" x="10" y="70" fill="#ffffff" stroke="red">
stroke: red
</tspan>
<tspan font-size="18" x="10" y="95" fill="#ffffff" stroke="red" stroke-width="2">
stroke-width: 2
</tspan>
<tspan font-size="18" x="10" y="120" fill="#ffffff" stroke="red" stroke-width="2" stroke-opacity="0.5">
stroke-opacity: 0.5
</tspan>
</text>
</svg>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="ani-container">
<text class="title">
动画样式
</text>
<text class="sub-title">
tspan动画样式1
</text>
<svg class="ani1" width="100" height="100">
<text>
<tspan font-size="18" x="10" y="40" fill="#ffffff" stroke="red" stroke-width="2" stroke-opacity="0.5">
tspan
</tspan>
</text>
</svg>
<text class="sub-title">
tspan动画样式2
</text>
<svg class="ani2" width="100" height="100">
<text>
<tspan font-size="18" x="10" y="40" fill="#ffffff" stroke="red" stroke-width="2" stroke-opacity="0.5">
tspan
</tspan>
</text>
</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">
tspan渐变样式1
</text>
<svg class="gradient1" width="200" height="80">
<text>
<tspan font-size="18" x="10" y="40" fill="#ffffff" stroke="#ff00ff" stroke-width="2" stroke-opacity="0.5">
tspan
</tspan>
</text>
</svg>
<text class="sub-title">
tspan渐变样式2
</text>
<svg class="gradient2" width="200" height="80">
<text>
<tspan font-size="18" x="10" y="40" fill="#ffffff" stroke="#ff00ff" stroke-width="2" stroke-opacity="0.5">
tspan
</tspan>
</text>
</svg>
<text class="sub-title">
tspan渐变样式3
</text>
<svg class="gradient3" width="200" height="80">
<text>
<tspan font-size="18" x="10" y="40" fill="#ffffff" stroke="#ff00ff" stroke-width="2" stroke-opacity="0.5">
tspan
</tspan>
</text>
</svg>
<text class="sub-title">
tspan渐变样式4
</text>
<svg class="gradient4" width="200" height="80">
<text>
<tspan font-size="18" x="10" y="40" fill="#ffffff" stroke="#ff00ff" stroke-width="2" stroke-opacity="0.5">
tspan
</tspan>
</text>
</svg>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="access-container">
<text class="title">
无障碍
</text>
<text class="sub-title">
tspan无障碍1
</text>
<svg class="access1" accessibilitygroup ="true"
accessibilitytext="这是line"
accessibilitydescription="点击此按键会弹出一个对话框"
ccessibilityimportance="no-hide-descendants"
width="200" height="100">
<text>
<tspan font-size="18" x="10" y="40" fill="#ffffff" stroke="#ff00ff" stroke-width="2" stroke-opacity="0.5">
tspan
</tspan>
</text>
</svg>
</div>
<divider style="color: #000000; stroke-width: 2px;" vertical="false">
</divider>
<div class="multimode-container">
<text class="title">
多模输入
</text>
<text class="sub-title">
tspan多模输入1
</text>
<svg class="multimode1" width="200" height="100" voicelabel = "voice"
subscriptflag="on" subscriptlabel="divider" scenelabel="common">
<text>
<tspan font-size="18" x="10" y="40" fill="#ffffff" stroke="#ff00ff" stroke-width="2" stroke-opacity="0.5">
tspan
</tspan>
</text>
</svg>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/tspan/index.js
0 → 100644
浏览文件 @
5bd1ab66
/**
* 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
{
}
ace/ace_standard/src/main/js/default/pages/video/index.css
0 → 100644
浏览文件 @
5bd1ab66
/**
* 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.
*/
.container
{
flex-direction
:
row
;
width
:
100%
;
height
:
100%
;
padding
:
1px
;
}
.sub-container
{
flex-direction
:
column
;
height
:
100%
;
flex-weight
:
1
;
}
.title
{
width
:
100%
;
height
:
50px
;
font-size
:
18px
;
margin
:
2px
;
padding
:
2px
;
font-weight
:
bold
;
text-align
:
center
;
}
.title-style-2
{
height
:
30px
;
}
.sub-title
{
width
:
100%
;
height
:
50px
;
font-size
:
14px
;
text-align
:
left
;
margin
:
2px
;
padding
:
2px
;
}
.sub-title-2
{
height
:
20px
;
}
.sub-title-3
{
font-size
:
12px
;
}
.style1
{
width
:
100%
;
height
:
100%
;
min-width
:
25px
;
min-height
:
10px
;
max-width
:
300px
;
max-height
:
100px
;
padding-left
:
5px
;
padding-top
:
5px
;
padding-right
:
5px
;
padding-bottom
:
5px
;
margin-left
:
5px
;
margin-top
:
5px
;
margin-right
:
5px
;
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
:
300px
;
height
:
100px
;
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
:
100%
;
height
:
15%
;
padding
:
10px
;
margin
:
5px
;
border
:
2px
solid
#000000
;
}
.contain1
{
width
:
100%
;
/* height: 100px;*/
/* flex-direction: column;*/
}
.style5
{
width
:
90%
;
height
:
60px
;
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
:
100px
;
height
:
70px
;
position
:
absolute
;
left
:
10px
;
top
:
70px
;
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
{
width
:
100px
;
height
:
100px
;
border
:
1px
solid
#000000
;
object-fit
:
fill
;
}
.color-primary
{
background-color
:
mediumpurple
;
}
.color-warning
{
background-color
:
pink
;
}
.color-success
{
background-color
:
cornflowerblue
;
}
.grid-child
{
width
:
100%
;
border-radius
:
2px
;
}
.grid-left-top
{
width
:
20px
;
height
:
20px
;
border-radius
:
10px
;
border
:
1px
solid
plum
;
background
:
linear-gradient
(
pink
,
purple
);
box-shadow
:
0px
0px
1px
1px
pink
;
grid-row-start
:
0
;
grid-column-start
:
0
;
grid-row-end
:
0
;
grid-column-end
:
0
;
}
.grid-left-bottom
{
width
:
20px
;
height
:
20px
;
border-radius
:
5px
;
border
:
1px
solid
plum
;
background
:
linear-gradient
(
pink
,
#00aaee
);
box-shadow
:
0px
0px
1px
1px
pink
;
grid-row-start
:
1
;
grid-column-start
:
0
;
grid-row-end
:
1
;
grid-column-end
:
0
;
}
.grid-right-top
{
width
:
20px
;
height
:
20px
;
border-radius
:
3px
;
border
:
1px
dotted
plum
;
background
:
linear-gradient
(
mediumpurple
,
#00aaee
);
box-shadow
:
0px
0px
1px
1px
pink
;
grid-row-start
:
0
;
grid-column-start
:
1
;
grid-row-end
:
0
;
grid-column-end
:
1
;
}
.grid-right-bottom
{
width
:
20px
;
height
:
20px
;
border-radius
:
5px
;
border
:
1px
dotted
plum
;
background
:
linear-gradient
(
pink
,
mediumpurple
);
box-shadow
:
0px
0px
2px
2px
pink
;
grid-row-start
:
1
;
grid-column-start
:
1
;
grid-row-end
:
1
;
grid-column-end
:
1
;
}
.event-container
{
flex-direction
:
column
;
flex-weight
:
1
;
}
.event1
{
width
:
90%
;
flex-weight
:
1
;
background-color
:
yellow
;
}
.event2
{
width
:
90%
;
flex-weight
:
1
;
background-color
:
red
;
}
.event3
{
width
:
90%
;
flex-weight
:
1
;
background-color
:
#ad4e2a
;
}
.event4
{
flex-direction
:
row
;
width
:
90%
;
flex-weight
:
1
;
overflow
:
scroll
;
}
.event5
{
flex-direction
:
column
;
width
:
100%
;
height
:
90px
;
overflow
:
scroll
;
}
.prop-container
{
flex-direction
:
column
;
}
#prop1
{
height
:
20px
;
background-color
:
mediumslateblue
;
width
:
100%
;
margin
:
5px
;
}
.prop2
{
height
:
20px
;
background-color
:
pink
;
width
:
100%
;
margin
:
5px
;
}
.prop3
{
height
:
20px
;
background-color
:
darkseagreen
;
width
:
100%
;
margin
:
5px
;
}
.prop4
{
height
:
50px
;
background-color
:
darkseagreen
;
width
:
100%
;
margin
:
5px
;
}
.prop5
{
height
:
50px
;
background-color
:
darkseagreen
;
width
:
100%
;
margin
:
5px
;
}
.atom-container
{
flex-direction
:
column
;
}
.function-container
{
flex-direction
:
column
;
}
.function1
{
background-color
:
#ff0000
;
width
:
90%
;
height
:
45px
;
}
.function2
{
background-color
:
#00ff00
;
width
:
90%
;
height
:
45px
;
}
.function3
{
background-color
:
#0000ff
;
width
:
90%
;
height
:
45px
;
}
.function4
{
flex-direction
:
row
;
width
:
90%
;
height
:
45px
;
}
.function5
{
flex-direction
:
row
;
width
:
90%
;
height
:
45px
;
}
.function6
{
flex-direction
:
row
;
width
:
90%
;
height
:
45px
;
}
.function7
{
flex-direction
:
row
;
width
:
90%
;
height
:
45px
;
}
.function8
{
flex-direction
:
row
;
width
:
90%
;
height
:
45px
;
}
.function9
{
flex-direction
:
row
;
width
:
90%
;
height
:
45px
;
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/video/index.hml
0 → 100644
浏览文件 @
5bd1ab66
<div class="container">
<div class="sub-container">
<text class="title">
通用样式
</text>
<text class="sub-title">
video通用样式1
</text>
<video src="/common/images/video.mp4" id="style1" class="style1">
</video>
<text class="sub-title">
video通用样式2
</text>
<video src="/common/images/video.mp4" id="style2" class="style2">
</video>
<text class="sub-title">
video通用样式3
</text>
<video src="/common/images/video.mp4" id="style3" class="style3">
</video>
<text class="sub-title">
video通用样式4
</text>
<video src="/common/images/video.mp4" id="style4" class="style4">
</video>
<text class="sub-title">
div通用样式5
</text>
<div class="contain1" style="height: 300px;">
<video src="/common/images/video.mp4" id="style5" class="style5">
</video>
<video src="/common/images/video.mp4" id="style6" class="style6">
</video>
</div>
<text class="sub-title">
video特有样式
</text>
<video src="/common/images/video.mp4" id="style7" class="style7">
</video>
</div>
<div style="background-color: #000000; width: 2px; height: 100%;">
</div>
<div class="sub-container">
<div class="prop-container">
<text class="title title-style-2">
通用属性
</text>
<text class="sub-title sub-title-2">
video通用属性1
</text>
<video id="prop1" class="prop1"
disabled = "true" data-name ="prop1" click-effect="spring-medium">
</video>
<text class="sub-title sub-title-2">
video通用属性2
</text>
<video class="prop2" ref ="prop2" id="prop2"
disabled = "false" data-name ="prop2" click-effect="spring-large">
</video>
<text class="sub-title sub-title-2">
video通用属性3
</text>
<video style="color: #679855; margin: 5px;" class="prop3" id="prop3">
</video>
<text class="sub-title sub-title-2">
video特有属性
</text>
<video src="/common/images/video.mp4" class="prop4" id="prop4"
muted="true" autoplay="true" poster="/common/images/image.png"
controls="true" loop="true" starttime="2" direction="auto"
speed="1.5">
</video>
<video src="/common/images/video.mp4" class="prop5" id="prop5"
muted="false" autoplay="false" controls="false" loop="false"
starttime="3" direction="vertical" speed="1.0">
</video>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="event-container" >
<text class="title title-style-2">
通用事件
</text>
<text class="sub-title sub-title-2">
video通用事件1
</text>
<video src="/common/images/video.mp4" class ="event1" ontouchstart="touchStart"
ontouchmove="touchMove" ontouchend="touchEnd" ontouchcancel="touchCancel">
</video>
<text class="sub-title sub-title-2">
video通用事件2
</text>
<video src="/common/images/video.mp4" class ="event2" onclick="click"
ondoubleclick="doubleClick" onlongpress="longPress" onfocus="focus"
onblur="blur" onkey="key" onswipe="swipe" onattached="attached"
ondetached="detached">
</video>
<text class="sub-title sub-title-2">
video通用事件3
</text>
<video src="/common/images/video.mp4" class ="event3" onpinchstart="pinchStart"
onpinchupdate="pinchUpdate"
onpinchend="pinchEnd" onpinchcancel="pinchCancel"
ondragstart="dragStart" ondrag="drag"
ondragend="dragEnd" ondragenter="dragEnter"
ondragover="dragOver" ondragleave="dragLeave"
ondrop="drop">
</video>
<text class="sub-title sub-title-2">
video特有事件1
</text>
<video src="/common/images/video.mp4" class ="event4" onprepared="prepared"
onstart="start" onpause="pause" onfinish="finish" onerror="error"
onseeking="seeking" onseeked="seeked" ontimeupdate="timeupdate"
onfullscreenchange="fullscreenchange" onstop="stop">
</video>
</div>
</div>
<div style="background-color: #000000; width: 2px; height: 100%;">
</div>
<div class="sub-container">
<div class="atom-container">
<text class="title title-style-2">
特有方法
</text>
<text class="sub-title sub-title-2 sub-title-3">
video特有方法1
</text>
<video src="/common/images/video.mp4" id="function4" class="function4" ontouchstart="functionTest4">
</video>
<text class="sub-title sub-title-2 sub-title-3">
video特有方法2
</text>
<video src="/common/images/video.mp4" id="function5" class="function5" ontouchstart="functionTest5">
</video>
<text class="sub-title sub-title-2 sub-title-3">
video特有方法3
</text>
<video src="/common/images/video.mp4" id="function6" class="function6" ontouchstart="functionTest6">
</video>
<text class="sub-title sub-title-2 sub-title-3">
video特有方法4
</text>
<video src="/common/images/video.mp4" id="function7" class="function7" ontouchstart="functionTest7">
</video>
<text class="sub-title sub-title-2 sub-title-3">
video特有方法5
</text>
<video src="/common/images/video.mp4" id="function8" class="function8" ontouchstart="functionTest8">
</video>
<text class="sub-title sub-title-2 sub-title-3">
video特有方法6
</text>
<video src="/common/images/video.mp4" id="function9" class="function9" ontouchstart="functionTest9">
</video>
</div>
<div style="background-color: #000000; width: 100%; height: 2px;">
</div>
<div class="function-container">
<text class="title title-style-2">
通用方法
</text>
<text class="sub-title sub-title-2 sub-title-3">
video通用方法1
</text>
<video src="/common/images/video.mp4" id="function1" class="function1" ontouchstart="functionTest1">
</video>
<text class="sub-title sub-title-2 sub-title-3">
div通用方法2
</text>
<video src="/common/images/video.mp4" id="function2" class="function2" ontouchstart="functionTest2">
</video>
<text class="sub-title sub-title-2 sub-title-3">
div通用方法3
</text>
<video src="/common/images/video.mp4" id="function3" class="function3" ontouchstart="functionTest3">
</video>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/video/index.js
0 → 100644
浏览文件 @
5bd1ab66
// @ts-nocheck
/**
* 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.
*/
import
prompt
from
'
@system.prompt
'
;
var
options
=
{
duration
:
1500
,
easing
:
'
friction
'
,
delay
:
100
,
fill
:
'
forwards
'
,
iterations
:
2
,
direction
:
'
normal
'
,
};
var
frames
=
[
{
transform
:
{
translate
:
'
-120px
'
,
rotate
:
'
10deg
'
,
scale
:
0.2
,
skew
:
'
40deg
'
},
opacity
:
0.1
,
offset
:
0.0
,
width
:
'
40%
'
,
height
:
'
20px
'
,
backgroundColor
:
'
#ff0000
'
,
backgroundPosition
:
'
10px 20px
'
,
transformOrigin
:
'
left top
'
},
{
transform
:
{
translateX
:
'
0px
'
,
translateY
:
'
5px
'
,
rotateX
:
'
10deg
'
,
rotateY
:
'
10deg
'
,
scaleX
:
0.5
,
scaleY
:
0.7
,
skewX
:
'
22deg
'
,
skewY
:
'
30deg
'
},
opacity
:
0.6
,
offset
:
2.0
,
width
:
'
60%
'
,
height
:
'
30px
'
,
backgroundColor
:
'
#ff00ff
'
,
backgroundPosition
:
'
15px 25px
'
,
transformOrigin
:
'
center top
'
},
{
transform
:
{
translateX
:
'
100px
'
,
translateY
:
'
0px
'
,
translateZ
:
'
20px
'
,
rotateX
:
'
0deg
'
,
rotateY
:
'
0deg
'
,
rotateZ
:
'
30deg
'
,
scaleX
:
1
,
scaleY
:
1
,
scaleZ
:
2
,
skewX
:
'
0
'
,
skewY
:
'
0
'
,
skewZ
:
'
30deg
'
},
opacity
:
1
,
offset
:
0.0
,
width
:
'
100%
'
,
height
:
'
30px
'
,
backgroundColor
:
'
#ffff00
'
,
backgroundPosition
:
'
0px
'
,
transformOrigin
:
'
center center
'
},
];
export
default
{
onShow
(){
// 通用属性
var
prop1
=
this
.
$element
(
'
prop1
'
);
var
name1
=
prop1
.
dataSet
.
name
var
prop2
=
this
.
$refs
.
prop2
;
var
name2
=
prop2
.
dataSet
.
name
prompt
.
showToast
({
message
:
'
prop1--
'
+
name1
+
'
\n
prop2--
'
+
name2
});
var
styleValues
=
this
.
getStyleValues
();
var
propsValues
=
this
.
getPropValues
();
globalThis
.
value
=
{
styleValues
:
styleValues
,
propsValues
:
propsValues
}
},
getStyleValues
(){
var
styleValue1
=
this
.
$element
(
"
style1
"
).
getInspector
()
var
styleValue2
=
this
.
$element
(
"
style2
"
).
getInspector
()
var
styleValue3
=
this
.
$element
(
"
style3
"
).
getInspector
()
var
styleValue4
=
this
.
$element
(
"
style4
"
).
getInspector
()
var
styleValue5
=
this
.
$element
(
"
style5
"
).
getInspector
()
var
styleValue6
=
this
.
$element
(
"
style6
"
).
getInspector
()
var
styleValue7
=
this
.
$element
(
"
style7
"
).
getInspector
()
return
{
style1
:
styleValue1
,
style2
:
styleValue2
,
style3
:
styleValue3
,
style4
:
styleValue4
,
style5
:
styleValue5
,
style6
:
styleValue6
,
style7
:
styleValue7
}
},
getPropValues
(){
var
propValue1
=
this
.
$element
(
"
prop1
"
).
getInspector
()
var
propValue2
=
this
.
$element
(
"
prop2
"
).
getInspector
()
var
propValue3
=
this
.
$element
(
"
prop3
"
).
getInspector
()
return
{
prop1
:
propValue1
,
prop2
:
propValue2
,
prop3
:
propValue3
}
},
touchStart
(
event
){
var
globalX
=
event
.
touches
[
0
].
globalX
var
globalY
=
event
.
touches
[
0
].
globalY
var
localX
=
event
.
touches
[
0
].
localX
var
localY
=
event
.
touches
[
0
].
localY
var
size
=
event
.
touches
[
0
].
size
var
force
=
event
.
touches
[
0
].
force
var
changeGlobalX
=
event
.
changedTouches
[
0
].
globalX
var
changeGlobalY
=
event
.
changedTouches
[
0
].
globalY
var
changeLocalX
=
event
.
changedTouches
[
0
].
localX
var
changeLocalY
=
event
.
changedTouches
[
0
].
localY
var
changeSize
=
event
.
changedTouches
[
0
].
size
var
changeForce
=
event
.
changedTouches
[
0
].
force
var
message
=
'
globalX--
'
+
globalX
+
'
,globalY--
'
+
globalY
+
'
,localX--
'
+
localX
+
'
,localY--
'
+
localY
+
'
,size--
'
+
size
+
'
,force--
'
+
force
+
'
,changeGlobalX--
'
+
changeGlobalX
+
'
,changeGlobalY--
'
+
changeGlobalY
+
'
,changeLocalX--
'
+
changeLocalX
+
'
,changeLocalY--
'
+
changeLocalY
+
'
,changeSize--
'
+
changeSize
+
'
,changeForce--
'
+
changeForce
;
prompt
.
showToast
({
message
:
'
touchstart:
\n
'
+
message
});
},
touchMove
(
event
){
var
globalX
=
event
.
touches
[
0
].
globalX
var
globalY
=
event
.
touches
[
0
].
globalY
var
localX
=
event
.
touches
[
0
].
localX
var
localY
=
event
.
touches
[
0
].
localY
var
size
=
event
.
touches
[
0
].
size
var
force
=
event
.
touches
[
0
].
force
var
changeGlobalX
=
event
.
changedTouches
[
0
].
globalX
var
changeGlobalY
=
event
.
changedTouches
[
0
].
globalY
var
changeLocalX
=
event
.
changedTouches
[
0
].
localX
var
changeLocalY
=
event
.
changedTouches
[
0
].
localY
var
changeSize
=
event
.
changedTouches
[
0
].
size
var
changeForce
=
event
.
changedTouches
[
0
].
force
var
message
=
'
globalX--
'
+
globalX
+
'
,globalY--
'
+
globalY
+
'
,localX--
'
+
localX
+
'
,localY--
'
+
localY
+
'
,size--
'
+
size
+
'
,force--
'
+
force
+
'
,changeGlobalX--
'
+
changeGlobalX
+
'
,changeGlobalY--
'
+
changeGlobalY
+
'
,changeLocalX--
'
+
changeLocalX
+
'
,changeLocalY--
'
+
changeLocalY
+
'
,changeSize--
'
+
changeSize
+
'
,changeForce--
'
+
changeForce
;
prompt
.
showToast
({
message
:
'
touchMove:
\n
'
+
message
});
},
touchEnd
(
event
){
var
globalX
=
event
.
touches
[
0
].
globalX
var
globalY
=
event
.
touches
[
0
].
globalY
var
localX
=
event
.
touches
[
0
].
localX
var
localY
=
event
.
touches
[
0
].
localY
var
size
=
event
.
touches
[
0
].
size
var
force
=
event
.
touches
[
0
].
force
var
changeGlobalX
=
event
.
changedTouches
[
0
].
globalX
var
changeGlobalY
=
event
.
changedTouches
[
0
].
globalY
var
changeLocalX
=
event
.
changedTouches
[
0
].
localX
var
changeLocalY
=
event
.
changedTouches
[
0
].
localY
var
changeSize
=
event
.
changedTouches
[
0
].
size
var
changeForce
=
event
.
changedTouches
[
0
].
force
var
message
=
'
globalX--
'
+
globalX
+
'
,globalY--
'
+
globalY
+
'
,localX--
'
+
localX
+
'
,localY--
'
+
localY
+
'
,size--
'
+
size
+
'
,force--
'
+
force
+
'
,changeGlobalX--
'
+
changeGlobalX
+
'
,changeGlobalY--
'
+
changeGlobalY
+
'
,changeLocalX--
'
+
changeLocalX
+
'
,changeLocalY--
'
+
changeLocalY
+
'
,changeSize--
'
+
changeSize
+
'
,changeForce--
'
+
changeForce
;
prompt
.
showToast
({
message
:
'
touchEnd:
\n
'
+
message
});
},
touchCancel
(
event
){
var
globalX
=
event
.
touches
[
0
].
globalX
var
globalY
=
event
.
touches
[
0
].
globalY
var
localX
=
event
.
touches
[
0
].
localX
var
localY
=
event
.
touches
[
0
].
localY
var
size
=
event
.
touches
[
0
].
size
var
force
=
event
.
touches
[
0
].
force
var
changeGlobalX
=
event
.
changedTouches
[
0
].
globalX
var
changeGlobalY
=
event
.
changedTouches
[
0
].
globalY
var
changeLocalX
=
event
.
changedTouches
[
0
].
localX
var
changeLocalY
=
event
.
changedTouches
[
0
].
localY
var
changeSize
=
event
.
changedTouches
[
0
].
size
var
changeForce
=
event
.
changedTouches
[
0
].
force
var
message
=
'
globalX--
'
+
globalX
+
'
,globalY--
'
+
globalY
+
'
,localX--
'
+
localX
+
'
,localY--
'
+
localY
+
'
,size--
'
+
size
+
'
,force--
'
+
force
+
'
,changeGlobalX--
'
+
changeGlobalX
+
'
,changeGlobalY--
'
+
changeGlobalY
+
'
,changeLocalX--
'
+
changeLocalX
+
'
,changeLocalY--
'
+
changeLocalY
+
'
,changeSize--
'
+
changeSize
+
'
,changeForce--
'
+
changeForce
;
prompt
.
showToast
({
message
:
'
touchCancel:
\n
'
+
message
});
},
click
(){
prompt
.
showToast
({
message
:
'
click
'
});
},
doubleClick
(){
prompt
.
showToast
({
message
:
'
doubleClick
'
});
},
longPress
(){
prompt
.
showToast
({
message
:
'
longPress
'
});
},
focus
(){
prompt
.
showToast
({
message
:
'
focus
'
});
},
blur
(){
prompt
.
showToast
({
message
:
'
blur
'
});
},
key
(
event
){
var
code
=
event
.
code
;
var
action
=
event
.
action
;
var
repeatCount
=
event
.
repeatCount
;
var
timestampStart
=
event
.
timestampStart
;
var
message
=
'
code--
'
+
code
+
'
,action--
'
+
action
+
'
,repeatCount--
'
+
repeatCount
+
'
,timestampStart--
'
+
timestampStart
;
prompt
.
showToast
({
message
:
'
key:
\n
'
+
message
});
},
swipe
(
event
){
var
direction
=
event
.
direction
;
var
distance
=
event
.
distance
;
var
message
=
'
direction--
'
+
direction
+
'
,distance--
'
+
distance
;
prompt
.
showToast
({
message
:
'
swipe:
\n
'
+
message
});
},
attached
(){
prompt
.
showToast
({
message
:
'
attached
'
});
},
detached
(){
prompt
.
showToast
({
message
:
'
detached
'
});
},
pinchStart
(
event
){
var
scale
=
event
.
scale
var
pinchCenterX
=
event
.
pinchCenterX
var
pinchCenterY
=
event
.
pinchCenterY
var
message
=
'
scale--
'
+
scale
+
'
,pinchCenterX--
'
+
pinchCenterX
+
'
,pinchCenterY--
'
+
pinchCenterY
;
prompt
.
showToast
({
message
:
'
pinchStart:
\n
'
+
message
});
},
pinchUpdate
(
event
){
var
scale
=
event
.
scale
var
pinchCenterX
=
event
.
pinchCenterX
var
pinchCenterY
=
event
.
pinchCenterY
var
message
=
'
scale--
'
+
scale
+
'
,pinchCenterX--
'
+
pinchCenterX
+
'
,pinchCenterY--
'
+
pinchCenterY
;
prompt
.
showToast
({
message
:
'
pinchUpdate:
\n
'
+
message
});
},
pinchEnd
(
event
){
var
scale
=
event
.
scale
var
pinchCenterX
=
event
.
pinchCenterX
var
pinchCenterY
=
event
.
pinchCenterY
var
message
=
'
scale--
'
+
scale
+
'
,pinchCenterX--
'
+
pinchCenterX
+
'
,pinchCenterY--
'
+
pinchCenterY
;
prompt
.
showToast
({
message
:
'
pinchUpdate:
\n
'
+
message
});
},
pinchCancel
(
event
){
var
scale
=
event
.
scale
var
pinchCenterX
=
event
.
pinchCenterX
var
pinchCenterY
=
event
.
pinchCenterY
var
message
=
'
scale--
'
+
scale
+
'
,pinchCenterX--
'
+
pinchCenterX
+
'
,pinchCenterY--
'
+
pinchCenterY
;
prompt
.
showToast
({
message
:
'
pinchCancel:
\n
'
+
message
});
},
dragStart
(
event
){
var
type
=
event
.
type
var
globalX
=
event
.
globalX
var
globalY
=
event
.
globalY
var
timestamp
=
event
.
timestamp
var
message
=
'
type--
'
+
type
+
'
,globalX--
'
+
globalX
+
'
,globalY--
'
+
globalY
+
'
,timestamp--
'
+
timestamp
;
prompt
.
showToast
({
message
:
'
dragStart:
\n
'
+
message
});
},
drag
(
event
){
var
type
=
event
.
type
var
globalX
=
event
.
globalX
var
globalY
=
event
.
globalY
var
timestamp
=
event
.
timestamp
var
message
=
'
type--
'
+
type
+
'
,globalX--
'
+
globalX
+
'
,globalY--
'
+
globalY
+
'
,timestamp--
'
+
timestamp
;
prompt
.
showToast
({
message
:
'
drag:
\n
'
+
message
});
},
dragEnd
(
event
){
var
type
=
event
.
type
var
globalX
=
event
.
globalX
var
globalY
=
event
.
globalY
var
timestamp
=
event
.
timestamp
var
message
=
'
type--
'
+
type
+
'
,globalX--
'
+
globalX
+
'
,globalY--
'
+
globalY
+
'
,timestamp--
'
+
timestamp
;
prompt
.
showToast
({
message
:
'
dragEnd:
\n
'
+
message
});
},
dragEnter
(
event
){
var
type
=
event
.
type
var
globalX
=
event
.
globalX
var
globalY
=
event
.
globalY
var
timestamp
=
event
.
timestamp
var
message
=
'
type--
'
+
type
+
'
,globalX--
'
+
globalX
+
'
,globalY--
'
+
globalY
+
'
,timestamp--
'
+
timestamp
;
prompt
.
showToast
({
message
:
'
dragEnter:
\n
'
+
message
});
},
dragOver
(
event
){
var
type
=
event
.
type
var
globalX
=
event
.
globalX
var
globalY
=
event
.
globalY
var
timestamp
=
event
.
timestamp
var
message
=
'
type--
'
+
type
+
'
,globalX--
'
+
globalX
+
'
,globalY--
'
+
globalY
+
'
,timestamp--
'
+
timestamp
;
prompt
.
showToast
({
message
:
'
dragOver:
\n
'
+
message
});
},
dragLeave
(
event
){
var
type
=
event
.
type
var
globalX
=
event
.
globalX
var
globalY
=
event
.
globalY
var
timestamp
=
event
.
timestamp
var
message
=
'
type--
'
+
type
+
'
,globalX--
'
+
globalX
+
'
,globalY--
'
+
globalY
+
'
,timestamp--
'
+
timestamp
;
prompt
.
showToast
({
message
:
'
dragLeave:
\n
'
+
message
});
},
drop
(
event
){
var
type
=
event
.
type
var
globalX
=
event
.
globalX
var
globalY
=
event
.
globalY
var
timestamp
=
event
.
timestamp
var
message
=
'
type--
'
+
type
+
'
,globalX--
'
+
globalX
+
'
,globalY--
'
+
globalY
+
'
,timestamp--
'
+
timestamp
;
prompt
.
showToast
({
message
:
'
drop:
\n
'
+
message
});
},
functionTest1
(
event
){
var
function1
=
this
.
$element
(
'
function1
'
);
function1
.
focus
(
true
)
var
rect
=
function1
.
getBoundingClientRect
();
var
width
=
rect
.
width
;
var
height
=
rect
.
height
;
var
left
=
rect
.
left
;
var
top
=
rect
.
top
;
var
message
=
'
width--
'
+
width
+
'
,height--
'
+
height
+
'
,left--
'
+
left
+
'
,top--
'
+
top
;
prompt
.
showToast
({
message
:
'
function1 rect:
\n
'
+
message
});
},
functionTest2
(
event
){
var
function2
=
this
.
$element
(
'
function2
'
);
let
observer
=
function2
.
createIntersectionObserver
({
ratios
:
[
0.2
,
0
],
// number
});
observer
.
observe
((
isVisible
,
ratio
)
=>
{
console
.
info
(
'
this element is
'
+
isVisible
+
'
ratio is
'
+
ratio
)
prompt
.
showToast
({
message
:
'
function2 observer:
\n
'
+
'
isVisible--
'
+
isVisible
+
'
,ratio--
'
+
ratio
});
})
observer
.
unobserve
()
},
functionTest3
(
event
){
var
function3
=
this
.
$element
(
'
function3
'
);
var
animation
=
function3
.
animate
(
frames
,
options
);
animation
.
play
()
animation
.
onfinish
=
function
(){
prompt
.
showToast
({
message
:
'
The animation is finished.
'
});
};
animation
.
oncancel
=
function
(){
prompt
.
showToast
({
message
:
'
The animation is canceled.
'
});
};
animation
.
onrepeat
=
function
(){
prompt
.
showToast
({
message
:
'
The animation is repeated.
'
});
};
setTimeout
(()
=>
{
animation
.
reverse
()
},
500
)
setTimeout
(()
=>
{
animation
.
pause
()
},
1000
)
setTimeout
(()
=>
{
animation
.
cancel
()
},
1500
)
},
functionTest4
(){
var
function4
=
this
.
$element
(
'
function4
'
);
function4
.
start
();
prompt
.
showToast
({
message
:
'
function4 video start.
'
});
},
functionTest5
(){
var
function5
=
this
.
$element
(
'
function5
'
);
function5
.
pause
();
prompt
.
showToast
({
message
:
'
function5 video pause.
'
})
},
functionTest6
(){
var
function6
=
this
.
$element
(
'
function6
'
);
function6
.
setCurrentTime
({
currenttime
:
2
});
prompt
.
showToast
({
message
:
'
function6 video setCurrentTime.
'
})
},
functionTest7
(){
var
function7
=
this
.
$element
(
'
function7
'
);
function7
.
requestFullscreen
({
screenOrientation
:
"
default
"
});
prompt
.
showToast
({
message
:
'
function7 video requestFullscreen.
'
})
},
functionTest8
(){
var
function8
=
this
.
$element
(
'
function8
'
);
function8
.
exitFullscreen
();
prompt
.
showToast
({
message
:
'
function8 video exitFullscreen.
'
})
},
functionTest9
(){
var
function9
=
this
.
$element
(
'
function9
'
);
function9
.
stop
();
prompt
.
showToast
({
message
:
'
function9 video stop.
'
})
},
reachStart
(){
prompt
.
showToast
({
message
:
'
reachStart
'
});
},
reachEnd
(){
prompt
.
showToast
({
message
:
'
reachEnd
'
});
},
reachTop
(){
prompt
.
showToast
({
message
:
'
reachTop
'
});
},
reachBottom
(){
prompt
.
showToast
({
message
:
'
reachBottom
'
});
},
prepared
()
{
prompt
.
showToast
({
message
:
'
prepared
'
});
},
start
()
{
prompt
.
showToast
({
message
:
'
start
'
});
},
pause
()
{
prompt
.
showToast
({
message
:
'
pause
'
});
},
finish
()
{
prompt
.
showToast
({
message
:
'
finish
'
});
},
error
()
{
prompt
.
showToast
({
message
:
'
error
'
});
},
seeking
()
{
prompt
.
showToast
({
message
:
'
seeking
'
});
},
seeked
()
{
prompt
.
showToast
({
message
:
'
seeked
'
});
},
timeupdate
()
{
prompt
.
showToast
({
message
:
'
timeupdate
'
});
},
fullscreenchange
()
{
prompt
.
showToast
({
message
:
'
fullscreenchange
'
});
},
stop
()
{
prompt
.
showToast
({
message
:
'
stop
'
});
}
}
//export default {
// data: {
// title: '',
// time: '',
// controls: false,
// loop: false,
// videoSpeed: 1.0
// },
// prepared(data) {
// this.title = '视频准备完成,时间:' + data.duration + 's';
// },
// startVideo() {
// this.title = "视频播放"
// },
// pauseVideo() {
// this.title = "暂停播放"
// },
// finishVideo() {
// this.title = "播放结束"
// },
// errorVideo() {
// this.title = "播放失败"
// },
// seekingVideo(data) {
// this.title = '操作进度条至:' + data.currenttime + 's';
// },
// seekedVideo(data) {
// this.title = '操作进度条结束,转至:' + data.currenttime + 's';
// },
// timeupdateVideo(data) {
// this.time = '播放进度: ' + data.currenttime + 's';
// },
// stopVideo() {
// this.title = '操作进度条结束,转至:' + data.currenttime + 's';
// },
// play() {
// this.$element('video_1').start();
// },
// suspend() {
// this.$element('video_1').pause();
// },
// stop() {
// this.$element('video_1').stop();
// },
// stopVideo() {
// this.time = '请求停止播放';
// },
// showControls() {
// this.controls = !this.controls;
// },
// isLoop() {
// this.loop = !this.loop;
// },
// speed(flg) {
// if(flg == '0.5'){
// this.videoSpeed = 0.5;
// }else if(flg == '1'){
// this.videoSpeed = 1.0;
// }else if(flg == '2'){
// this.videoSpeed = 2.0;
// }
// },
// setCurrentTime(flg) {
// let data = {
// currenttime: flg
// }
// this.$element('video_1').setCurrentTime(data);
// },
// requestFullscreen() {
// this.$element('video_1').requestFullscreen({screenOrientation : "default"});
// }
//}
multimedia/audio/audio.iml
0 → 100644
浏览文件 @
5bd1ab66
<?xml version="1.0" encoding="UTF-8"?>
<module
type=
"JAVA_MODULE"
version=
"4"
>
<component
name=
"NewModuleRootManager"
inherit-compiler-output=
"true"
>
<exclude-output
/>
<content
url=
"file://$MODULE_DIR$"
>
<sourceFolder
url=
"file://$MODULE_DIR$/audio_js_standard/audioManager/src/main/java"
isTestSource=
"false"
/>
</content>
<orderEntry
type=
"inheritedJdk"
/>
<orderEntry
type=
"sourceFolder"
forTests=
"false"
/>
</component>
</module>
\ No newline at end of file
multimedia/media/media_js_standard/audioPlayer/audioPlayer.iml
0 → 100644
浏览文件 @
5bd1ab66
<?xml version="1.0" encoding="UTF-8"?>
<module
type=
"JAVA_MODULE"
version=
"4"
>
<component
name=
"NewModuleRootManager"
inherit-compiler-output=
"true"
>
<exclude-output
/>
<content
url=
"file://$MODULE_DIR$"
>
<sourceFolder
url=
"file://$MODULE_DIR$/src/main/java"
isTestSource=
"false"
/>
</content>
<orderEntry
type=
"inheritedJdk"
/>
<orderEntry
type=
"sourceFolder"
forTests=
"false"
/>
</component>
</module>
\ No newline at end of file
multimedia/media/media_js_standard/audioRecorder/audioRecorder.iml
0 → 100644
浏览文件 @
5bd1ab66
<?xml version="1.0" encoding="UTF-8"?>
<module
type=
"JAVA_MODULE"
version=
"4"
>
<component
name=
"NewModuleRootManager"
inherit-compiler-output=
"true"
>
<exclude-output
/>
<content
url=
"file://$MODULE_DIR$"
>
<sourceFolder
url=
"file://$MODULE_DIR$/src/main/java"
isTestSource=
"false"
/>
</content>
<orderEntry
type=
"inheritedJdk"
/>
<orderEntry
type=
"sourceFolder"
forTests=
"false"
/>
</component>
</module>
\ No newline at end of file
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录