tianzixuan/Doric
Archived
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: Image loadCallback add animated prop

Browse Source
This commit is contained in:
pengfei.zhou 2021-09-23 18:15:55 +08:00 committed by osborn
parent c452ebffda
commit 3fd8405e0b
10 changed files with 6638 additions and 6912 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
doric-android/doric/src/main/java/pub/doric/shader/ImageNode.java
View File

@ -23,6 +23,7 @@ import android.graphics.BitmapFactory;
import android.graphics.Color;
import android.graphics.Matrix;
import android.graphics.Rect;
import android.graphics.drawable.Animatable;
import android.graphics.drawable.BitmapDrawable;
import android.graphics.drawable.ColorDrawable;
import android.graphics.drawable.Drawable;
@ -284,11 +285,13 @@ public class ImageNode extends ViewNode<ImageView> {
callJSResponse(loadCallbackId, new JSONBuilder()
.put("width", DoricUtils.px2dp(bitmap.getWidth()))
.put("height", DoricUtils.px2dp(bitmap.getHeight()))
.put("animated", resource instanceof Animatable)
.toJSONObject());
} else {
callJSResponse(loadCallbackId, new JSONBuilder()
.put("width", DoricUtils.px2dp(resource.getIntrinsicWidth()))
.put("height", DoricUtils.px2dp(resource.getIntrinsicHeight()))
.put("animated", resource instanceof Animatable)
.toJSONObject());
}
}

30
doric-demo/src/ImageDemo.ts
View File

