141 lines
167 KiB
JavaScript
141 lines
167 KiB
JavaScript
|
'use strict';
|
||
|
|
||
|
var doric = require('doric');
|
||
|
|
||
|
const colors = [
|
||
|
"#70a1ff",
|
||
|
"#7bed9f",
|
||
|
"#ff6b81",
|
||
|
"#a4b0be",
|
||
|
"#f0932b",
|
||
|
"#eb4d4b",
|
||
|
"#6ab04c",
|
||
|
"#e056fd",
|
||
|
"#686de0",
|
||
|
"#30336b",
|
||
|
].map(e => doric.Color.parse(e));
|
||
|
function label(str) {
|
||
|
return doric.text({
|
||
|
text: str,
|
||
|
textSize: 16,
|
||
|
});
|
||
|
}
|
||
|
|
||
|
const img_base64 = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEASABIAAD/4Qm8aHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLwA8P3hwYWNrZXQgYmVnaW49Iu+7vyIgaWQ9Ilc1TTBNcENlaGlIenJlU3pOVGN6a2M5ZCI/PiA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJYTVAgQ29yZSA0LjQuMC1FeGl2MiI+IDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+IDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyI+IDxkYzpjcmVhdG9yPiA8cmRmOlNlcT4gPHJkZjpsaT5WZWN0b3JTdG9jay5jb20vNzMxNTkwPC9yZGY6bGk+IDwvcmRmOlNlcT4gPC9kYzpjcmVhdG9yPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA8P3hwYWNrZXQgZW5kPSJ3Ij8+/9sAQwADAgIDAgIDAwMDBAMDBAUIBQUEBAUKBwcGCAwKDAwLCgsLDQ4SEA0OEQ4LCxAWEBETFBUVFQwPFxgWFBgSFBUU/9sAQwEDBAQFBAUJBQUJFA0LDRQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQUFBQU/8AAEQgDDAPoAwERAAIRAQMRAf/EAB0AAQABBAMBAAAAAAAAAAAAAAAHBAUGCAECAwn/xAB8EAAABQICAwQPDQ8NDAkDAgcAAQIDBAUGBxEIEiETFDFRFRgZIkFTYXGBkZKVwdHSCRYXMlJWV1hncpbC0yMzQlVidoKToaKmsbK15Dc4c3R1lJejpKWztNQkJSYnNDZDZoO2w/A1REVGVGRlhIUoOUhjxkd3huHE4/H/xAAYAQEBAQEBAAAAAAAAAAAAAAAAAQIDBP/EACoRAQADAAICAwADAAIABwAAAAABESECEhRhAzFBEyJRMnEzQkOBocHw/9oADAMBAAIRAxEAPwD6pgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
|
||
|
|
||
|
var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
|
||
|
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
||
|
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
||
|
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
||
|
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
||
|
};
|
||
|
const imageUrl = 'https://img.zcool.cn/community/01e75b5da933daa801209e1ffa4649.jpg@1280w_1l_2o_100sh.jpg';
|
||
|
let ImageDemo = class ImageDemo extends doric.Panel {
|
||
|
build(rootView) {
|
||
|
let imageView;
|
||
|
doric.scroller(doric.vlayout([
|
||
|
doric.text({
|
||
|
text: "Image Demo",
|
||
|
layoutConfig: doric.layoutConfig().configWidth(doric.LayoutSpec.MOST),
|
||
|
textSize: 30,
|
||
|
textColor: doric.Color.WHITE,
|
||
|
backgroundColor: colors[5],
|
||
|
textAlignment: doric.gravity().center(),
|
||
|
height: 50,
|
||
|
}),
|
||
|
label('Gif'),
|
||
|
doric.image({
|
||
|
imageUrl: "https://misc.aotu.io/ONE-SUNDAY/world-cup_2014_42.gif",
|
||
|
scaleType: doric.ScaleType.ScaleToFill,
|
||
|
loadCallback: function (ret) {
|
||
|
doric.log('this');
|
||
|
doric.log('loadCallback', ret);
|
||
|
}
|
||
|
}),
|
||
|
label('APNG'),
|
||
|
doric.image({
|
||
|
imageUrl: "https://misc.aotu.io/ONE-SUNDAY/world_cup_2014_42.png",
|
||
|
loadCallback: (ret) => {
|
||
|
}
|
||
|
}),
|
||
|
label('Animated WebP'),
|
||
|
doric.image({
|
||
|
imageUrl: "https://p.upyun.com/demo/webp/webp/animated-gif-0.webp",
|
||
|
loadCallback: (ret) => {
|
||
|
}
|
||
|
}),
|
||
|
label('WebP'),
|
||
|
imageView = doric.image({
|
||
|
imageUrl: "https://p.upyun.com/demo/webp/webp/jpg-0.webp",
|
||
|
loadCallback: (ret) => {
|
||
|
if (ret) {
|
||
|
imageView.width = ret.width;
|
||
|
imageView.height = ret.height;
|
||
|
}
|
||
|
}
|
||
|
}),
|
||
|
label('ScaleToFill'),
|
||
|
doric.image({
|
||
|
imageUrl,
|
||
|
width: 300,
|
||
|
height: 300,
|
||
|
isBlur: true,
|
||
|
border: {
|
||
|
width: 2,
|
||
|
color: doric.Color.GRAY,
|
||
|
},
|
||
|
scaleType: doric.ScaleType.ScaleToFill,
|
||
|
layoutConfig: doric.layoutConfig().just(),
|
||
|
loadCallback: (ret) => {
|
||
|
}
|
||
|
}),
|
||
|
label('ScaleAspectFit'),
|
||
|
doric.image({
|
||
|
imageUrl,
|
||
|
width: 300,
|
||
|
height: 300,
|
||
|
border: {
|
||
|
width: 2,
|
||
|
color: doric.Color.GRAY,
|
||
|
},
|
||
|
scaleType: doric.ScaleType.ScaleAspectFit,
|
||
|
layoutConfig: doric.layoutConfig().just(),
|
||
|
}),
|
||
|
label('ScaleAspectFill'),
|
||
|
doric.image({
|
||
|
imageUrl,
|
||
|
width: 300,
|
||
|
height: 300,
|
||
|
border: {
|
||
|
width: 2,
|
||
|
color: doric.Color.GRAY,
|
||
|
},
|
||
|
scaleType: doric.ScaleType.ScaleAspectFill,
|
||
|
layoutConfig: doric.layoutConfig().just(),
|
||
|
}),
|
||
|
label('ImageBase64'),
|
||
|
doric.image({
|
||
|
imageBase64: img_base64,
|
||
|
width: 300,
|
||
|
height: 300,
|
||
|
border: {
|
||
|
width: 2,
|
||
|
color: doric.Color.GRAY,
|
||
|
},
|
||
|
scaleType: doric.ScaleType.ScaleAspectFill,
|
||
|
layoutConfig: doric.layoutConfig().just(),
|
||
|
}),
|
||
|
]).apply({
|
||
|
layoutConfig: doric.layoutConfig().most().configHeight(doric.LayoutSpec.FIT),
|
||
|
gravity: doric.gravity().center(),
|
||
|
space: 10,
|
||
|
})).apply({
|
||
|
layoutConfig: doric.layoutConfig().most(),
|
||
|
}).in(rootView);
|
||
|
}
|
||
|
};
|
||
|
ImageDemo = __decorate([
|
||
|
Entry
|
||
|
], ImageDemo);
|
||
|
//# sourceMappingURL=ImageDemo.js.map
|