Skip to content

X
Xts Acts

OpenHarmony / Xts Acts
接近 2 年 前同步成功

通知 9
Star 22
Fork 0
X
Xts Acts
提交 c5c9209f 编写于 作者: G guoenquan
浏览文件
操作

add arkui test 

Signed-off-by: Nguoenquan <guoenquan1@huawei-partners.com>
上级 ed1c4712
展开全部 隐藏空白更改
内联 并排
Showing with 7449 addition and 0 deletion
arkui/ace_ets_component_apilack/entry/src/main/ets/MainAbility/pages/compomettestjs/CanvasRenderingContext2D/index.css 0 → 100644
浏览文件 @ c5c9209f
/**
* 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);
}
.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%;
}
arkui/ace_ets_component_apilack/entry/src/main/ets/MainAbility/pages/compomettestjs/CanvasRenderingContext2D/index.hml 0 → 100644
浏览文件 @ c5c9209f
<!--/**
* 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>
<text class="sub-title">
方法16
</text>
<canvas style="width: 100%; height: 60px;margin-top: 5px;" ref="function16"></canvas>
<text class="sub-title">
方法17
</text>
<canvas style="width: 100%; height: 60px;margin-top: 5px;" ref="function17"></canvas>
<text class="sub-title">
方法18
</text>
<canvas style="width: 100%; height: 60px;margin-top: 5px;" ref="function18"></canvas>
<text class="sub-title">
方法19
</text>
<canvas style="width: 100%; height: 60px;margin-top: 5px;" ref="function19"></canvas>
<text class="sub-title">
方法20
</text>
<canvas style="width: 100%; height: 60px;margin-top: 5px;" ref="function20"></canvas>
<text class="sub-title">
方法21
</text>
<canvas style="width: 100%; height: 60px;margin-top: 5px;" ref="function21"></canvas>
<text class="sub-title">
方法22
</text>
<canvas style="width: 100%; height: 60px;margin-top: 5px;" ref="function22"></canvas>
</div>
<text class="sub-title">
方法23
</text>
<canvas style="width: 100%; height: 60px;margin-top: 5px;" ref="function23"></canvas>
<text class="sub-title">
方法24
</text>
<canvas style="width: 100%; height: 60px;margin-top: 5px;" ref="function24"></canvas>
<text class="sub-title">
方法25
</text>
<canvas style="width: 100%; height: 60px;margin-top: 5px;" ref="function25"></canvas>
<text class="sub-title">
方法26
</text>
<canvas style="width: 100%; height: 60px;margin-top: 5px;" ref="function26"></canvas>
<text class="sub-title">
方法27
</text>
<canvas style="width: 100%; height: 60px;margin-top: 5px;" ref="function27"></canvas>
<text class="sub-title">
方法28
</text>
<canvas style="width: 100%; height: 60px;margin-top: 5px;" ref="function28"></canvas>
<text class="sub-title">
方法29
</text>
<canvas style="width: 100%; height: 60px;margin-top: 5px;" ref="function29"></canvas>
<text class="sub-title">
方法30
</text>
<canvas style="width: 100%; height: 60px;margin-top: 5px;" ref="function30"></canvas>
</div>
</div>
</div>
arkui/ace_ets_component_apilack/entry/src/main/ets/MainAbility/pages/compomettestjs/CanvasRenderingContext2D/index.js 0 → 100644
浏览文件 @ c5c9209f
/**
* 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()
this.functionTouch16()
this.functionTouch17()
this.functionTouch18()
this.functionTouch19()
this.functionTouch20()
this.functionTouch21()
this.functionTouch22()
},
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);
},
functionTouch16() {
const el =this.$refs.function16;
const ctx = el.getContext('3d');
ctx.strokeRect(10, 10, 25, 25);
ctx.scale3d(1.5, 1.5, 1.5);// scale3d to 200%
ctx.strokeRect(10, 10, 20, 20);
},
functionTouch17() {
const el =this.$refs.function17;
const ctx = el.getContext('2d');
ctx.strokeRect(10, 10, 25, 25);
ctx.scaleX(1.5);// scaleX to 200%
ctx.strokeRect(10, 10, 20, 20);
},
functionTouch18() {
const el =this.$refs.function18;
const ctx = el.getContext('2d');
ctx.strokeRect(10, 10, 25, 25);
ctx.scaleY(1.5);// scaleY to 200%
ctx.strokeRect(10, 10, 20, 20);
},
functionTouch19() {
const el =this.$refs.function19;
const ctx = el.getContext('2d');
ctx.strokeRect(10, 10, 25, 25);
ctx.scaleZ(1.5);// scaleZ to 200%
ctx.strokeRect(10, 10, 20, 20);
},
functionTouch20() {
const el =this.$refs.function20;
const ctx = el.getContext('2d');
ctx.strokeRect(10, 10, 25, 25);
ctx.skew(1.5, 1.5);// skew to 200%
ctx.strokeRect(10, 10, 20, 20);
},
functionTouch21() {
const el =this.$refs.function21;
const ctx = el.getContext('2d');
ctx.strokeRect(10, 10, 25, 25);
ctx.skewX(1.5);// skew to 200%
ctx.strokeRect(10, 10, 20, 20);
},
functionTouch22() {
const el =this.$refs.function22;
const ctx = el.getContext('2d');
ctx.strokeRect(10, 10, 25, 25);
ctx.skewY(1.5);// skew to 200%
ctx.strokeRect(10, 10, 20, 20);
},
functionTouch23() {
const el =this.$refs.function22;
const ctx = el.getContext('2d');
ctx.strokeRect(10, 10, 25, 25);
ctx.perspective(1.5);// perspective to 200%
ctx.strokeRect(10, 10, 20, 20);
},
functionTouch24() {
const el =this.$refs.function15;
const ctx = el.getContext('2d');
ctx.fillRect(10, 10, 30, 30);
ctx.translateX(50);
ctx.fillRect(10, 10, 30, 30);
},
functionTouch25() {
const el =this.$refs.function15;
const ctx = el.getContext('2d');
ctx.fillRect(10, 10, 30, 30);
ctx.translateY(10);
ctx.fillRect(10, 10, 30, 30);
},
functionTouch26() {
const el =this.$refs.function15;
const ctx = el.getContext('2d');
ctx.fillRect(10, 10, 30, 30);
ctx.translateY(10);
ctx.fillRect(10, 10, 30, 30);
},
functionTouch27() {
const el =this.$refs.function15;
const ctx = el.getContext('2d');
ctx.fillRect(10, 10, 30, 30);
ctx.rotate3d(10,10,10);
ctx.fillRect(10, 10, 30, 30);
},
functionTouch28() {
const el =this.$refs.function15;
const ctx = el.getContext('2d');
ctx.fillRect(10, 10, 30, 30);
ctx.rotateX(10);
ctx.fillRect(10, 10, 30, 30);
},
functionTouch29() {
const el =this.$refs.function15;
const ctx = el.getContext('2d');
ctx.fillRect(10, 10, 30, 30);
ctx.rotateY(10);
ctx.fillRect(10, 10, 30, 30);
},
functionTouch30() {
const el =this.$refs.function15;
const ctx = el.getContext('2d');
ctx.fillRect(10, 10, 30, 30);
ctx.rotateZ(10);
ctx.fillRect(10, 10, 30, 30);
},
}
\ No newline at end of file
arkui/ace_ets_component_apilack/entry/src/main/ets/MainAbility/pages/compomettestjs/jsCanavas/index.css 0 → 100644
浏览文件 @ c5c9209f
/**
* 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);
}
.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%;
}
arkui/ace_ets_component_apilack/entry/src/main/ets/MainAbility/pages/compomettestjs/jsCanavas/index.hml 0 → 100644
浏览文件 @ c5c9209f
<!--/**
* 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>
arkui/ace_ets_component_apilack/entry/src/main/ets/MainAbility/pages/compomettestjs/jsCanavas/index.js 0 → 100644
浏览文件 @ c5c9209f
/**
* 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);
},
functionTouch16() {
const el =this.$refs.function15;
const ctx = el.getContext('2d');
ctx.fillRect(10, 10, 30, 30);
ctx.translate3d(50, 10,10);
ctx.fillRect(10, 10, 30, 30);
},
functionTouch17() {
const el =this.$refs.function15;
const ctx = el.getContext('2d');
ctx.fillRect(10, 10, 30, 30);
ctx.matrix(40, 10);
ctx.fillRect(10, 10, 30, 30);
},
functionTouch18() {
const el =this.$refs.function15;
const ctx = el.getContext('2d');
ctx.fillRect(10, 10, 30, 30);
ctx.matrix3d(50, 10,20);
ctx.fillRect(10, 10, 30, 30);
},
functionTouch19() {
const el =this.$refs.function15;
const ctx = el.getContext('2d');
ctx.fillRect(10, 10, 30, 30);
ctx.translateX(5);
ctx.fillRect(10, 10, 30, 30);
},
}
\ No newline at end of file
arkui/ace_ets_component_apilack/entry/src/main/ets/MainAbility/pages/compomettestjs/jsTcSingn/index.css 0 → 100644
浏览文件 @ c5c9209f
/**
* 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 {
display: flex;
flex-direction: column;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
}
.testDiv {
display: flex;
flex-direction: column;
left: 0px;
top: 0px;
width: 100%;
}
.title {
font-size: 40px;
text-align: center;
width: 100%;
height: 60px;
margin: 10px;
padding: 10px;
}
@media screen and (orientation: landscape) {
.title {
font-size: 60px;
}
}
@media screen and (device-type: tablet) and (orientation: landscape) {
.title {
font-size: 100px;
}
}
\ No newline at end of file
arkui/ace_ets_component_apilack/entry/src/main/ets/MainAbility/pages/compomettestjs/jsTcSingn/index.hml 0 → 100644
浏览文件 @ c5c9209f
<!--/**
* 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 id="testDiv" class="testDiv">
</div>
<input id="function1" class="title" onclick="functionTest1">
Element setStyle
</input>
<input id="function2" class="title" onclick="functionTest2">
Element setAttribute
</input>
<input id="function3" class="title" onclick="functionTest3">
Element addChild
</input>
<input id="function4" class="title" onclick="functionTest4">
Element rotation
</input>
<input id="function5" class="title" onclick="functionTest5">
watch test
</input>
<input id="function6" class="title" onclick="functionTest6">
set/delete test
</input>
<input id="function7" class="title" onclick="functionTest7">
set/delete test
</input>
</div>
arkui/ace_ets_component_apilack/entry/src/main/ets/MainAbility/pages/compomettestjs/jsTcSingn/index.js 0 → 100644
浏览文件 @ c5c9209f
/**
* 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: "",
watchVal:"123",
Version:"1.0"
},
onInit() {
this.$watch("watchVal", "onwatch")
},
functionTest1() {
var function1 = this.$element('function1');
var result = function1.setStyle("font-size", "50px")
console.info('setStyle result is ' + result)
},
functionTest2() {
var function2 = this.$element('function2');
function2.setAttribute("type", "password")
},
functionTest3() {
var elem = dom.createElement("button");
elem.setAttribute("value", "buttoncreateElement");
var testDiv = this.$element('testDiv');
testDiv.addChild(elem);
},
functionTest4() {
var function2 = this.$element('function2');
function2.rotation({
focus: true
})
},
functionTest5() {
//将watchVal从123改为456，触发onwatch事件
this.watchVal = "456"
},
functionTest6() {
this.$set('Version', 2);
console.info("Version = " + this.Version);
this.$delete('Version');
// log print:Version = undefined
console.info("Version = " + this.Version);
},
functionTest7() {
this.$tc('Version', 2);
console.info("Version = " + this.Version);
this.$delete('Version');
// log print:Version = undefined
console.info("Version = " + this.Version);
},
onwatch(newVal, oldVal) {
console.log("watch newVal = " + newVal + ",oldVal =" + oldVal)
},
}
arkui/ace_ets_component_apilack/entry/src/main/ets/MainAbility/pages/conponentadd/AlphabetIndexer_y.ets 0 → 100644
浏览文件 @ c5c9209f
/*
* 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.
*/
@Entry
@Component
struct alphabetIndexer {
private value: string[] = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I']
private value1: string[] = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I']
@State active: boolean = false
private content: string = "AlphabetIndexer Page"
onPageShow() {
console.info('alphabetIndexer page show called');
}
onBuildDone() {
console.info('alphabetIndexer page build done called');
}
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Text(`${this.content}`)
.fontSize(50)
.fontWeight(FontWeight.Bold)
Text("AlphabetIndexer0")
AlphabetIndexer({ arrayValue: this.value, selected: 0 })
.color('#FF00DDDD')
.selectedColor(0xffffff)
.key('alphabetIndexer')
.popupColor('#FF737373')
.selectedBackgroundColor('#FF0000E6')
.popupBackground('#FF00DDDD')
.usingPopup(true)
.popupPosition({x:90.0, y:50.0})
.selectedFont({ size: 16, weight: FontWeight.Regular })
.popupFont({ size: 30, weight: FontWeight.Bolder, style: FontStyle.Normal })
.itemSize(28)
.alignStyle(IndexerAlign.Left)
.onSelected((index: number) => {
console.info(this.value[index] + ' on selected')
})
Text("AlphabetIndexer1")
AlphabetIndexer({ arrayValue: this.value1, selected: 0 })
.selectedColor(0xffffff)
.key('alphabetIndexer1')
.popupColor('#FF737373')
.selectedBackgroundColor('#FF0000E6')
.popupBackground('#FF00DDDD')
.usingPopup(false)
.popupPosition({x:90.0, y:50.0})
.selectedFont({ size: 16, weight: FontWeight.Lighter })
.popupFont({ size: 30, weight: FontWeight.Bold, style: FontStyle.Italic })
.itemSize(28)
.alignStyle(IndexerAlign.Right)
.margin({ left: 50 })
.onSelected((index: number) => {
console.info(this.value[index] + ' on selected')
})
}
}
}
arkui/ace_ets_component_apilack/entry/src/main/ets/MainAbility/pages/conponentadd/WebPageg.ets 0 → 100644
浏览文件 @ c5c9209f
// @ts-nocheck
/*
* 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.
*/
@Entry
@Component
struct WebComponent {
@State javaScriptAccess: boolean = true;
@State fileAccess: boolean = true;
@State geolocationAccess: boolean = true;
@State imageAccess: boolean = true;
@State domStorageAccess: boolean = false;
@State onlineImageAccess: boolean = true;
@State zoomAccess: boolean = true;
@State accessBackward: boolean = true;
@State accessForward: boolean = true;
@State accessStep: boolean = true;
@State password: boolean = true;
@State tableData: boolean = true;
@State wideViewModeAccess: boolean = true;
@State overviewModeAccess: boolean = true;
@State databaseAccess: boolean = true;
@State textZoomAtio: number = 1;
@State mixedMode: MixedMode = MixedMode.None
@State cacheMode: CacheMode = CacheMode.None
@State getHitTest: HitTestType = HitTestType.Unknown
controller: WebController = new WebController();
cookie: WebCookie = new WebCookie()
testObj = {
test: (data1, data2, data3) => {
console.log('ets test web : ' + data1)
console.log('ets test web : ' + data2)
console.log('ets test web : ' + data3)
return 'AceString'
},
toString: () => {
console.log('ets test web : ++++++toString')
}
}
build() {
Column() {
Row() {
Button('混合内容')
.margin({ right: 10 })
.fontSize(15)
.width(150)
.onClick(() => {
this.mixedMode = MixedMode.All
})
Button('混合内容兼容性模式')
.margin({ right: 10 })
.fontSize(15)
.width(150)
.onClick(() => {
this.mixedMode = MixedMode.Compatible
})
Button('不允许混合内容')
.margin({ right: 10 })
.fontSize(15)
.width(150)
.onClick(() => {
this.mixedMode = MixedMode.None
})
Button('确认弹框')
.margin({ right: 10 })
.fontSize(15)
.width(150)
.onClick(() => {
AlertDialog.show(
{
title: 'title',
message: 'text',
primaryButton: {
value: 'cancel',
action: () => {
console.info('Callback when the first button is clicked')
}
},
secondaryButton: {
value: 'ok',
action: () => {
console.info('Callback when the second button is clicked')
}
},
cancel: () => {
console.info('Closed callbacks')
}
}
)
})
Button('警告弹框')
.margin({ right: 10 })
.fontSize(15)
.width(150)
.onClick(() => {
AlertDialog.show(
{
title: 'title',
message: 'text',
confirm: {
value: 'button',
action: () => {
console.info('Button-clicking callback')
}
},
cancel: () => {
console.info('Closed callbacks')
}
}
)
})
}
Row() {
Button('先缓存后在线')
.margin({ right: 10 })
.fontSize(15)
.width(150)
.onClick(() => {
this.cacheMode = CacheMode.Online
})
Button('加载缓存')
.margin({ right: 10 })
.fontSize(15)
.width(150)
.onClick(() => {
this.cacheMode = CacheMode.Only
})
Button('加载在线')
.margin({ right: 10 })
.fontSize(15)
.width(150)
.onClick(() => {
this.cacheMode = CacheMode.None
})
Button('设置cookie')
.margin({ right: 10 })
.fontSize(15)
.width(150)
.onClick(() => {
this.cookie.setCookie()
})
Button('保存cookie')
.margin({ right: 10 })
.fontSize(15)
.width(150)
.onClick(() => {
this.cookie.saveCookie()
})
}
Row() {
Button(this.accessBackward ? '页面可后退' : '页面不可后退')
.margin({ right: 10 })
.fontSize(15)
.width(150)
.onClick(() => {
this.accessBackward = this.controller.accessBackward()
})
Button(this.accessForward ? '页面可前进' : '页面不可前进')
.margin({ right: 10 })
.fontSize(15)
.width(150)
.onClick(() => {
this.accessForward = this.controller.accessForward()
})
Button(this.accessStep ? '页面可前进1步' : '页面不可前进1步')
.margin({ right: 10 })
.fontSize(15)
.width(150)
.onClick(() => {
this.accessStep = this.controller.accessStep(1)
})
Button('清空JavaScript方法')
.margin({ right: 10 })
.fontSize(15)
.width(150)
.onClick(() => {
this.controller.deleteJavaScriptRegister('objName')
})
Button('Web组件获焦')
.margin({ right: 10 })
.fontSize(15)
.width(150)
.onClick(() => {
this.controller.requestFocus()
})
Button('停止页面加载')
.margin({ right: 10 })
.fontSize(15)
.width(150)
.onClick(() => {
this.controller.stop()
})
}
Row() {
Button('页面后退')
.margin({ right: 10 })
.fontSize(15)
.width(150)
.onClick(() => {
this.controller.backward()
})
Button('页面前进')
.margin({ right: 10 })
.fontSize(15)
.width(150)
.onClick(() => {
this.controller.forward()
})
Button('清理历史')
.margin({ right: 10 })
.fontSize(15)
.width(150)
.onClick(() => {
this.controller.clearHistory()
})
Button('获取点击对象类型')
.margin({ right: 10 })
.fontSize(15)
.width(150)
.onClick(() => {
let getHitTest = this.controller.getHitTest()
if (getHitTest == HitTestType.Edit) {
console.log('this getHitTest : Edit');
} else if (getHitTest == HitTestType.Email) {
console.log('this getHitTest : Email');
} else if (getHitTest == HitTestType.Http) {
console.log('this getHitTest : Http');
} else if (getHitTest == HitTestType.HttpImg) {
console.log('this getHitTest : HttpImg');
} else if (getHitTest == HitTestType.Img) {
console.log('this getHitTest : Img');
} else if (getHitTest == HitTestType.Map) {
console.log('this getHitTest : Map');
} else if (getHitTest == HitTestType.Phone) {
console.log('this getHitTest : Phone');
} else {
getHitTest = HitTestType.Unknown
console.log('this getHitTest : Unknown');
}
})
Button('加载数据')
.margin({ right: 10 })
.fontSize(15)
.width(150)
.onClick(() => {
this.controller.loadData({
data: "<html><body bgcolor=\"white\">Source : <pre> source:</pre></body></html>",
mimetype: "text/html",
encoding: "UTF-8",
baseUrl: "https://www.baidu.com",
historyUrl: "https://www.gitee.com"
})
})
Button('加载URL')
.margin({ right: 10 })
.fontSize(15)
.width(150)
.onClick(() => {
this.controller.loadUrl({
url: "https://www.baidu.com",
additionalHttpHeaders: [{ key: 'div', value: 'div' }]
})
})
}
Row() {
Button('页面重新激活')
.margin({ right: 10 })
.fontSize(15)
.width(150)
.onClick(() => {
this.controller.onActive()
})
Button('页面暂停渲染')
.margin({ right: 10 })
.fontSize(15)
.width(150)
.onClick(() => {
this.controller.onInactive()
})
Button('刷新页面')
.margin({ right: 10 })
.fontSize(15)
.width(150)
.onClick(() => {
this.controller.refresh()
})
Button('注册JavaScript')
.margin({ right: 10 })
.fontSize(15)
.width(150)
.onClick(() => {
this.controller.registerJavaScriptProxy({
obj: this.testObj,
name: 'objName',
methodList: ['test', 'toString']
})
})
Button('执行JavaScript脚本')
.margin({ right: 10 })
.fontSize(15)
.width(150)
.onClick(() => {
this.controller.runJavaScript({
script: "test()",
callback: (result: string) => {
console.log('run javascript result : ' + result);
}
})
})
}
Row() {
Button('onNewRequest')
.margin({ right: 10 })
.fontSize(15)
.width(150)
.onClick(() => {
this.controller.onNewRequest()
})
Button('onStartContinuation')
.margin({ right: 10 })
.fontSize(15)
.width(150)
.onClick(() => {
this.controller.onStartContinuation()
})
Button('onSaveData')
.margin({ right: 10 })
.fontSize(15)
.width(150)
.onClick(() => {
this.controller.onSaveData()
})
Button('onRestoreData')
.margin({ right: 10 })
.fontSize(15)
.width(150)
.onClick(() => {
this.controller.onRestoreData()
})
Button('onCompleteContinuation')
.margin({ right: 10 })
.fontSize(15)
.width(150)
.onClick(() => {
this.controller.onCompleteContinuation()
})
Button('onConfigurationUpdated')
.margin({ right: 10 })
.fontSize(15)
.width(150)
.onClick(() => {
this.controller.onConfigurationUpdated()
})
Button('extendViewModel')
.margin({ right: 10 })
.fontSize(15)
.width(150)
.onClick(() => {
this.controller.extendViewModel()
})
}
Web({ src: $rawfile('indextest.html'), controller: this.controller })
.domStorageAccess(this.domStorageAccess)
.fileAccess(this.fileAccess)
.geolocationAccess(this.geolocationAccess)
.imageAccess(this.imageAccess)
.javaScriptAccess(this.javaScriptAccess)
.mixedMode(this.mixedMode)
.onlineImageAccess(this.onlineImageAccess)
.zoomAccess(this.zoomAccess)
.cacheMode(this.cacheMode)
.tableData(this.tableData)
.wideViewModeAccess(this.wideViewModeAccess)
.overviewModeAccess(this.overviewModeAccess)
.textZoomAtio(this.textZoomAtio)
.databaseAccess(this.databaseAccess)
.javaScriptProxy({
obj: this.testObj,
name: 'objName',
methodList: ['test', 'toString']
})
.password(this.password)
.onPageBegin((e) => {
console.log("webTest : onPageBegin: " + e.url);
})
.onPageEnd(e => {
console.log("webTest : onPageEnd: " + e.url);
this.controller.runJavaScript('test()')
})
.onProgressChange((e) => {
console.log("webTest : onProgressChange: " + e.newProgress);
})
.onTitleReceive((e) => {
console.log("webTest : onProgressChange: " + e.title);
})
.onDownloadStart((e) => {
console.log("webTest : onDownloadStart url : " + e.url);
console.log("webTest : onDownloadStart userAgent : " + e.userAgent);
console.log("webTest : onDownloadStart contentDisposition : " + e.contentDisposition);
console.log("webTest : onDownloadStart mimetype : " + e.mimetype);
console.log("webTest : onDownloadStart contentLength : " + e.contentLength);
})
.onGeolocationHide(() => {
console.log("webTest : onGeolocationHide: ");
})
.onGeolocationShow((e) => {
console.log("webTest : onDownloadStart origin : " + e.origin);
e.geolocation.invoke(e.origin, true, true)
console.log("webTest : onDownloadStart origin : " + e.geolocation.invoke);
})
.onRequestSelected(() => {
console.log("webTest : onRequestSelected: ");
})
.onAlert((e) => {
console.log("webTest : onAlert: " + e.url);
console.log("webTest : onAlert: " + e.message);
console.log("webTest : onAlert .result : " + e.result);
console.log("webTest : onAlert .result : " + e.result.handleCancel());
console.log("webTest : onAlert .result : " + e.result.handleConfirm());
})
.onBeforeUnload((e) => {
console.log("webTest : onBeforeUnload: " + e.message);
console.log("webTest : onBeforeUnload .result : " + e.result);
console.log("webTest : onBeforeUnload .result : " + e.result.handleCancel());
console.log("webTest : onBeforeUnload .result : " + e.result.handleConfirm());
})
.onConfirm((e) => {
console.log("webTest : onConfirm: " + e.url);
console.log("webTest : onConfirm: " + e.message);
console.log("webTest : onConfirm .result : " + e.result);
console.log("webTest : onConfirm .result : " + e.result.handleCancel());
console.log("webTest : onConfirm .result : " + e.result.handleConfirm());
})
.onConsole((e) => {
console.log("webTest : onConsole .message : " + e.message);
console.log("webTest : onConsole .message : " + e.message.getMessage());
console.log("webTest : onConsole .message : " + e.message.getSourceId());
console.log("webTest : onConsole .message : " + e.message.getLineNumber());
let level = e.message.getMessageLevel()
if (level == MessageLevel.Debug) {
console.log("webTest : onConsole: level Debug");
} else if (level == MessageLevel.Error) {
console.log("webTest : onConsole: level Error");
} else if (level == MessageLevel.Info) {
console.log("webTest : onConsole: level Info");
} else if (level == MessageLevel.Log) {
console.log("webTest : onConsole: level Log");
} else {
level = MessageLevel.Warn
console.log("webTest : onConsole: level Warn");
}
})
.onErrorReceive((e) => {
console.log("webTest : onErrorReceive .request : " + e.request);
console.log("webTest : onErrorReceive .request : " + e.request.getRequestHeader());
console.log("webTest : onErrorReceive .request : " + e.request.getRequestUrl());
console.log("webTest : onErrorReceive .request : " + e.request.isRequestGesture());
console.log("webTest : onErrorReceive .request : " + e.request.isMainFrame());
console.log("webTest : onErrorReceive .request : " + e.request.isRedirect());
console.log("webTest : onErrorReceive .error : " + e.error);
console.log("webTest : onErrorReceive .error : " + e.error.getErrorInfo());
console.log("webTest : onErrorReceive .error : " + e.error.getErrorCode());
})
.onHttpErrorReceive((e) => {
console.log("webTest : onHttpErrorReceive .request : " + e.request);
console.log("webTest : onHttpErrorReceive .request : " + e.request.getRequestHeader());
console.log("webTest : onHttpErrorReceive .request : " + e.request.getRequestUrl());
console.log("webTest : onHttpErrorReceive .request : " + e.request.isRequestGesture());
console.log("webTest : onHttpErrorReceive .request : " + e.request.isMainFrame());
console.log("webTest : onHttpErrorReceive .request : " + e.request.isRedirect());
console.log("webTest : onHttpErrorReceive .error : " + e.error);
console.log("webTest : onHttpErrorReceive .error : " + e.error.getErrorInfo());
console.log("webTest : onHttpErrorReceive .error : " + e.error.getErrorCode());
})
.onRefreshAccessedHistory((e) => {
console.log("webTest : onRefreshAccessedHistory .url : " + e.url);
console.log("webTest : onRefreshAccessedHistory .refreshed : " + e.refreshed);
})
.onUrlLoadIntercept((e) => {
console.log("webTest : onUrlLoadIntercept .data : " + e.data);
})
.onSslErrorReceive((e) => {
console.log("webTest : onSslErrorReceive .handle : " + e.handle);
console.log("webTest : onSslErrorReceive .error : " + e.error);
})
.onRenderExited((e) => {
console.log("webTest : onRenderExited .detail : " + JSON.stringify(e.detail));
})
.onFileSelectorShow((e) => {
console.log("webTest : onFileSelectorShow .callback : " + e.callback);
console.log("webTest : onFileSelectorShow .fileSelector : " + e.fileSelector);
})
}
}
}
\ No newline at end of file
arkui/ace_ets_component_apilack/entry/src/main/ets/MainAbility/pages/conponentadd/animatorOption_y.ets 0 → 100644
浏览文件 @ c5c9209f
// @ts-nocheck
/**
* 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.
*/
import animator from '@ohos.animator';
import prompt from '@system.prompt';
@Entry
@Component
struct ColumnExample {
@State divWidth: number = 120;
@State divHeight: number = 120;
@State animation: AnimatorResult = animator.createAnimator({
duration: 3000,
fill: 'forwards',
direction: "normal",
begin: 200,
end: 270
});
onPageShow() {
this.animation.onrepeat(() => {
var repeatoptions = {
duration: 2000,
iterations: 1,
direction: 'alternate',
begin: 180,
end: 240
};
this.animation.update(repeatoptions);
this.animation.play();
});
}
build() {
Column() {
Column() {
Column() {
Column().width(this.divWidth).height(this.divHeight).backgroundColor(0xAFEEEE)
}.width('100%')
}.width('100%').padding({ top: 5 })
Column() {
Row() {
Button('play').borderRadius(8).backgroundColor(0x317aff).width(90).onClick(() => {
this.animation.onframe((value) => {
this.divWidth = value
this.divHeight = value
});
this.animation.play();
});
Button('update').borderRadius(8).backgroundColor(0x317aff).width(90).onClick(() => {
var newoptions = {
duration: 5000,
iterations: 2,
begin: 120,
end: 180
};
this.animation.update(newoptions);
this.animation.play();
});
Button('create').borderRadius(8).backgroundColor(0x317aff).width(90).onClick(() => {
var newoptions = {
duration: 5000,
easing: 'friction',
delay: 0,
fill: 'forwards',
direction: "normal",
iterations: 2,
begin: 120,
end: 180
};
this.animation.create(newoptions);
});
}.margin({ top: 5 })
Row() {
Button('pause').borderRadius(8).backgroundColor(0x317aff).width(90).onClick(() => {
this.animation.pause();
});
Button('finish').borderRadius(8).backgroundColor(0x317aff).width(90).onClick(() => {
this.animation.onfinish(() => {
prompt.showToast({
message: 'finish'
})
});
this.animation.finish();
});
}.margin({ top: 5 })
Row() {
Button('cancel').borderRadius(8).backgroundColor(0x317aff).width(90).onClick(() => {
this.animation.cancel();
});
Button('reverse').borderRadius(8).backgroundColor(0x317aff).width(90).onClick(() => {
this.animation.reverse();
});
}.margin({ top: 5 })
}.margin({ top: 30 })
}
}
}
arkui/ace_ets_component_apilack/entry/src/main/ets/MainAbility/pages/conponentadd/common_y.ets 0 → 100644
浏览文件 @ c5c9209f
/**
* 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 Log from '../common/Log.ets';
import inputEventClient from '@ohos.multimodalInput.inputEventClient';
const TAG = 'ets_apiLack_add';
@Entry
@Component
export default struct CommonBackgroundBlurStyle {
@State value: string = ''
isEnv:boolean = Environment.EnvProp('accessibilityEnabled', 'default')
configuration : Configuration = {
colorMode: "xxx",
fontScale: 20
}
layoutInfo : LayoutInfo = {
position: {
x:20,
y:30
},
constraint: {}
}
constraint:ConstraintSizeOptions = {
}
onMeasure(children,constraint) {
console.info('onMeasure');
children[0].measure(constraint)
}
onLayout(childen, constraint) {
console.info('onLayout');
childen[0].layout(this.layoutInfo)
}
aboutToAppear() {
Log.showInfo(TAG, `aboutToAppear CommonBackgroundBlurStyle start`)
}
aboutToDisappear() {
Log.showInfo(TAG, `aboutToDisAppear CommonBackgroundBlurStyle end`)
}
onPageHide(): void {
Log.showInfo(TAG, `onPageHide CommonBackgroundBlurStyle start`)
}
onBackPress(): void {
Log.showInfo(TAG, `onBackPress CommonBackgroundBlurStyle start`)
}
@Styles pressedStyles() {
.backgroundColor('red')
.opacity(1)
}
buttonTab(){
let keyEventDown = {
isPressed: true,
keyCode: 2049,
keyDownDuration: 0,
isIntercepted: false
}
let res1 = inputEventClient.injectEvent({KeyEvent: keyEventDown});
let keyEventUp = {
isPressed: false,
keyCode: 2049,
keyDownDuration: 0,
isIntercepted: false
}
let res2 = inputEventClient.injectEvent({KeyEvent: keyEventUp});
}
buttonOnKey(){
let keyEventDown = {
isPressed: true,
keyCode: 2054,
keyDownDuration: 0,
isIntercepted: false
}
let res3 = inputEventClient.injectEvent({KeyEvent: keyEventDown});
let keyEventUp = {
isPressed: false,
keyCode: 2054,
keyDownDuration: 0,
isIntercepted: false
}
let res4 = inputEventClient.injectEvent({KeyEvent: keyEventUp});
}
build() {
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
Text("common-BackgroundBlurStyle")
.width(320)
.height(50)
.fontSize(20)
.opacity(1)
.align(Alignment.TopStart)
.fontColor(0xCCCCCC)
.lineHeight(25)
.border({ width: 1 })
.padding(10)
.textAlign(TextAlign.Center)
.textOverflow({ overflow: TextOverflow.None })
.key("backgroundBlurStyleText")
.backgroundBlurStyle(BlurStyle.Thick)
Text("common-BorderImage")
.width(320)
.height(50)
.fontSize(20)
.opacity(1)
.align(Alignment.TopStart)
.fontColor(0xCCCCCC)
.lineHeight(25)
.border({ width: 1 })
.padding(10)
.textAlign(TextAlign.Center)
.textOverflow({ overflow: TextOverflow.None })
.key("borderImageText")
.hitTestBehavior(HitTestMode.Default)
.borderImage({
source: {
angle: 90,
direction: GradientDirection.Left,
colors: [[0xAEE1E1, 0.0], [0xD3E0DC, 0.3], [0xFCD1D1, 1.0]]
},
slice: { top: 10, bottom: 10, left: 10, right: 10 },
width: { top: "10px", bottom: "10px", left: "10px", right: "10px" },
repeat: RepeatMode.Stretch,
fill: false
})
Text("common-HoverEffectHighlight")
.width(320)
.height(50)
.fontSize(20)
.opacity(1)
.align(Alignment.TopStart)
.fontColor(0xCCCCCC)
.lineHeight(25)
.border({ width: 1 })
.padding(10)
.textAlign(TextAlign.Center)
.textOverflow({ overflow: TextOverflow.None })
.key("hoverEffectText")
.hoverEffect(HoverEffect.Highlight)
Text("common-HoverEffectScale")
.width(320)
.height(50)
.fontSize(20)
.opacity(1)
.align(Alignment.TopStart)
.fontColor(0xCCCCCC)
.lineHeight(25)
.border({ width: 1 })
.padding(10)
.textAlign(TextAlign.Center)
.textOverflow({ overflow: TextOverflow.None })
.key("hoverEffectScaleText")
.hoverEffect(HoverEffect.Scale)
Text("common-OnKeyEvent")
.width(320)
.height(50)
.fontSize(20)
.opacity(1)
.align(Alignment.TopStart)
.fontColor(0xCCCCCC)
.lineHeight(25)
.border({ width: 1 })
.padding(10)
.textAlign(TextAlign.Center)
.textOverflow({ overflow: TextOverflow.None })
.key("onKeyEventText")
Button('common-OnKeyEvent')
.onClick(()=>{
this.buttonTab()
this.buttonOnKey()
})
.key("onKeyEventButton")
.onKeyEvent((event: KeyEvent) => {
if (event.keyCode === 2054) {
console.info("onKeyEvent 2054 inject Success ");
}
if (event.type === KeyType.Down) {
Log.showInfo(TAG, `Down`)
}
if (event.type === KeyType.Up) {
Log.showInfo(TAG, `Up`)
}
Log.showInfo(TAG, 'KeyType:' + event.type + ';keyCode:' + event.keyCode + ';keyText:' + event.keyText)
})
Text("common-TabIndex")
.width(320)
.height(50)
.fontSize(20)
.opacity(1)
.align(Alignment.TopStart)
.fontColor(0xCCCCCC)
.lineHeight(25)
.border({ width: 1 })
.padding(10)
.textAlign(TextAlign.Center)
.textOverflow({ overflow: TextOverflow.None })
.key("tabIndexText")
.tabIndex(1)
Text("common-ParallelGesture" + '\n' + this.value)
.width(320)
.height(100)
.fontSize(12)
.opacity(1)
.align(Alignment.TopStart)
.fontColor(0xCCCCCC)
.lineHeight(15)
.border({ width: 1 })
.padding(10)
.textAlign(TextAlign.Center)
.textOverflow({ overflow: TextOverflow.None })
.key("parallelGestureText")
.parallelGesture(TapGesture().onAction(() => {
// 并行手势
this.value = 'gesture onAction'
}))
Text("common-Sepia")
.width(320)
.height(50)
.fontSize(20)
.opacity(1)
.align(Alignment.TopStart)
.fontColor(0xCCCCCC)
.lineHeight(25)
.border({ width: 1 })
.padding(10)
.textAlign(TextAlign.Center)
.textOverflow({ overflow: TextOverflow.None })
.key("sepiaText")
.backgroundColor('#E78282')
.sepia(1)
Button('Button 1')
.id('target')
Text("common-AlignRules")
.width(260)
.height(50)
.fontSize(20)
.opacity(1)
.align(Alignment.TopStart)
.fontColor(0xCCCCCC)
.lineHeight(25)
.border({ width: 1 })
.padding(10)
.textAlign(TextAlign.Center)
.textOverflow({ overflow: TextOverflow.None })
.key("alignRulesText")
.alignRules({
top: { anchor: 'target', align: VerticalAlign.Bottom },
right: { anchor: "target", align: HorizontalAlign.Center }
})
Text("common-StateStyles")
.width(320)
.height(50)
.fontSize(20)
.opacity(1)
.align(Alignment.TopStart)
.fontColor(0xCCCCCC)
.lineHeight(25)
.border({ width: 1 })
.padding(10)
.textAlign(TextAlign.Center)
.textOverflow({ overflow: TextOverflow.None })
.key("stateStylesText")
.stateStyles({
pressed: this.pressedStyles
})
Text("common-OnVisibleAreaChange")
.width(320)
.height(50)
.fontSize(20)
.opacity(1)
.align(Alignment.TopStart)
.fontColor(0xCCCCCC)
.lineHeight(25)
.border({ width: 1 })
.padding(10)
.textAlign(TextAlign.Center)
.textOverflow({ overflow: TextOverflow.None })
.key("onVisibleAreaChangeText")
Text("common-OnPageHide")
.width(320)
.height(50)
.fontSize(20)
.opacity(1)
.align(Alignment.TopStart)
.fontColor(0xCCCCCC)
.lineHeight(25)
.border({ width: 1 })
.padding(10)
.textAlign(TextAlign.Center)
.textOverflow({ overflow: TextOverflow.None })
.key("onPageHideText")
Text("common-OnBackPress")
.width(320)
.height(50)
.fontSize(20)
.opacity(1)
.align(Alignment.TopStart)
.fontColor(0xCCCCCC)
.lineHeight(25)
.border({ width: 1 })
.padding(10)
.textAlign(TextAlign.Center)
.textOverflow({ overflow: TextOverflow.None })
.key("onBackPressText")
}.width("100%").height("100%")
}
}
arkui/ace_ets_component_apilack/entry/src/main/ets/MainAbility/pages/conponentadd/hitTestMode_y.ets 0 → 100644
浏览文件 @ c5c9209f
/**
* 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 Log from '../common/Log.ets';
const TAG = 'ets_apiLack_add';
@Entry
@Component
struct HitTestMode {
build() {
Column() {
// outer stack 1
Stack() {
Button('outer button')
.onTouch((event) => {
console.info('HitTestMode outer button touched type: ' + event.type)
})
// inner stack
Stack() {
Button('inner button')
.key("innnerButton")
.onTouch((event) => {
console.info('HitTestMode inner button touched type: ' + event.type)
})
}
.key("Block")
.width("100%")
.height("100%")
// .hitTestBehavior(HitTestMode.Block)
.onTouch((event) => {
console.info('HitTestMode inner stack touched type: ' + event.type)
})
Text('Transparent')
.key("Transparent")
// .hitTestBehavior(HitTestMode.Transparent)
.width("100%")
.height("50%")
.onTouch((event) => {
console.info('HitTestMode text touched type: ' + event.type)
let strJson = getInspectorByKey('Transparent');
let obj = JSON.parse(strJson);
console.info("HitTestMode hitTestBehavior is " + obj.$attrs.hitTestBehavior);
let strJson2 = getInspectorByKey('Block');
let obj2 = JSON.parse(strJson2);
console.info("HitTestMode hitTestBehavior is " + obj2.$attrs.hitTestBehavior);
})
}.width(300).height(300).backgroundColor(Color.Gray)
}.width('100%').height('100%')
}
}
arkui/ace_ets_component_apilack/entry/src/main/ets/MainAbility/pages/conponentadd/navigation_y.ets 0 → 100644
浏览文件 @ c5c9209f
// @ts-nocheck
/**
* 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.
*/
import events_emitter from '@ohos.events.emitter';
@Entry
@Component
struct NavigationExample {
private arr: number[] = [0, 1, 2, 3, 4, 5]
@State hideBar: boolean = true
@State toolBar: boolean = true
@State hideToolBar: boolean = false
@State hideTitleBar: boolean = false
@State hideBackButton: boolean = false
@State onActionCalled: boolean = false
@State hideNavBar: boolean = false
@State titleMode: NavigationTitleMode = NavigationTitleMode.Free
private stateChangCallBack = (eventData) => {
if (eventData != null) {
console.info("tabs page state change called:" + JSON.stringify(eventData));
if (eventData.data.vertical != null) {
this.titleMode = eventData.data.titleMode;
}
if (eventData.data.hideToolBar != null) {
this.hideToolBar = parseInt(eventData.data.hideToolBar);
}
if (eventData.data.hideTitleBar != null) {
this.hideTitleBar = parseInt(eventData.data.hideTitleBar);
}
if (eventData.data.hideBackButton != null) {
this.hideBackButton = parseInt(eventData.data.hideBackButton);
}
if (eventData.data.hideNavBar != null) {
this.titleMode = parseInt(eventData.data.titleMode);
}
}
}
onPageShow() {
console.info('progress page show called');
var stateChangeEvent = {
eventId: 135,
priority: events_emitter.EventPriority.LOW
}
events_emitter.on(stateChangeEvent, this.stateChangCallBack)
}
@Builder NavigationTitle() {
Column() {
Text('title')
.width(80)
.height(60)
.fontColor(Color.Blue)
.fontSize(30)
}
.onClick(() => {
console.log("title")
})
}
@Builder NavigationMenus() {
Row() {
Image('images/add.png')
.width(25)
.height(25)
Image('comment/more.png')
.width(25)
.height(25)
.margin({ left: 30 })
}.width(100)
}
build() {
Column() {
Navigation() {
Search({ value: '', placeholder: "" }).width('85%').margin(26)
List({ space: 5, initialIndex: 0 }) {
ForEach(this.arr, (item) => {
ListItem() {
Text('' + item)
.width('90%')
.height(80)
.backgroundColor('#3366CC')
.borderRadius(15)
.fontSize(16)
.textAlign(TextAlign.Center)
}.editable(true)
}, item => item)
}
.listDirection(Axis.Vertical)
.key('Navigation')
.height(300)
.margin({ top: 10, left: 18 })
.width('100%')
Button(this.hideBar ? "tool bar" : "hide bar")
.backgroundColor(0x2788D9).width(200).height(100).fontSize(20)
.key('NavigationContent1')
.onClick(() => {
this.hideBar = !this.hideBar;
console.info('navigationContent1 current action state is: ' + this.hideBar);
try {
var backData = {
data: {
"ACTION": this.hideBar,
}
}
var backEvent = {
eventId: 1366,
priority: events_emitter.EventPriority.LOW
}
console.info("navigationContent1 start to emit action state")
events_emitter.emit(backEvent, backData)
} catch (err) {
console.info("navigationContent1 emit action state err: " + JSON.stringify(err.message))
}
})
.margin({ left: 135, top: 60 })
}
.title(this.NavigationTitle)
.subTitle('subtitle')
.backButtonIcon()
.navBarWidth(5)
.navBarPosition(NavBarPosition.end)
.menus(this.NavigationMenus)
.titleMode(NavigationTitleMode.Free)
.hideTitleBar(false)
.hideNavBar(false)
.hideBackButton(false)
.onTitleModeChanged((titleModel: NavigationTitleMode) => {
console.log('titleMode' + titleModel)
})
.onNavBarStateChange((isVisible: boolean) => {
console.log('isVisible:' + isVisible)
})
.toolBar({ items: [
{ value: 'app', icon: 'images/grid.svg', action: () => {
console.log("app")
} },
{ value: 'add', icon: 'images/add.svg', action: () => {
console.log("add")
} },
{ value: 'collect', icon: 'images/collect.svg', action: () => {
console.log("collect")
} }] })
.hideToolBar(this.hideBar)
}
}
}
\ No newline at end of file
arkui/ace_ets_component_apilack/entry/src/main/ets/MainAbility/pages/conponentadd/ohosPromptg.ets 0 → 100644
浏览文件 @ c5c9209f
// @ts-nocheck
/**
* 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.
*/
import prompt from '@system.prompt';
import prompt from '@ohos.prompt';
import promptAction from '@ohos.promptAction';
import events_emitter from '@ohos.events.emitter';
@Entry
@Component
struct promptExample {
@State text: string = 'item1'
@State color: string = '#000000'
build(){
Column(){
Button('showActionMenu')
.key('button1')
.backgroundColor('#FF0B8FE2')
.fontSize(20)
.margin({top: 20})
.onClick(()=>{
prompt.showActionMenu({
title: 'Title Info',
buttons: [
{
text: this.text,
color: this.color,
},
],
success: function(data) {
console.log('dialog success callback，click button : ' + data.tapIndex);
},
fail: function(data) {
console.log('dialog fail callback' + data.errMsg);
},
});
})
Button('showDialog')
.key('button2')
.backgroundColor('#FF0B8FE2')
.fontSize(20)
.margin({top: 20})
.onClick(()=> {
prompt.showDialog({
title: 'Title Info',
message: 'Message Info',
buttons: [
{
text: this.text,
color: this.color,
},
],
success: function(data) {
console.log('dialog success callback，click button : ' + data.index);
},
cancel: function() {
console.log('dialog cancel callback');
},
});
})
Button('showActionMenu1')
.key('button3')
.backgroundColor('#ffe20b48')
.fontSize(20)
.margin({top: 20})
.onClick(()=>{
prompt.showDialog({
title: 'Title Info',
message: 'Message Info',
buttons: [
{
text: this.text,
color: this.color,
},
],
})
.then(data => {
console.info('showDialog success, click button: ' + data.tapIndex);
Utils.emitEvent('sucessful',422)
})
.catch(data => {
console.info('showDialog error: ' + data.errMsg);
});
})
Button('showDialog1')
.key('button4')
.backgroundColor('#ffe20b56')
.fontSize(20)
.margin({top: 20})
.onClick(()=> {
prompt.showDialog({
title: 'Title Info',
message: 'Message Info',
buttons: [
{
text: this.text,
color: this.color,
},
],
})
.then(data => {
console.info('showDialog success, click button: ' + data.tapIndex);
Utils.emitEvent('sucessful',422)
})
.catch(data => {
console.info('showDialog error: ' + data.errMsg);
});
})
Button('showActionMenu2')
.key('button6')
.backgroundColor('#ffe20b48')
.fontSize(20)
.margin({top: 20})
.onClick(()=>{
promptAction.showDialog({
title: 'Title Info',
message: 'Message Info',
buttons: [
{
text: this.text,
color: this.color,
},
],
})
.then(data => {
console.info('showDialog success, click button: ' + data.tapIndex);
Utils.emitEvent('sucessful',422)
})
.catch(data => {
console.info('showDialog error: ' + data.errMsg);
});
})
Button('showDialog2')
.key('button5')
.backgroundColor('#ffe20b56')
.fontSize(20)
.margin({top: 20})
.onClick(()=> {
promptAction.showDialog({
title: 'Title Info',
message: 'Message Info',
buttons: [
{
text: this.text,
color: this.color,
},
],
})
.then(data => {
console.info('showDialog success, click button: ' + data.tapIndex);
Utils.emitEvent('sucessful',422)
})
.catch(data => {
console.info('showDialog error: ' + data.errMsg);
});
})
}
}
}
\ No newline at end of file
arkui/ace_ets_component_apilack/entry/src/main/ets/MainAbility/pages/conponentadd/ohosRouterA_y.ets 0 → 100644
浏览文件 @ c5c9209f
// @ts-nocheck
/**
* 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.
*/
import router from '@system.router';
import routery from '@ohos.router';
@Entry
@Component
struct OhosRouterA {
build() {
Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center}) {
Text('A Page')
.fontSize(50)
.fontWeight(FontWeight.Bold)
Button('Push')
.key('pushButtonA')
.backgroundColor('#FF0B8FE2')
.fontSize(20)
.margin({top: 20})
.onClick(() => {
router.push({
uri: 'pages/ohosRouterB',
params: {
data: 'B Page'
}
});
});
Button('back')
.key('pushButtonA')
.backgroundColor('#FF0B8FE2')
.fontSize(20)
.margin({top: 20})
.onClick(() => {
router.push({
uri: 'pages/ohosRouterB',
params: {
data: 'B Page'
}
});
});
Button('pushUrl')
.key('pushButtonA1')
.backgroundColor('#FF0B8FE2')
.fontSize(20)
.margin({top: 20})
.onClick(() => {
try {
routery.pushUrl({
url: 'pages/routerpage2',
params: {
data1: 'message',
data2: {
data3: [123, 456, 789]
},
},
}, (err) => {
if (err) {
console.error(`pushUrl failed, code is ${err.code}, message is ${err.message}`);
return;
}
console.info('pushUrl success');
});
} catch (error) {
console.error(`pushUrl args error code is ${error.code}, message is ${error.message}`);
};
});
Button('pushUrl')
.key('pushButtonA1')
.backgroundColor('#FF0B8FE2')
.fontSize(20)
.margin({top: 20})
.onClick(() => {
try {
routery.pushUrl({
url: 'pages/routerpage2',
params: {
data1: 'message',
data2: {
data3: [123, 456, 789]
},
},
}, (err) => {
if (err) {
console.error(`pushUrl failed, code is ${err.code}, message is ${err.message}`);
return;
}
console.info('pushUrl success');
});
} catch (error) {
console.error(`pushUrl args error code is ${error.code}, message is ${error.message}`);
};
});
Button('replaceUrl')
.key('pushButtonA1')
.backgroundColor('#FF0B8FE2')
.fontSize(20)
.margin({top: 20})
.onClick(() => {
try {
routery.replaceUrl({
url: 'pages/detail',
params: {
data1: 'message',
},
}, routery.RouterMode.Standard, (err) => {
if (err) {
console.error(`replaceUrl failed, code is ${err.code}, message is ${err.message}`);
return;
}
console.info('replaceUrl success');
});
} catch (error) {
console.error(`replaceUrl args error code is ${error.code}, message is ${error.message}`);
};
});
Button('replaceUrl')
.key('pushButtonA1')
.backgroundColor('#FF0B8FE2')
.fontSize(20)
.margin({top: 20})
.onClick(() => {
try {
routery.replaceUrl({
url: 'pages/detail',
params: {
data1: 'message',
},
}, (err) => {
if (err) {
console.error(`replaceUrl failed, code is ${err.code}, message is ${err.message}`);
return;
}
console.info('replaceUrl success');
});
} catch (error) {
console.error(`replaceUrl args error code is ${error.code}, message is ${error.message}`);
};
});
Button('clear')
.key('pushButtonA')
.backgroundColor('#FF0B8FE2')
.fontSize(20)
.margin({top: 20})
.onClick(() => {
router.push({
uri: 'pages/ohosRouterB',
params: {
data: 'B Page'
}
});
});
Button('getLength')
.key('pushButtonA')
.backgroundColor('#FF0B8FE2')
.fontSize(20)
.margin({top: 20})
.onClick(() => {
router.push({
uri: 'pages/ohosRouterB',
params: {
data: 'B Page'
}
});
});
Button('enableAlertBeforeBackPage')
.key('pushButtonA')
.backgroundColor('#FF0B8FE2')
.fontSize(20)
.margin({top: 20})
.onClick(() => {
router.push({
uri: 'pages/ohosRouterB',
params: {
data: 'B Page'
}
});
});
Button('enableBackPageAlert')
.key('pushButtonA')
.backgroundColor('#FF0B8FE2')
.fontSize(20)
.margin({top: 20})
.onClick(() => {
routery.push({
uri: 'pages/ohosRouterB',
params: {
data: 'B Page'
}
});
});
Button('disableAlertBeforeBackPage')
.key('pushButtonA')
.backgroundColor('#FF0B8FE2')
.fontSize(20)
.margin({top: 20})
.onClick(() => {
router.push({
uri: 'pages/ohosRouterB',
params: {
data: 'B Page'
}
});
});
}.width('100%').height('100%')
}
}
\ No newline at end of file
arkui/ace_ets_component_apilack/entry/src/main/ets/MainAbility/pages/conponentadd/ohosRouterAg.ets 0 → 100644
浏览文件 @ c5c9209f
// @ts-nocheck
/**
* 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.
*/
import router from '@system.router';
import newrouter from '@ohos.router';
@Entry
@Component
struct OhosRouterA {
build() {
Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center}) {
Text('A Page')
.fontSize(50)
.fontWeight(FontWeight.Bold)
Button('Push')
.key('pushButtonA')
.backgroundColor('#FF0B8FE2')
.fontSize(20)
.margin({top: 20})
.onClick(() => {
router.push({
uri: 'pages/ohosRouterB',
params: {
data: 'B Page'
}
});
});
Button('back')
.key('pushButtonA')
.backgroundColor('#FF0B8FE2')
.fontSize(20)
.margin({top: 20})
.onClick(() => {
router.push({
uri: 'pages/ohosRouterB',
params: {
data: 'B Page'
}
});
});
Button('clear')
.key('pushButtonA')
.backgroundColor('#FF0B8FE2')
.fontSize(20)
.margin({top: 20})
.onClick(() => {
router.push({
uri: 'pages/ohosRouterB',
params: {
data: 'B Page'
}
});
});
Button('getLength')
.key('pushButtonA')
.backgroundColor('#FF0B8FE2')
.fontSize(20)
.margin({top: 20})
.onClick(() => {
router.push({
uri: 'pages/ohosRouterB',
params: {
data: 'B Page'
}
});
});
Button('enableAlertBeforeBackPage')
.key('pushButtonA')
.backgroundColor('#FF0B8FE2')
.fontSize(20)
.margin({top: 20})
.onClick(() => {
router.push({
uri: 'pages/ohosRouterB',
params: {
data: 'B Page'
}
});
});
Button('disableAlertBeforeBackPage')
.key('pushButtonA')
.backgroundColor('#FF0B8FE2')
.fontSize(20)
.margin({top: 20})
.onClick(() => {
router.push({
uri: 'pages/ohosRouterB',
params: {
data: 'B Page'
}
});
});
Button('pushurl1')
.key('pushurlButton1')
.backgroundColor('#FF0B8FE2')
.fontSize(20)
.margin({top: 20})
.onClick(() => {
newrouter.pushurl({
uri: 'pages/ohosRouterB',
params: {
data: 'B Page'
}
});
});
Button('Pushurl2')
.key('pushurlButton1A')
.backgroundColor('#FF0B8FE2')
.fontSize(20)
.margin({top: 20})
.onClick(() => {
newrouter.pushurl({
uri: 'pages/ohosRouterB',
params: {
data: 'B Page'
}
});
},newrouter.RouterMode.Standard);
Button('replaceurl1')
.key('replaceurl1A')
.backgroundColor('#FF0B8FE2')
.fontSize(20)
.margin({top: 20})
.onClick(() => {
newrouter.replaceUrl({
uri: 'pages/ohosRouterB',
params: {
data: 'B Page'
}
});
});
Button('replaceurl2')
.key('replaceurl1')
.backgroundColor('#FF0B8FE2')
.fontSize(20)
.margin({top: 20})
.onClick(() => {
newrouter.replaceUrl({
uri: 'pages/ohosRouterB',
params: {
data: 'B Page'
}
});
},newrouter.RouterMode.Standard);
}.width('100%').height('100%')
}
}
\ No newline at end of file
arkui/ace_ets_component_apilack/entry/src/main/ets/MainAbility/pages/conponentadd/ohosRouterBg.ets 0 → 100644
浏览文件 @ c5c9209f
// @ts-nocheck
/**
* 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.
*/
import router from '@system.router';
import events_emitter from '@ohos.events.emitter';
@Entry
@Component
struct OhosRouterB {
build() {
Flex({direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center}) {
Text('B Page')
.fontSize(50)
.fontWeight(FontWeight.Bold)
}.width('100%').height('100%')
}
onPageShow() {
let params = router.getParams();
if (params && params.data) {
console.info("[OhosRouterB] getParams result: " + params.data);
this.getRouterParams(params.data);
}
}
getRouterParams(data) {
try {
let paramsData = {
data: {
"params": data,
}
}
let paramsEvent = {
eventId: 142,
priority: events_emitter.EventPriority.LOW
}
console.info("[OhosRouterB] start to emit params");
events_emitter.emit(paramsEvent, paramsData);
} catch (err) {
console.info("[OhosRouterB] emit params err: " + JSON.stringify(err.message));
}
}
}
\ No newline at end of file
arkui/ace_ets_component_apilack/entry/src/main/ets/MainAbility/pages/conponentadd/panel_y.ets 0 → 100644
浏览文件 @ c5c9209f
/**
* 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 events_emitter from '@ohos.events.emitter';
import Log from '../common/Log.ets';
const TAG = 'ets_apiLack_add';
@Entry
@Component
export default struct PanelBackgroundMask {
@State mode: PanelMode = PanelMode.Full
@State navBarPosition:PanelMode = PanelMode.Full
aboutToAppear() {
Log.showInfo(TAG, `aboutToAppear PanelBackgroundMask start`)
}
aboutToDisappear() {
Log.showInfo(TAG, `aboutToDisAppear PanelBackgroundMask end`)
}
build() {
Column() {
Text("panel-OnHeightChange")
.width(100)
.height(70)
.fontSize(20)
.opacity(1)
.align(Alignment.TopStart)
.fontColor(0xCCCCCC)
.lineHeight(25)
.border({ width: 1 })
.padding(10)
.textAlign(TextAlign.Center)
.textOverflow({ overflow: TextOverflow.None })
.key("onHeightChangeText")
.onClick(() => {
this.mode = PanelMode.Half
this.navBarPosition = PanelMode.Half
})
Panel(true) {
Column() {
Text("panel-BackgroundMask").fontSize(30)
}
}
.key("panel")
.mode(this.mode)
.navBarPosition(this.navBarPosition)
.backgroundColor('green')
.type(PanelType.Foldable)
.dragBar(false)
.halfHeight(300)
.onChange((width: number, height: number, mode: PanelMode) => {
Log.showInfo(TAG, `width:${width},height:${height},mode:${mode}`)
})
.backgroundMask('red')
.onHeightChange((value: number) => {
Log.showInfo(TAG, 'onHeightChange: ' + value)
try {
var backData = {
data: {
"result":"success"
}
}
let backEvent = {
eventId: 10111,
priority: events_emitter.EventPriority.LOW
}
console.info("onHeightChange start to emit action state")
events_emitter.emit(backEvent, backData)
} catch (err) {
console.info("testpanelOnHeightChange0002 emit action state err: " + JSON.stringify(err.message))
}
})
}.width("100%").height("100%")
}
}
arkui/ace_ets_component_apilack/entry/src/main/ets/MainAbility/pages/conponentadd/positionSetting_y.ets 0 → 100644
浏览文件 @ c5c9209f
// @ts-nocheck
/**
* 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.
*/
import events_emitter from '@ohos.events.emitter';
@Entry
@Component
struct PositionSetting {
@State align: Alignment = Alignment.TopStart;
@State direction: Direction = Direction.Rtl;
@State position1: {x: string, y: string} = {x: 25, y: 15};
@State position2: {x: string, y: string} = {x: '50%', y: '70%'};
@State anchor: {x: string, y: string} = {x: 25, y: 25};
@State offset: {x: string, y: string} = {x: 10, y: 15};
@State span: {x: string, y: string} = {x: 10, y: 15};
@State opacityValue: string = 1;
build() {
Column() {
Column({space: 10}) {
Text('opacity(1)').fontSize(20).fontColor(Color.Black).width('90%').opacity(`${this.opacityValue}`).key("opacity")
Text('top start')
.align(this.align)
.height(50)
.width('90%')
.fontSize(20)
.backgroundColor(0xFFE4C4)
.key('textAlign')
Text('direction').fontSize(20).fontColor(Color.Black).width('90%')
Row() {
Text('1').height(50).width('25%').fontSize(20).backgroundColor(0xF5DEB3)
Text('2').height(50).width('25%').fontSize(20).backgroundColor(0xD2B48C)
Text('3').height(50).width('25%').fontSize(20).backgroundColor(0xF5DEB3)
Text('4').height(50).width('25%').fontSize(20).backgroundColor(0xD2B48C)
}
.width('90%')
.direction(this.direction)
.key('rowDirection')
Text('position').fontSize(20).fontColor(Color.Black).width('90%')
Row({ space: 20 }) {
Text('1')
.size({ width: '45%', height: '50' })
.backgroundColor(0xdeb887)
.border({ width: 1 })
.fontSize(20)
Text(`2 position(${this.position1.x}, ${this.position1.y})`)
.size({ width: '60%', height: '30' })
.backgroundColor(0xbbb2cb).border({ width: 1 })
.fontSize(20).align(Alignment.Start)
.position({ x: this.position1.x, y: this.position1.y })
.key('position1')
Text('3')
.size({ width: '45%', height: '50' })
.backgroundColor(0xdeb887)
.border({ width: 1 }).fontSize(20)
Text(`4 position(${this.position2.x}, ${this.position2.y})`)
.size({ width: '50%', height: '50' })
.backgroundColor(0xbbb2cb)
.border({ width: 1 }).fontSize(20)
.position({ x: this.position2.x, y: this.position2.y })
.key('position2')
}.width('90%').height(100).border({ width: 1, style: BorderStyle.Dashed })
Text('markAnchor').fontSize(20).fontColor(Color.Black).width('90%')
Stack({ alignContent: Alignment.TopStart }) {
Row()
.size({ width: '100', height: '100' })
.backgroundColor(0xdeb887)
Image('/images/ic_health_heart.png')
.size({ width: 25, height: 25 })
.markAnchor({ x: this.anchor.x, y: this.anchor.y })
.key('markAnchor')
Image('/images/ic_health_heart.png')
.size({ width: 25, height: 25 })
.markAnchor({ x: 25, y: 25 })
.position({ x: '100%', y: '100%' })
}.margin({ top: 25 }).border({ width: 1, style: BorderStyle.Dashed })
Stack({ alignContent: Alignment.Bottom }) {
Text('First child, show in bottom').width('90%').height('100%').backgroundColor(0xd2cab3).align(Alignment.Top)
Text('Second child, show in top').width('70%').height('60%').backgroundColor(0xc1cbac).align(Alignment.Top)
}.width('100%').height(150).margin({ top: 5 })
Text('offset').fontSize(20).fontColor(Color.Black).width('90%')
Row() {
Text('1').size({ width: '15%', height: '100' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(20)
Text(`2\noffset(${this.offset.x}, ${this.offset.y})`)
.size({ width: 170, height: '50' }).backgroundColor(0xbbb2cb).border({ width: 1 })
.fontSize(20).align(Alignment.Start)
.offset({ x: this.offset.x, y: this.offset.y })
.span({x: this.span.x, y: this.span.y})
.key('offset')
Text('3').size({ width: '15%', height: '50' }).backgroundColor(0xdeb887).border({ width: 1 }).fontSize(20)
Text('4\noffset(-10%, 20%)')
.size({ width: 170, height: '50' }) .backgroundColor(0xbbb2cb).border({ width: 1 }).fontSize(20)
.offset({ x: '-10%', y: '50%' })
}.width('90%').height(100).border({ width: 1, style: BorderStyle.Dashed })
}
}
.width('100%').margin({ top: 5 })
}
onPageShow() {
let stateChangeEvent = {
eventId: 25,
priority: events_emitter.EventPriority.LOW
}
events_emitter.on(stateChangeEvent, this.stateChangCallBack);
let directionChangeEvent = {
eventId: 26,
priority: events_emitter.EventPriority.LOW
}
events_emitter.on(directionChangeEvent, this.stateChangCallBack);
let positionChangeEvent = {
eventId: 27,
priority: events_emitter.EventPriority.LOW
}
events_emitter.on(positionChangeEvent, this.stateChangCallBack);
let markAnchorChangeEvent = {
eventId: 28,
priority: events_emitter.EventPriority.LOW
}
events_emitter.on(markAnchorChangeEvent, this.stateChangCallBack);
let offsetChangeEvent = {
eventId: 29,
priority: events_emitter.EventPriority.LOW
}
events_emitter.on(offsetChangeEvent, this.stateChangCallBack);
}
stateChangCallBack = (eventData) => {
console.info("position page stateChangCallBack" + JSON.stringify(eventData));
if (eventData) {
if (eventData.data.textAlign) {
this.align = Alignment.BottomEnd;
} else if (eventData.data.direction) {
this.direction = eventData.data.direction;
} else if (eventData.data.position1) {
this.position1 = JSON.parse(eventData.data.position1);
this.position2 = JSON.parse(eventData.data.position2);
} else if (eventData.data.markAnchor) {
this.anchor = JSON.parse(eventData.data.markAnchor);
} else if (eventData.data.offset) {
this.offset = JSON.parse(eventData.data.offset);
this.span = JSON.parse(eventData.data.span);
} else if (eventData.data.opacityValue) {
this.opacityValue = eventData.data.opacityValue;
}
}
}
}
\ No newline at end of file
arkui/ace_ets_component_apilack/entry/src/main/ets/MainAbility/pages/conponentadd/shapeClipping_y.ets 0 → 100644
浏览文件 @ c5c9209f
// @ts-nocheck
/**
* 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.
*/
import events_emitter from '@ohos.events.emitter';
@Entry
@Component
struct ClipAndMaskExample {
@State isMaskRect: boolean = true;
@State isClipCircle:boolean = true;
@State maskType: CommonShapeMethod= new Rect({ width: 280, height: 280 });
@State clipType: CommonShapeMethod= new Circle({ width: 280, height: 280 });
@State shape_Type: CommonShapeMethod= new elliptical({ width: 200, height: 280 });
@State lengthType: CommonShapeMethod= new line({ width: 0, height: 10 });
@State pathType: CommonShapeMethod= new path({ width: 10, height: 10 });
@State shape_2_Type: CommonShapeMethod= new polygon({ width: 5, height: 10 });
@State shape_3_Type: CommonShapeMethod= new polyine({ width: 5, height: 10 });
@State shape_4_Type: CommonShapeMethod= new rect_({ width: 5, height: 10 ,radius : 5});
private stateChangCallBack = (eventData) => {
if (eventData != null) {
console.info("shapeClipping page state change called:" + JSON.stringify(eventData));
if(eventData.data.maskValue != null) {
this.maskType = new Circle({ width: 280, height: 280 });
}
}
}
private stateChangCallBack = (eventData) => {
if (eventData != null) {
console.info("shapeClipping page state change called:" + JSON.stringify(eventData));
if(eventData.data.maskValue != null) {
this.shape_Type = new elliptical({ width: 200, height: 280 });
}
}
}
private stateChangCallBack = (eventData) => {
if (eventData != null) {
console.info("shapeClipping page state change called:" + JSON.stringify(eventData));
if(eventData.data.maskValue != null) {
this.lengthType = new line({ width: 200, height: 280 });
}
}
}
private stateChangCallBack = (eventData) => {
if (eventData != null) {
console.info("shapeClipping page state change called:" + JSON.stringify(eventData));
if(eventData.data.maskValue != null) {
this.shape_4_Type = new rect_({ width: 200, height: 280 });
}
}
}
private stateChangCallBack = (eventData) => {
if (eventData != null) {
console.info("shapeClipping page state change called:" + JSON.stringify(eventData));
if(eventData.data.maskValue != null) {
this.pathType = new path({ width: 200, height: 280 });
}
}
}
private stateChangCallBack = (eventData) => {
if (eventData != null) {
console.info("shapeClipping page state change called:" + JSON.stringify(eventData));
if(eventData.data.maskValue != null) {
this.shape_2_Type = new polygon({ width: 200, height: 280 });
}
}
}
private stateChangCallBack = (eventData) => {
if (eventData != null) {
console.info("shapeClipping page state change called:" + JSON.stringify(eventData));
if(eventData.data.maskValue != null) {
this.shape_3_Type = new polyine({ width: 200, height: 280 });
}
}
}
private shapeChangCallBack = (eventData) => {
if (eventData != null) {
console.info("shapeClipping page shape change called:" + JSON.stringify(eventData));
if(eventData.data.clipValue != null) {
this.clipType = new Rect({ width: 280, height: 280 });
}
}
}
onPageShow() {
console.info('shapeClipping page show called');
var stateChangeEvent = {
eventId: 32,
priority: events_emitter.EventPriority.LOW
}
events_emitter.on(stateChangeEvent, this.stateChangCallBack);
var shapeChangeEvent = {
eventId: 33,
priority: events_emitter.EventPriority.LOW
Environment
}
events_emitter.on(shapeChangeEvent, this.shapeChangCallBack);
}
build() {
Column({ space: 5 }) {
Text('clip')
.fontSize(9)
.width('90%')
.fontColor(0xCCCCCC)
Image('/images/clip.png')
.clip(this.clipType)
.clip(this.shape_Type)
.clip(this.lengthType)
.clip(this.pathType)
.clip(this.shape_2_Type)
.clip(this.shape_3_Type)
.clip(this.shape_4_Type)
.width('500px')
.height('280px')
.key('image_clip')
Row() {
Image('/images/clip.png')
.width('500px')
.height('280px')
}
.clip(true)
.borderRadius(20)
.key('image_clip_true')
Text('mask')
.fontSize(9)
.width('90%')
.fontColor(0xCCCCCC)
Image('/images/clip.png')
.mask(this.maskType)
.width('500px').height('280px')
.key('image_mask')
}
.width('100%')
.margin({ top: 5 })
}
}
\ No newline at end of file
arkui/ace_ets_component_apilack/entry/src/main/ets/MainAbility/pages/conponentadd/stack.test_y.ets 0 → 100644
浏览文件 @ c5c9209f
/**
* 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 router from '@system.router';
import {describe, beforeAll, beforeEach, afterEach, afterAll, it, expect} from "hypium/index"
import Utils from './Utils.ets'
export default function stackAlignContentJsunit() {
describe('stackAlignContentTest', function () {
beforeAll(async function (done) {
console.info("flex beforeEach start");
let options = {
uri: 'pages/stack',
}
try {
router.clear();
let pages = router.getState();
console.info("get stack state success " + JSON.stringify(pages));
if (!("stack" == pages.name)) {
console.info("get stack state success " + JSON.stringify(pages.name));
let result = await router.push(options);
await Utils.sleep(2000);
console.info("push stack page success " + JSON.stringify(result));
}
} catch (err) {
console.error("push stack page error: " + err);
}
done()
});
afterEach(async function () {
await Utils.sleep(1000);
console.info("stackAlignContent after each called");
});
/*
* @tc.number SUB_ACE_BASIC_ETS_API_0001
* @tc.name teststackAlignContent0001
* @tc.desic acestackAlignContentEtsTest0001
*/
it('teststackAlignContent0001', 0, async function (done) {
console.info('stackAlignContent teststackAlignContent0001 START');
await Utils.sleep(2000);
let strJson = getInspectorByKey('Stack');
console.info("[teststackAlignContent0001] component width strJson:" + strJson);
let obj = JSON.parse(strJson);
expect(obj.$type).assertEqual('Stack');
expect(obj.$attrs.width).assertEqual("100.00%");
console.info("[teststackAlignContent0001] width value :" + obj.$attrs.width);
done();
});
/*
* @tc.number SUB_ACE_BASIC_ETS_API_0002
* @tc.name teststackAlignContent0002
* @tc.desic acestackAlignContentEtsTest0002
*/
it('teststackAlignContent0002', 0, async function (done) {
console.info('stackAlignContent teststackAlignContent0002 START');
await Utils.sleep(2000);
let strJson = getInspectorByKey('Stack');
console.info("[teststackAlignContent0002] component width strJson:" + strJson);
let obj = JSON.parse(strJson);
expect(obj.$type).assertEqual('Stack');
expect(obj.$attrs.height).assertEqual("150.00vp");
console.info("[teststackAlignContent0002] width value :" + obj.$attrs.width);
done();
});
})
}
arkui/ace_ets_component_apilack/entry/src/main/ets/MainAbility/pages/conponentadd/stack_y.ets 0 → 100644
浏览文件 @ c5c9209f
/**
* 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 Log from '../common/Log.ets';
const TAG = 'ets_apiLack_add';
@Entry
@Component
export default
struct StackAlignContent {
aboutToAppear() {
Log.showInfo(TAG, `aboutToAppear StackAlignContent start`)
}
aboutToDisappear(){
Log.showInfo(TAG, `aboutToDisAppear StackAlignContent end`)
}
build(){
Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center,justifyContent:FlexAlign.Center }){
Text("stack-AlignContent")
.width(100)
.height(70)
.fontSize(20)
.opacity(1)
.align(Alignment.TopStart)
.fontColor(0xCCCCCC)
.lineHeight(25)
.border({ width: 1 })
.padding(10)
.textAlign(TextAlign.Center)
.textOverflow({ overflow: TextOverflow.None })
.key("alignContentText")
Stack({ alignContent: Alignment.Bottom }) {
Text('First child, show in bottom')
.width('95%')
.width('90%')
.height('100%')
.backgroundColor(0xd2cab3)
.align(Alignment.Top)
Text('Second child, show in top')
.width('70%')
.height('60%')
.backgroundColor(0xc1cbac)
.align(Alignment.Top)
}.key("Stack")
.width('100%').height(150).margin({ top: 5 })
}.width("100%").height("100%")
}
}
arkui/ace_ets_component_apilack/entry/src/main/ets/MainAbility/pages/conponentadd/tabs.test_y.ets 0 → 100644
浏览文件 @ c5c9209f
/**
* 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 router from '@system.router';
import {describe, beforeAll, beforeEach, afterEach, afterAll, it, expect} from "hypium/index"
import Utils from './Utils.ets'
export default function tabsBarPositionJsunit() {
describe('tabsBarPositionTest', function () {
beforeAll(async function (done) {
console.info("flex beforeEach start");
let options = {
uri: 'pages/tabs',
}
try {
router.clear();
let pages = router.getState();
console.info("get tabs state success " + JSON.stringify(pages));
if (!("tabs" == pages.name)) {
console.info("get tabs state success " + JSON.stringify(pages.name));
let result = await router.push(options);
await Utils.sleep(2000);
console.info("push tabs page success " + JSON.stringify(result));
}
} catch (err) {
console.error("push tabs page error: " + err);
}
done()
});
afterEach(async function () {
await Utils.sleep(1000);
console.info("tabsBarPosition after each called");
});
/*
* @tc.number SUB_ACE_BASIC_ETS_API_0001
* @tc.name testtabsBarPosition0001
* @tc.desic acetabsBarPositionEtsTest0001
*/
it('testtabsBarPosition0001', 0, async function (done) {
console.info('tabsBarPosition testtabsBarPosition0001 START');
await Utils.sleep(2000);
let strJson = getInspectorByKey('barPositionText');
console.info("[testtabsBarPosition0001] component width strJson:" + strJson);
let obj = JSON.parse(strJson);
expect(obj.$type).assertEqual('Text');
expect(obj.$attrs.width).assertEqual("100.00vp");
console.info("[testtabsBarPosition0001] width value :" + obj.$attrs.width);
done();
});
/*
* @tc.number SUB_ACE_BASIC_ETS_API_0002
* @tc.name testtabsBarPosition0002
* @tc.desic acetabsBarPositionEtsTest0002
*/
it('testtabsBarPosition0002', 0, async function (done) {
console.info('tabsBarPosition testtabsBarPosition0002 START');
await Utils.sleep(2000);
let strJson = getInspectorByKey('barPositionText');
console.info("[testtabsBarPosition0002] component height strJson:" + strJson);
let obj = JSON.parse(strJson);
expect(obj.$type).assertEqual('Text');
expect(obj.$attrs.height).assertEqual("70.00vp");
console.info("[testtabsBarPosition0002] height value :" + obj.$attrs.height);
done();
});
/*
* @tc.number SUB_ACE_BASIC_ETS_API_0003
* @tc.name testtabsBarPosition0003
* @tc.desic acetabsBarPositionEtsTest0003
*/
it('testtabsBarPosition0003', 0, async function (done) {
console.info('tabsBarPosition testtabsBarPosition0003 START');
await Utils.sleep(2000);
let strJson = getInspectorByKey('barPositionText');
console.info("[testtabsBarPosition0003] component fontSize strJson:" + strJson);
let obj = JSON.parse(strJson);
expect(obj.$type).assertEqual('Text');
expect(obj.$attrs.fontSize).assertEqual("20.00fp");
console.info("[testtabsBarPosition0003] fontSize value :" + obj.$attrs.fontSize);
done();
});
/*
* @tc.number SUB_ACE_BASIC_ETS_API_0004
* @tc.name testtabsBarPosition0004
* @tc.desic acetabsBarPositionEtsTest0004
*/
it('testtabsBarPosition0004', 0, async function (done) {
console.info('tabsBarPosition testtabsBarPosition0004 START');
await Utils.sleep(2000);
let strJson = getInspectorByKey('barPositionText');
console.info("[testtabsBarPosition0004] component opacity strJson:" + strJson);
let obj = JSON.parse(strJson);
expect(obj.$type).assertEqual('Text');
expect(obj.$attrs.opacity).assertEqual(1);
console.info("[testtabsBarPosition0004] opacity value :" + obj.$attrs.opacity);
done();
});
/*
* @tc.number SUB_ACE_BASIC_ETS_API_0005
* @tc.name testtabsBarPosition0005
* @tc.desic acetabsBarPositionEtsTest0005
*/
it('testtabsBarPosition0005', 0, async function (done) {
console.info('tabsBarPosition testtabsBarPosition0005 START');
await Utils.sleep(2000);
let strJson = getInspectorByKey('barPositionText');
console.info("[testtabsBarPosition0005] component align strJson:" + strJson);
let obj = JSON.parse(strJson);
expect(obj.$type).assertEqual('Text');
expect(obj.$attrs.align).assertEqual("Alignment.TopStart");
console.info("[testtabsBarPosition0005] align value :" + obj.$attrs.align);
done();
});
/*
* @tc.number SUB_ACE_BASIC_ETS_API_0006
* @tc.name testtabsBarPosition0006
* @tc.desic acetabsBarPositionEtsTest0006
*/
it('testtabsBarPosition0006', 0, async function (done) {
console.info('tabsBarPosition testtabsBarPosition0006 START');
await Utils.sleep(2000);
let strJson = getInspectorByKey('barPositionText');
console.info("[testtabsBarPosition0006] component fontColor strJson:" + strJson);
let obj = JSON.parse(strJson);
expect(obj.$type).assertEqual('Text');
expect(obj.$attrs.fontColor).assertEqual("#FFCCCCCC");
console.info("[testtabsBarPosition0006] fontColor value :" + obj.$attrs.fontColor);
done();
});
/*
* @tc.number SUB_ACE_BASIC_ETS_API_0007
* @tc.name testtabsBarPosition0007
* @tc.desic acetabsBarPositionEtsTest0007
*/
it('testtabsBarPosition0007', 0, async function (done) {
console.info('tabsBarPosition testtabsBarPosition0007 START');
await Utils.sleep(2000);
let strJson = getInspectorByKey('barPositionText');
console.info("[testtabsBarPosition0007] component lineHeight strJson:" + strJson);
let obj = JSON.parse(strJson);
expect(obj.$type).assertEqual('Text');
expect(obj.$attrs.lineHeight).assertEqual("25.00fp");
console.info("[testtabsBarPosition0007] lineHeight value :" + obj.$attrs.lineHeight);
done();
});
/*
* @tc.number SUB_ACE_BASIC_ETS_API_0009
* @tc.name testtabsBarPosition0009
* @tc.desic acetabsBarPositionEtsTest0009
*/
it('testtabsBarPosition0009', 0, async function (done) {
console.info('tabsBarPosition testtabsBarPosition009 START');
await Utils.sleep(2000);
let strJson = getInspectorByKey('barPositionText');
console.info("[testtabsBarPosition0009] component padding strJson:" + strJson);
let obj = JSON.parse(strJson);
expect(obj.$type).assertEqual('Text');
expect(obj.$attrs.padding).assertEqual("10.00vp");
console.info("[testtabsBarPosition0009] padding value :" + obj.$attrs.padding);
done();
});
/*
* @tc.number SUB_ACE_BASIC_ETS_API_0010
* @tc.name testtabsBarPosition0010
* @tc.desic acetabsBarPositionEtsTest0010
*/
it('testtabsBarPosition0010', 0, async function (done) {
console.info('tabsBarPosition testtabsBarPosition0010 START');
await Utils.sleep(2000);
let strJson = getInspectorByKey('barPositionText');
console.info("[testtabsBarPosition0010] component textAlign strJson:" + strJson);
let obj = JSON.parse(strJson);
expect(obj.$type).assertEqual('Text');
expect(obj.$attrs.textAlign).assertEqual("TextAlign.Left");
console.info("[testtabsBarPosition0010] textAlign value :" + obj.$attrs.textAlign);
done();
});
/*
* @tc.number SUB_ACE_BASIC_ETS_API_0011
* @tc.name testtabsBarPosition0011
* @tc.desic acetabsBarPositionEtsTest0011
*/
it('testtabsBarPosition0011', 0, async function (done) {
console.info('tabsBarPosition testtabsBarPosition0011 START');
await Utils.sleep(2000);
let strJson = getInspectorByKey('barPositionTabs');
console.info("[testtabsBarPosition0011] component barPosition strJson:" + strJson);
let obj = JSON.parse(strJson);
expect(obj.$type).assertEqual('Tabs');
expect(obj.$attrs.barPosition).assertEqual("BarPosition.Start");
console.info("[testtabsBarPosition0011] barPosition value :" + obj.$attrs.barPosition);
done();
});
})
}
arkui/ace_ets_component_apilack/entry/src/main/ets/test/componettest/hitTestMode_y.test.ets 0 → 100644
浏览文件 @ c5c9209f
/**
* 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 router from '@system.router';
import {describe, beforeAll, beforeEach, afterEach, afterAll, it, expect} from "hypium/index"
import Utils from './Utils.ets'
export default function hitTestModeJsunit() {
describe('hitTestModeJsunit', function () {
beforeEach(async function (done) {
console.info("hitTestMode beforeEach start");
let options = {
uri: 'pages/hitTestMode',
}
try {
router.clear();
let pages = router.getState();
console.info("get hitTestMode state success " + JSON.stringify(pages));
if (!("hitTestMode" == pages.name)) {
console.info("get hitTestMode state success " + JSON.stringify(pages.name));
let result = await router.push(options);
await Utils.sleep(2000);
console.info("push hitTestMode page success " + JSON.stringify(result));
}
} catch (err) {
console.error("push hitTestMode page error: " + err);
}
done()
});
afterEach(async function () {
await Utils.sleep(1000);
console.info("hitTestModeTest after each called");
});
/*
* @tc.number SUB_ACE_BASIC_ETS_API_0002
* @tc.name testhitTestMode0002
* @tc.desic acehitTestModelEtsTest0002
*/
it('testhitTestMode0002', 0, async function (done) {
console.info('hitTestMode testhitTestMode0002 START');
await Utils.sleep(2000);
let strJson = getInspectorByKey('Block');
console.info("[testhitTestMode0002] component width strJson:" + strJson);
let obj = JSON.parse(strJson);
expect(obj.$type).assertEqual('Stack');
console.info("[testhitTestMode0002] hitTestBehavior value :" + obj.$attrs.hitTestBehavior);
// expect(obj.$attrs.hitTestBehavior).assertEqual(undefined);
done();
});
})
}
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或