Skip to content

X
Xts Acts

OpenHarmony / Xts Acts
1 年多 前同步成功

通知 9
Star 22
Fork 0
X
Xts Acts
提交 bda0d522 编写于 作者: D dongwei 提交者： wanggang
浏览文件
操作

add test cases 

Signed-off-by: Ndongwei <dongwei@kaihongdigi.com>
上级 00d53fb3
显示空白变更内容
内联 并排
Showing with 4086 addition and 0 deletion
ace/ace_standard/src/main/js/default/pages/obj_CanvasGradient/prop/index.css 0 → 100644
浏览文件 @ bda0d522
/**
* 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 */
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/obj_CanvasGradient/prop/index.hml 0 → 100644
浏览文件 @ bda0d522
<!--/**
* 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>
</div>
ace/ace_standard/src/main/js/default/pages/obj_CanvasGradient/prop/index.js 0 → 100644
浏览文件 @ bda0d522
/**
* 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:{
},
onShow() {
},
functionTest() {
},
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/obj_CanvasRenderingContext2D/prop/index.hml 0 → 100644
浏览文件 @ bda0d522
<!--/**
* 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">
CanvasRenderingContext2D对象的通用属性
</text>
<text class="sub-title">
通用属性 -- fillStyle
</text>
<canvas id="fillStyleProp" ref="canvas1" style="width: 100%; height: 30px;margin-top: 5px; ">
</canvas>
<text class="sub-title">
通用属性 -- lineWidth
</text>
<canvas id="lineWidthProp" ref="canvas2" style="width: 100%; height: 30px;margin-top: 5px; ">
</canvas>
<text class="sub-title">
通用属性 -- lineCap
</text>
<canvas id="lineCapProp" ref="canvas3" style="width: 100%; height: 20px;margin-top: 5px;">
</canvas>
<text class="sub-title">
通用属性 -- lineJoin
</text>
<canvas id="lineJoinProp" ref="canvas4" style="width: 100%; height: 50px;margin-top: 5px;">
</canvas>
<text class="sub-title">
通用属性 -- miterLimit
</text>
<canvas id="miterLimitProp" ref="canvas5" style="width: 100%; height: 40px;margin-top: 5px;">
</canvas>
<text class="sub-title">
通用属性 -- font
</text>
<canvas id="fontProp" ref="canvas6" style="width: 100%; height: 30px;margin-top: 5px;">
</canvas>
<text class="sub-title">
通用属性 -- globalAlpha
</text>
<canvas id="globalAlphaProp" ref="canvas7" style="width: 100%; height: 80px;margin-top: 5px;">
</canvas>
<text class="sub-title">
通用属性 -- lineDashOffset
</text>
<canvas id="lineDashOffsetProp" ref="canvas8" style="width: 100%; height: 80px; background-color: #ffff00;margin-top: 5px;">
</canvas>
<text class="sub-title">
通用属性 -- globalCompositeOperation
</text>
<canvas id="globalCompositeOperationProp" 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">
通用属性 -- shadowBlur
</text>
<canvas id="shadowBlurProp" ref="canvas10" style="width: 100%; height: 70px;margin-top: 5px;">
</canvas>
<text class="sub-title">
通用属性 -- shadowColor
</text>
<canvas id="shadowColorProp" ref="canvas11" style="width: 100%; height: 70px;margin-top: 5px;">
</canvas>
<text class="sub-title">
通用属性 -- shadowOffsetX
</text>
<canvas id="shadowOffsetXProp" ref="canvas12" style="width: 100%; height: 50px;margin-top: 5px;">
</canvas>
<text class="sub-title">
通用属性 -- shadowOffsetY
</text>
<canvas id="shadowOffsetYProp" ref="canvas13" style="width: 100%; height: 60px;margin-top: 5px;">
</canvas>
<text class="sub-title">
通用属性 -- imageSmoothingEnabled
</text>
<canvas id="imageSmoothingEnabledProp" ref="canvas14" style="width: 100%; height: 30px;margin-bottom: 10px;margin-top: 5px;">
</canvas>
<text class="sub-title">
通用属性 -- strokeStyle
</text>
<canvas id="strokeStyleProp" ref="canvas15" style="width: 100%; height: 40px;margin-bottom: 10px;margin-top: 5px;">
</canvas>
<text class="sub-title">
通用属性 -- textAlign
</text>
<canvas id="textAlignProp" ref="canvas16" style="width: 100%; height: 80px;margin-bottom: 10px;margin-top: 5px;">
</canvas>
<text class="sub-title">
通用属性 -- textBaseline
</text>
<canvas id="textBaselineProp" ref="canvas17" style="width: 100%; height: 80px;margin-bottom: 10px;margin-top: 5px;">
</canvas>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/obj_CanvasRenderingContext2D/prop/index.js 0 → 100644
浏览文件 @ bda0d522
/**
* 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.props13()
this.props14()
this.props15()
this.props16()
this.props17()
},
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.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 = 20;
ctx.shadowColor = 'rgb(0,0,0)';
ctx.fillStyle = 'rgb(255,0,0)';
ctx.fillRect(10, 10, 70, 40);
},
props11() {
const el =this.$refs.canvas11;
const ctx = el.getContext('2d');
ctx.shadowBlur = 20;
ctx.shadowColor = 'rgb(0,0,255)';
ctx.fillStyle = 'rgb(255,0,0)';
ctx.fillRect(10, 10, 70, 40);
},
props12() {
const el =this.$refs.canvas12;
const ctx = el.getContext('2d');
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 20;
ctx.shadowColor = 'rgb(0,0,0)';
ctx.fillStyle = 'rgb(255,0,0)';
ctx.fillRect(10, 0, 70, 40);
},
props13() {
const el =this.$refs.canvas13;
const ctx = el.getContext('2d');
ctx.shadowBlur = 10;
ctx.shadowOffsetY = 20;
ctx.shadowColor = 'rgb(0,0,0)';
ctx.fillStyle = 'rgb(255,0,0)';
ctx.fillRect(10, 0, 70, 40);
},
props14() {
const el =this.$refs.canvas14;
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);
};
},
props15() {
const el =this.$refs.canvas15;
const ctx = el.getContext('2d');
ctx.lineWidth = 10;
ctx.strokeStyle = '#0000ff';
ctx.strokeRect(0, 0, 100, 30);
},
props16() {
const el =this.$refs.canvas16;
const ctx = el.getContext('2d');
ctx.strokeStyle = '#0000ff';
ctx.moveTo(80, 0);
ctx.lineTo(80, 160);
ctx.stroke();
ctx.font = '12px sans-serif';
// Show the different textAlign values
ctx.textAlign = 'start';
ctx.fillText('textAlign=start', 80, 20);
ctx.textAlign = 'end';
ctx.fillText('textAlign=end', 80, 30);
ctx.textAlign = 'left';
ctx.fillText('textAlign=left', 80, 40);
ctx.textAlign = 'center';
ctx.fillText('textAlign=center',80, 50);
ctx.textAlign = 'right';
ctx.fillText('textAlign=right',80, 60);
},
props17() {
const el =this.$refs.canvas17;
const ctx = el.getContext('2d');
ctx.strokeStyle = '#0000ff';
ctx.moveTo(0, 30);
ctx.lineTo(200, 30);
ctx.stroke();
ctx.font = '10px sans-serif';
ctx.textBaseline = 'top';
ctx.fillText('Top', 0, 30);
ctx.textBaseline = 'bottom';
ctx.fillText('Bottom', 20, 30);
ctx.textBaseline = 'middle';
ctx.fillText('Middle', 55, 30);
ctx.textBaseline = 'alphabetic';
ctx.fillText('Alphabetic', 90, 30);
ctx.textBaseline = 'hanging';
ctx.fillText('Hanging', 140, 30);
}
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/obj_Image/prop/index.hml 0 → 100644
浏览文件 @ bda0d522
<!--/**
* 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">
<text class="title">
Image对象的属性
</text>
<text class="sub-title">
属性 -- src
</text>
<canvas id="srcProp" ref="canvas1" style="width: 100%; height: 100px; ">
</canvas>
<text class="sub-title">
属性 -- width
</text>
<canvas id="widthProp" ref="canvas2" style="width: 100%; height: 100px; ">
</canvas>
<text class="sub-title">
属性 -- height
</text>
<canvas id="heightProp" ref="canvas3" style="width: 100%; height: 100px; ">
</canvas>
<text class="sub-title">
属性 -- onload
</text>
<canvas id="onloadProp" ref="canvas4" style="width: 100%; height: 100px; ">
</canvas>
<text class="sub-title">
属性 -- onerror
</text>
<canvas id="onerrorProp" ref="canvas5" style="width: 100%; height: 100px; ">
</canvas>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/obj_Image/prop/index.js 0 → 100644
浏览文件 @ bda0d522
/**
* 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()
},
props1() {
const el =this.$refs.canvas1
var ctx = el.getContext('2d');
var img = new Image();
img.src = 'common/images/image.png';
img.onload = function() {
console.log('Image load success');
ctx.drawImage(img, 0, 0, 300, 100);
prompt.showToast({
message: 'Image load success: width=' + img.width + ',height=' + img.height
});
};
img.onerror = function() {
console.log('Image load fail');
};
},
props2() {
const el =this.$refs.canvas2
var ctx = el.getContext('2d');
var img = new Image();
img.src = 'common/images/image.png';
img.onload = function() {
console.log('Image load success');
ctx.drawImage(img, 0, 0, 200, 100);
prompt.showToast({
message: 'Image load success: width=' + img.width + ',height=' + img.height
});
};
img.onerror = function() {
console.log('Image load fail');
};
},
props3() {
const el =this.$refs.canvas3
var ctx = el.getContext('2d');
var img = new Image();
img.src = 'common/images/image.png';
img.onload = function() {
console.log('Image load success');
ctx.drawImage(img, 0, 0, 300, 50);
prompt.showToast({
message: 'Image load success: width=' + img.width + ',height=' + img.height
});
};
img.onerror = function() {
console.log('Image load fail');
};
},
props4() {
const el =this.$refs.canvas4
var ctx = el.getContext('2d');
var img = new Image();
img.src = 'common/images/image.png';
img.onload = function() {
console.log('Image load success');
ctx.drawImage(img, 0, 0, 300, 100);
prompt.showToast({
message: 'onload: Image load success: width=' + img.width + ',height=' + img.height
});
};
img.onerror = function() {
console.log('Image load fail');
};
},
props5() {
const el =this.$refs.canvas5
var ctx = el.getContext('2d');
var img = new Image();
img.src = 'common/images/image.png';
img.onload = function() {
console.log('Image load success');
ctx.drawImage(img, 0, 0, 300, 100);
prompt.showToast({
message: 'Image load success: width=' + img.width + ',height=' + img.height
});
};
img.onerror = function() {
console.log('onerror: Image load fail');
};
},
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/obj_ImageBitmap/prop/index.hml 0 → 100644
浏览文件 @ bda0d522
<!--/**
* Copyright (c) 2022 Shenzhen kaiHong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/-->
<div class="container">
<div class="sub-container">
<div class="prop-container">
<text class="title">
ImageBitmap对象的属性
</text>
<text class="sub-title">
属性 -- width
</text>
<canvas id="widthProp" ref="canvas1" style="width: 100%; height: 200px;background-color: #ffff00; ">
</canvas>
<text class="sub-title">
属性 -- height
</text>
<canvas id="heightProp" ref="canvas2" style="width: 100%; height: 200px;background-color: #ffff00; ">
</canvas>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/obj_ImageBitmap/prop/index.js 0 → 100644
浏览文件 @ bda0d522
/**
* 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()
},
props1() {
const canvas =this.$refs.canvas1
var ctx = canvas.getContext('2d');
var offscreen = new OffscreenCanvas(200,200);
var offscreenCanvasCtx = offscreen.getContext("2d");
offscreenCanvasCtx.rect(10, 10, 150, 100);
offscreenCanvasCtx.stroke();
this.textValue2 = offscreenCanvasCtx.isPointInStroke(20, 10);
var bitmap = offscreen.transferToImageBitmap();
ctx.transferFromImageBitmap(bitmap);
prompt.showToast({
message: 'function1 ImageBitmap:\n' + JSON.stringify(bitmap) + ',width:'+bitmap.width,
duration: 3000
});
console.log(bitmap.width)
},
props2() {
const canvas =this.$refs.canvas2
var ctx = canvas.getContext('2d');
var offscreen = new OffscreenCanvas(200,200);
var offscreenCanvasCtx = offscreen.getContext("2d");
offscreenCanvasCtx.rect(10, 10, 100, 150);
offscreenCanvasCtx.stroke();
this.textValue2 = offscreenCanvasCtx.isPointInStroke(20, 10);
var bitmap = offscreen.transferToImageBitmap();
ctx.transferFromImageBitmap(bitmap);
prompt.showToast({
message: 'function1 ImageBitmap:\n' + JSON.stringify(bitmap) + ',width:'+bitmap.height,
duration: 3000
});
console.log(bitmap.height)
},
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/obj_ImageData/prop/index.hml 0 → 100644
浏览文件 @ bda0d522
<!--/**
* Copyright (c) 2022 Shenzhen kaiHong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/-->
<div class="container">
<div class="sub-container">
<div class="prop-container">
<text class="title">
ImageData对象的属性
</text>
<text class="sub-title">
属性 -- width
</text>
<canvas id="widthProp" ref="canvas1" style="width: 100%; height: 200px; background-color: #ffff00;">
</canvas>
<text class="sub-title">
属性 -- height
</text>
<canvas id="heightProp" ref="canvas2" style="width: 100%; height: 200px; background-color: #ffff00;">
</canvas>
<text class="sub-title">
属性 -- data
</text>
<canvas id="dataProp" ref="canvas3" style="width: 100%; height: 200px; background-color: #ffff00;">
</canvas>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/obj_ImageData/prop/index.js 0 → 100644
浏览文件 @ bda0d522
/**
* 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()
},
props1() {
const el =this.$refs.canvas1;
const ctx = el.getContext('2d');
ctx.fillRect(0,0,150,100)
var imageData = ctx.createImageData(2,1)
prompt.showToast({
message:JSON.stringify(imageData)+',width:' +imageData.width,
duration:5000
})
console.log(imageData.width)
},
props2() {
const el =this.$refs.canvas2;
const ctx = el.getContext('2d');
ctx.fillRect(0,0,100,150)
var imageData = ctx.createImageData(1,2)
prompt.showToast({
message:JSON.stringify(imageData)+',width:' +imageData.height,
duration:5000
})
console.log(imageData.height)
},
props3() {
const el =this.$refs.canvas3;
const ctx = el.getContext('2d');
ctx.fillRect(0,0,100,100)
var imageData = ctx.createImageData(1,1)
prompt.showToast({
message:JSON.stringify(imageData),
duration:5000
})
console.log(imageData.data)
},
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/obj_ImageData/router/index.css 0 → 100644
浏览文件 @ bda0d522
/**
* 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%;
}
ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/prop/index.css 0 → 100644
浏览文件 @ bda0d522
/**
* 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%;
}
ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/prop/index.hml 0 → 100644
浏览文件 @ bda0d522
<!--/**
* Copyright (c) 2022 Shenzhen kaiHong Digital Industry Development Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/-->
<div class="container">
<div class="sub-container">
<div class="prop-container">
<text class="title">
OffscreenCanvas对象的属性
</text>
<text class="sub-title">
属性 -- width
</text>
<canvas id="widthProp" ref="canvas1" style="width: 100%; height: 200px; ">
</canvas>
<text class="sub-title">
属性 -- height
</text>
<canvas id="heightProp" ref="canvas2" style="width: 100%; height: 200px; ">
</canvas>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/prop/index.js 0 → 100644
浏览文件 @ bda0d522
/**
* 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()
},
props1() {
const el =this.$refs.canvas1
const ctx = el.getContext('2d');
var offscreen = new OffscreenCanvas(200,100);
var offscreenCanvasCtx = offscreen.getContext("2d");
var img = new Image();
img.src = 'common/images/image.png';
offscreenCanvasCtx.drawImage(img, 0, 0, 200, 100);
prompt.showToast({
message: 'OffscreenCanvas width='+offscreen.width
});
console.log('OffscreenCanvas width='+offscreen.width)
var bitmap = offscreen.transferToImageBitmap();
ctx.transferFromImageBitmap(bitmap);
},
props2() {
const el =this.$refs.canvas2
const ctx = el.getContext('2d');
var offscreen = new OffscreenCanvas(100,200);
var offscreenCanvasCtx = offscreen.getContext("2d");
var img = new Image();
img.src = 'common/images/image.png';
offscreenCanvasCtx.drawImage(img, 0, 0, 100, 200);
prompt.showToast({
message: 'OffscreenCanvas height='+offscreen.height
});
console.log('OffscreenCanvas height='+offscreen.height)
var bitmap = offscreen.transferToImageBitmap();
ctx.transferFromImageBitmap(bitmap);
},
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvas/router/index.css 0 → 100644
浏览文件 @ bda0d522
/**
* 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%;
}
ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/prop/index.css 0 → 100644
浏览文件 @ bda0d522
/**
* 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%;
min-height: 65px;
font-size: 16px;
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%;
}
ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/prop/index.hml 0 → 100644
浏览文件 @ bda0d522
<!--/**
* 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">
OffscreenCanvasRenderingContext2D对象的通用属性
</text>
<text class="sub-title">
通用属性 -- fillStyle
</text>
<canvas id="fillStyleProp" ref="canvas1" style="width: 100%; height: 30px;margin-top: 5px; ">
</canvas>
<text class="sub-title">
通用属性 -- lineWidth
</text>
<canvas id="lineWidthProp" ref="canvas2" style="width: 100%; height: 30px;margin-top: 5px; ">
</canvas>
<text class="sub-title">
通用属性 -- lineCap
</text>
<canvas id="lineCapProp" ref="canvas3" style="width: 100%; height: 20px;margin-top: 5px;">
</canvas>
<text class="sub-title">
通用属性 -- lineJoin
</text>
<canvas id="lineJoinProp" ref="canvas4" style="width: 100%; height: 50px;margin-top: 5px;">
</canvas>
<text class="sub-title">
通用属性 -- miterLimit
</text>
<canvas id="miterLimitProp" ref="canvas5" style="width: 100%; height: 40px;margin-top: 5px;">
</canvas>
<text class="sub-title">
通用属性 -- font
</text>
<canvas id="fontProp" ref="canvas6" style="width: 100%; height: 30px;margin-top: 5px;">
</canvas>
<text class="sub-title">
通用属性 -- globalAlpha
</text>
<canvas id="globalAlphaProp" ref="canvas7" style="width: 100%; height: 80px;margin-top: 5px;">
</canvas>
<text class="sub-title">
通用属性 -- lineDashOffset
</text>
<canvas id="lineDashOffsetProp" ref="canvas8" style="width: 100%; height: 80px; background-color: #ffff00;margin-top: 5px;">
</canvas>
<text class="sub-title">
通用属性 -- globalCompositeOperation
</text>
<canvas id="globalCompositeOperationProp" 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">
通用属性 -- shadowBlur
</text>
<canvas id="shadowBlurProp" ref="canvas10" style="width: 100%; height: 70px;margin-top: 5px;">
</canvas>
<text class="sub-title">
通用属性 -- shadowColor
</text>
<canvas id="shadowColorProp" ref="canvas11" style="width: 100%; height: 70px;margin-top: 5px;">
</canvas>
<text class="sub-title">
通用属性 -- shadowOffsetX
</text>
<canvas id="shadowOffsetXProp" ref="canvas12" style="width: 100%; height: 50px;margin-top: 5px;">
</canvas>
<text class="sub-title">
通用属性 -- shadowOffsetY
</text>
<canvas id="shadowOffsetYProp" ref="canvas13" style="width: 100%; height: 60px;margin-top: 5px;">
</canvas>
<text class="sub-title">
通用属性 -- imageSmoothingEnabled
</text>
<canvas id="imageSmoothingEnabledProp" ref="canvas14" style="width: 100%; height: 30px;margin-bottom: 10px;margin-top: 5px;">
</canvas>
<text class="sub-title">
通用属性 -- strokeStyle
</text>
<canvas id="strokeStyleProp" ref="canvas15" 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">
OffscreenCanvasRenderingContext2D对象的特有属性
</text>
<text class="sub-title">
特有属性 -- filter
</text>
<canvas id="filterProp" ref="canvas16" style="width: 100%; height: 150px;">
</canvas>
</div>
</div>
</div>
ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/prop/index.js 0 → 100644
浏览文件 @ bda0d522
/**
* 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.props13()
this.props14()
this.props15()
this.props16()
},
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.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 = 20;
ctx.shadowColor = 'rgb(0,0,0)';
ctx.fillStyle = 'rgb(255,0,0)';
ctx.fillRect(10, 10, 70, 40);
},
props11() {
const el =this.$refs.canvas11;
const ctx = el.getContext('2d');
ctx.shadowBlur = 20;
ctx.shadowColor = 'rgb(0,0,255)';
ctx.fillStyle = 'rgb(255,0,0)';
ctx.fillRect(10, 10, 70, 40);
},
props12() {
const el =this.$refs.canvas12;
const ctx = el.getContext('2d');
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 20;
ctx.shadowColor = 'rgb(0,0,0)';
ctx.fillStyle = 'rgb(255,0,0)';
ctx.fillRect(10, 0, 70, 40);
},
props13() {
const el =this.$refs.canvas13;
const ctx = el.getContext('2d');
ctx.shadowBlur = 10;
ctx.shadowOffsetY = 20;
ctx.shadowColor = 'rgb(0,0,0)';
ctx.fillStyle = 'rgb(255,0,0)';
ctx.fillRect(10, 0, 70, 40);
},
props14() {
const el =this.$refs.canvas14;
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);
};
},
props15() {
const el =this.$refs.canvas15;
const ctx = el.getContext('2d');
ctx.lineWidth = 10;
ctx.strokeStyle = '#0000ff';
ctx.strokeRect(0, 0, 100, 30);
},
props16() {
const ctx =this.$refs.canvas16.getContext('2d');
var offscreen = new OffscreenCanvas(100, 300);
var offCanvas2 = offscreen.getContext("2d");
var img = new Image();
img.src = 'common/images/image.png';
offCanvas2.drawImage(img, 0, 0, 33, 33);
offCanvas2.filter = 'blur(5px)';
offCanvas2.drawImage(img, 33, 0, 33, 33);
offCanvas2.filter = 'grayscale(50%)';
offCanvas2.drawImage(img, 66, 0, 33, 33);
offCanvas2.filter = 'hue-rotate(90deg)';
offCanvas2.drawImage(img, 0, 33, 33, 33);
offCanvas2.filter = 'invert(100%)';
offCanvas2.drawImage(img, 33, 33, 33, 33);
offCanvas2.filter = 'drop-shadow(8px 8px 10px green)';
offCanvas2.drawImage(img, 66, 33, 33, 33);
offCanvas2.filter = 'brightness(0.4)';
offCanvas2.drawImage(img, 0, 66, 33, 33);
offCanvas2.filter = 'opacity(25%)';
offCanvas2.drawImage(img, 33, 66, 33, 33);
offCanvas2.filter = 'saturate(30%)';
offCanvas2.drawImage(img, 66, 66, 33, 33);
offCanvas2.filter = 'sepia(60%)';
offCanvas2.drawImage(img, 0, 99, 33, 33);
offCanvas2.filter = 'contrast(200%)';
offCanvas2.drawImage(img, 33, 99, 33, 33);
var bitmap = offscreen.transferToImageBitmap();
ctx.transferFromImageBitmap(bitmap);
}
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/obj_OffscreenCanvasRenderingContext2D/router/index.css 0 → 100644
浏览文件 @ bda0d522
/**
* 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%;
}
ace/ace_standard/src/main/js/default/pages/obj_Path2D/prop/index.css 0 → 100644
浏览文件 @ bda0d522
/**
* 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 */
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/obj_Path2D/prop/index.hml 0 → 100644
浏览文件 @ bda0d522
<!--/**
* 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>
</div>
ace/ace_standard/src/main/js/default/pages/obj_Path2D/prop/index.js 0 → 100644
浏览文件 @ bda0d522
/**
* 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:{
},
onShow(){
},
}
\ No newline at end of file
ace/ace_standard/src/main/js/default/pages/obj_Path2D/router/index.css 0 → 100644
浏览文件 @ bda0d522
/**
* 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%;
}
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或