@ -75,28 +75,22 @@ class ImageDemo extends Panel {
bottom: 0
},
imageScale: 2,
}),
label('Gif'),
label('Gif '),
image({
imageUrl: "https://misc.aotu.io/ONE-SUNDAY/world-cup_2014_42.gif",
imageUrl: "https://www.w3.org/People/mimasa/test/imgformat/img/w3c_home_animation.gif",
scaleType: ScaleType.ScaleToFill,
loadCallback: function (ret) {
log('this')
log('loadCallback', ret)
},
imageScale: 2,
imageScale: 3,
}),
label('APNG'),
image({
imageUrl: "https://misc.aotu.io/ONE-SUNDAY/world_cup_2014_42.png",
loadCallback: (ret) => {
}
imageUrl: "https://upload.wikimedia.org/wikipedia/commons/1/14/Animated_PNG_example_bouncing_beach_ball.png",
}),
label('Animated WebP'),
image({
imageUrl: "https://p.upyun.com/demo/webp/webp/animated-gif-0.webp",
loadCallback: (ret) => {
}
}),
label('WebP'),
imageView = image({
@ -104,12 +98,12 @@ class ImageDemo extends Panel {
layoutConfig: layoutConfig().just(),
width: 200,
height: 200,
// loadCallback: (ret) => {
// if (ret) {
// imageView.width = ret.width
// imageView.height = ret.height
// }
// }
loadCallback: (ret) => {
if (ret) {
imageView.width = ret.width
imageView.height = ret.height
}
}
}),
label('ScaleToFill'),
image({

4
doric-iOS/Example/Podfile
View File

@ -8,9 +8,9 @@ target 'Example' do
pod 'DoricCore', :path => '../../'
pod 'DoricDevkit', :path => '../../'
#pod 'YYWebImage'
pod 'YYWebImage'
#pod 'YYImage/WebP'
pod 'YYImage/WebP'
pod 'SDWebImage'

116
doric-iOS/Pod/Classes/Shader/DoricImageNode.m
View File

@ -149,14 +149,14 @@ - (UIImage *)currentPlaceHolderImage {
UIColor *color = DoricColor(self.placeHolderColor);
CGRect rect = CGRectMake(0, 0, 1, 1);
self.view.contentMode = UIViewContentModeScaleToFill;
if (@available(iOS 10.0, *)) {
UIGraphicsImageRendererFormat *format = [[UIGraphicsImageRendererFormat alloc] init];
format.scale = [UIScreen mainScreen].scale;
UIGraphicsImageRenderer *render = [[UIGraphicsImageRenderer alloc]initWithSize:rect.size format:format];
UIImage *image = [render imageWithActions:^(UIGraphicsImageRendererContext * _Nonnull rendererContext) {
UIGraphicsImageRenderer *render = [[UIGraphicsImageRenderer alloc] initWithSize:rect.size format:format];
UIImage *image = [render imageWithActions:^(UIGraphicsImageRendererContext *_Nonnull rendererContext) {
CGContextRef context = rendererContext.CGContext;
CGContextSetFillColorWithColor(context, color.CGColor);
CGContextFillRect(context, rect);
}];
@ -205,14 +205,14 @@ - (UIImage *)currentErrorImage {
UIColor *color = DoricColor(self.errorColor);
CGRect rect = CGRectMake(0, 0, 1, 1);
self.view.contentMode = UIViewContentModeScaleToFill;
if (@available(iOS 10.0, *)) {
UIGraphicsImageRendererFormat *format = [[UIGraphicsImageRendererFormat alloc] init];
format.scale = [UIScreen mainScreen].scale;
UIGraphicsImageRenderer *render = [[UIGraphicsImageRenderer alloc]initWithSize:rect.size format:format];
UIImage *image = [render imageWithActions:^(UIGraphicsImageRendererContext * _Nonnull rendererContext) {
UIGraphicsImageRenderer *render = [[UIGraphicsImageRenderer alloc] initWithSize:rect.size format:format];
UIImage *image = [render imageWithActions:^(UIGraphicsImageRendererContext *_Nonnull rendererContext) {
CGContextRef context = rendererContext.CGContext;
CGContextSetFillColorWithColor(context, color.CGColor);
CGContextFillRect(context, rect);
}];
@ -240,7 +240,7 @@ - (void)blendView:(UIImageView *)view forPropName:(NSString *)name propValue:(id
#if DORIC_USE_YYWEBIMAGE
dispatch_async([_YYWebImageSetter setterQueue], ^{
[view yy_cancelCurrentImageRequest];
[view yy_setImageWithURL:[NSURL URLWithString:prop] placeholder:[self currentPlaceHolderImage] options:0 completion:^(UIImage *image, NSURL *url, YYWebImageFromType from, YYWebImageStage stage, NSError *error) {
__strong typeof(_self) self = _self;
if (self.placeHolderColor || self.errorColor) {
@ -256,12 +256,23 @@ - (void)blendView:(UIImageView *)view forPropName:(NSString *)name propValue:(id
}
} else if (image && stage == YYWebImageStageFinished) {
if (image.scale != self.imageScale) {
image = [YYImage imageWithCGImage:image.CGImage scale:self.imageScale orientation:image.imageOrientation];
if ([image isKindOfClass:YYImage.class] && ((YYImage *) image).animatedImageData != nil) {
image = [YYImage imageWithData:((YYImage *) image).animatedImageData scale:self.imageScale];
} else {
image = [YYImage imageWithCGImage:image.CGImage scale:self.imageScale orientation:image.imageOrientation];
}
self.view.image = image;
}
if (self.loadCallbackId.length > 0) {
[self callJSResponse:self.loadCallbackId,
@{@"width": @(image.size.width), @"height": @(image.size.height)},
@{
@"width": @(image.size.width),
@"height": @(image.size.height),
@"animated": ([image isKindOfClass:YYImage.class]
&& ((YYImage *) image).animatedImageData != nil)
? @(YES)
: @(NO),
},
nil];
}
if (async) {
@ -296,7 +307,14 @@ - (void)blendView:(UIImageView *)view forPropName:(NSString *)name propValue:(id
} else {
if (self.loadCallbackId.length > 0) {
[self callJSResponse:self.loadCallbackId,
@{@"width": @(image.size.width), @"height": @(image.size.height)},
@{
@"width": @(image.size.width),
@"height": @(image.size.height),
@"animated": ([image isKindOfClass:SDAnimatedImage.class]
&& ((SDAnimatedImage *) image).animatedImageFrameCount > 0)
? @(YES)
: @(NO),
},
nil];
}
if (async) {
@ -348,6 +366,28 @@ - (void)blendView:(UIImageView *)view forPropName:(NSString *)name propValue:(id
UIImage *image = [UIImage imageWithData:imageData scale:self.imageScale];
#endif
view.image = image;
if (self.loadCallbackId.length > 0) {
if (image) {
[self callJSResponse:self.loadCallbackId,
@{
@"width": @(image.size.width),
@"height": @(image.size.height),
#if DORIC_USE_YYWEBIMAGE
@"animated": (image.animatedImageData != nil) ? @(YES) : @(NO),
#elif DORIC_USE_SDWEBIMAGE
@"animated": ([image isKindOfClass:SDAnimatedImage.class]
&& ((SDAnimatedImage *) image).animatedImageFrameCount > 0)
? @(YES)
: @(NO),
#else
@"animated": @(NO),
#endif
},
nil];
} else {
[self callJSResponse:self.loadCallbackId, nil];
}
}
} else if ([@"isBlur" isEqualToString:name]) {
NSInteger value = [prop intValue];
if (value == 1) {
@ -389,7 +429,23 @@ - (void)blendView:(UIImageView *)view forPropName:(NSString *)name propValue:(id
if (self.loadCallbackId.length > 0) {
if (image) {
[self callJSResponse:self.loadCallbackId,
@{@"width": @(image.size.width), @"height": @(image.size.height)},
@{
@"width": @(image.size.width),
@"height": @(image.size.height),
#if DORIC_USE_YYWEBIMAGE
@"animated": ([image isKindOfClass:YYImage.class]
&& ((YYImage *) image).animatedImageData != nil)
? @(YES)
: @(NO),
#elif DORIC_USE_SDWEBIMAGE
@"animated": ([image isKindOfClass:SDAnimatedImage.class]
&& ((SDAnimatedImage *) image).animatedImageFrameCount > 0)
? @(YES)
: @(NO),
#else
@"animated": @(NO),
#endif
},
nil];
} else {
[self callJSResponse:self.loadCallbackId, nil];
@ -405,7 +461,23 @@ - (void)blendView:(UIImageView *)view forPropName:(NSString *)name propValue:(id
if (self.loadCallbackId.length > 0) {
if (image) {
[self callJSResponse:self.loadCallbackId,
@{@"width": @(image.size.width), @"height": @(image.size.height)},
@{
@"width": @(image.size.width),
@"height": @(image.size.height),
#if DORIC_USE_YYWEBIMAGE
@"animated": ([image isKindOfClass:YYImage.class]
&& ((YYImage *) image).animatedImageData != nil)
? @(YES)
: @(NO),
#elif DORIC_USE_SDWEBIMAGE
@"animated": ([image isKindOfClass:SDAnimatedImage.class]
&& ((SDAnimatedImage *) image).animatedImageFrameCount > 0)
? @(YES)
: @(NO),
#else
@"animated": @(NO),
#endif
},
nil];
} else {
[self callJSResponse:self.loadCallbackId, nil];
@ -418,7 +490,21 @@ - (void)blendView:(UIImageView *)view forPropName:(NSString *)name propValue:(id
if (self.loadCallbackId.length > 0) {
if (image) {
[self callJSResponse:self.loadCallbackId,
@{@"width": @(image.size.width), @"height": @(image.size.height)},
@{
@"width": @(image.size.width),
@"height": @(image.size.height),
#if DORIC_USE_YYWEBIMAGE
@"animated": @([image isKindOfClass:YYImage.class] && ((YYImage *) image).animatedImageData != nil),
#elif DORIC_USE_SDWEBIMAGE
@"animated": ([image isKindOfClass:SDAnimatedImage.class]
&& ((SDAnimatedImage *) image).animatedImageFrameCount > 0)
? @(YES)
: @(NO),
#else
@"animated": @(false),
#endif
},
nil];
} else {
[self callJSResponse:self.loadCallbackId, nil];

13374
doric-js/bundle/doric-sandbox.es5.js
View File

File diff suppressed because it is too large Load Diff

1
doric-js/index.d.ts vendored
View File

@ -659,6 +659,7 @@ declare module 'doric/lib/src/widget/image' {
loadCallback?: (image: {
width: number;
height: number;
animated: boolean;
} | undefined) => void;
/**
* Default is Environment.screenScale.

1
doric-js/lib/src/widget/image.d.ts vendored
View File

@ -53,6 +53,7 @@ export declare class Image extends View {
loadCallback?: (image: {
width: number;
height: number;
animated: boolean;
} | undefined) => void;
/**
* Default is Environment.screenScale.

2
doric-js/src/widget/image.ts
View File

@ -90,7 +90,7 @@ export class Image extends View {
errorColor?: Color
@Property
loadCallback?: (image: { width: number; height: number } | undefined) => void
loadCallback?: (image: { width: number; height: number; animated: boolean } | undefined) => void
/**
* Default is Environment.screenScale.

17
doric-web/dist/index.js vendored
View File

@ -4049,7 +4049,7 @@ var __metadata$2 = (undefined && undefined.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
/**
* @deprecated The class should not be used
* @deprecated The class should not be used, please use GestureContainer class instead
*/
class Draggable extends Stack {
}
@ -4058,7 +4058,7 @@ __decorate$2([
__metadata$2("design:type", Function)
], Draggable.prototype, "onDrag", void 0);
/**
* @deprecated The function should not be used
* @deprecated The function should not be used, please use gestureContainer function instead
*/
function draggable(views, config) {
const ret = new Draggable;
@ -5408,7 +5408,7 @@ var doric_web = (function (exports, axios, sandbox) {
}());
});
var __awaiter$1 = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@ -5420,7 +5420,7 @@ var doric_web = (function (exports, axios, sandbox) {
const loaders = [
{
filter: () => true,
request: (source) => __awaiter$1(void 0, void 0, void 0, function* () {
request: (source) => __awaiter(void 0, void 0, void 0, function* () {
const result = yield axios__default['default'].get(source);
return result.data;
})
@ -5430,7 +5430,7 @@ var doric_web = (function (exports, axios, sandbox) {
loaders.push(loader);
}
function loadDoricJSBundle(source) {
return __awaiter$1(this, void 0, void 0, function* () {
return __awaiter(this, void 0, void 0, function* () {
const matched = loaders.filter(e => e.filter(source));
if (matched.length > 0) {
return matched[matched.length - 1].request(source);
@ -5447,7 +5447,6 @@ var doric_web = (function (exports, axios, sandbox) {
}
}
exports.LayoutSpec = void 0;
(function (LayoutSpec) {
LayoutSpec[LayoutSpec["EXACTLY"] = 0] = "EXACTLY";
LayoutSpec[LayoutSpec["WRAP_CONTENT"] = 1] = "WRAP_CONTENT";
@ -7869,7 +7868,7 @@ ${content}
}
}
var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
var __awaiter$1 = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@ -7883,7 +7882,7 @@ ${content}
smoothscroll.polyfill();
registerDoricJSLoader({
filter: (source) => source.startsWith("assets://"),
request: (source) => __awaiter(void 0, void 0, void 0, function* () {
request: (source) => __awaiter$1(void 0, void 0, void 0, function* () {
const ret = yield axios__default['default'].get(source.replace("assets://", `${window.location.href}/../../doric-demo/bundle/`));
return ret.data;
})
@ -7917,8 +7916,6 @@ ${content}
exports.toPixelString = toPixelString;
exports.toRGBAString = toRGBAString;
Object.defineProperty(exports, '__esModule', { value: true });
return exports;
}({}, axios, doric));

2
doric-web/dist/index.js.map vendored
View File

File diff suppressed because one or more lines are too long