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

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

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

4
doric-iOS/Example/Podfile
View File

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

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

@ -149,14 +149,14 @@ - (UIImage *)currentPlaceHolderImage {
UIColor *color = DoricColor(self.placeHolderColor); UIColor *color = DoricColor(self.placeHolderColor);
CGRect rect = CGRectMake(0, 0, 1, 1); CGRect rect = CGRectMake(0, 0, 1, 1);
self.view.contentMode = UIViewContentModeScaleToFill; self.view.contentMode = UIViewContentModeScaleToFill;
if (@available(iOS 10.0, *)) { if (@available(iOS 10.0, *)) {
UIGraphicsImageRendererFormat *format = [[UIGraphicsImageRendererFormat alloc] init]; UIGraphicsImageRendererFormat *format = [[UIGraphicsImageRendererFormat alloc] init];
format.scale = [UIScreen mainScreen].scale; format.scale = [UIScreen mainScreen].scale;
UIGraphicsImageRenderer *render = [[UIGraphicsImageRenderer alloc]initWithSize:rect.size format:format]; UIGraphicsImageRenderer *render = [[UIGraphicsImageRenderer alloc] initWithSize:rect.size format:format];
UIImage *image = [render imageWithActions:^(UIGraphicsImageRendererContext * _Nonnull rendererContext) { UIImage *image = [render imageWithActions:^(UIGraphicsImageRendererContext *_Nonnull rendererContext) {
CGContextRef context = rendererContext.CGContext; CGContextRef context = rendererContext.CGContext;
CGContextSetFillColorWithColor(context, color.CGColor); CGContextSetFillColorWithColor(context, color.CGColor);
CGContextFillRect(context, rect); CGContextFillRect(context, rect);
}]; }];
@ -205,14 +205,14 @@ - (UIImage *)currentErrorImage {
UIColor *color = DoricColor(self.errorColor); UIColor *color = DoricColor(self.errorColor);
CGRect rect = CGRectMake(0, 0, 1, 1); CGRect rect = CGRectMake(0, 0, 1, 1);
self.view.contentMode = UIViewContentModeScaleToFill; self.view.contentMode = UIViewContentModeScaleToFill;
if (@available(iOS 10.0, *)) { if (@available(iOS 10.0, *)) {
UIGraphicsImageRendererFormat *format = [[UIGraphicsImageRendererFormat alloc] init]; UIGraphicsImageRendererFormat *format = [[UIGraphicsImageRendererFormat alloc] init];
format.scale = [UIScreen mainScreen].scale; format.scale = [UIScreen mainScreen].scale;
UIGraphicsImageRenderer *render = [[UIGraphicsImageRenderer alloc]initWithSize:rect.size format:format]; UIGraphicsImageRenderer *render = [[UIGraphicsImageRenderer alloc] initWithSize:rect.size format:format];
UIImage *image = [render imageWithActions:^(UIGraphicsImageRendererContext * _Nonnull rendererContext) { UIImage *image = [render imageWithActions:^(UIGraphicsImageRendererContext *_Nonnull rendererContext) {
CGContextRef context = rendererContext.CGContext; CGContextRef context = rendererContext.CGContext;
CGContextSetFillColorWithColor(context, color.CGColor); CGContextSetFillColorWithColor(context, color.CGColor);
CGContextFillRect(context, rect); CGContextFillRect(context, rect);
}]; }];
@ -240,7 +240,7 @@ - (void)blendView:(UIImageView *)view forPropName:(NSString *)name propValue:(id
#if DORIC_USE_YYWEBIMAGE #if DORIC_USE_YYWEBIMAGE
dispatch_async([_YYWebImageSetter setterQueue], ^{ dispatch_async([_YYWebImageSetter setterQueue], ^{
[view yy_cancelCurrentImageRequest]; [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) { [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; __strong typeof(_self) self = _self;
if (self.placeHolderColor || self.errorColor) { if (self.placeHolderColor || self.errorColor) {
@ -256,12 +256,23 @@ - (void)blendView:(UIImageView *)view forPropName:(NSString *)name propValue:(id
} }
} else if (image && stage == YYWebImageStageFinished) { } else if (image && stage == YYWebImageStageFinished) {
if (image.scale != self.imageScale) { 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; self.view.image = image;
} }
if (self.loadCallbackId.length > 0) { if (self.loadCallbackId.length > 0) {
[self callJSResponse:self.loadCallbackId, [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]; nil];
} }
if (async) { if (async) {
@ -296,7 +307,14 @@ - (void)blendView:(UIImageView *)view forPropName:(NSString *)name propValue:(id
} else { } else {
if (self.loadCallbackId.length > 0) { if (self.loadCallbackId.length > 0) {
[self callJSResponse:self.loadCallbackId, [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]; nil];
} }
if (async) { if (async) {
@ -348,6 +366,28 @@ - (void)blendView:(UIImageView *)view forPropName:(NSString *)name propValue:(id
UIImage *image = [UIImage imageWithData:imageData scale:self.imageScale]; UIImage *image = [UIImage imageWithData:imageData scale:self.imageScale];
#endif #endif
view.image = image; 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]) { } else if ([@"isBlur" isEqualToString:name]) {
NSInteger value = [prop intValue]; NSInteger value = [prop intValue];
if (value == 1) { if (value == 1) {
@ -389,7 +429,23 @@ - (void)blendView:(UIImageView *)view forPropName:(NSString *)name propValue:(id
if (self.loadCallbackId.length > 0) { if (self.loadCallbackId.length > 0) {
if (image) { if (image) {
[self callJSResponse:self.loadCallbackId, [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]; nil];
} else { } else {
[self callJSResponse:self.loadCallbackId, nil]; [self callJSResponse:self.loadCallbackId, nil];
@ -405,7 +461,23 @@ - (void)blendView:(UIImageView *)view forPropName:(NSString *)name propValue:(id
if (self.loadCallbackId.length > 0) { if (self.loadCallbackId.length > 0) {
if (image) { if (image) {
[self callJSResponse:self.loadCallbackId, [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]; nil];
} else { } else {
[self callJSResponse:self.loadCallbackId, nil]; [self callJSResponse:self.loadCallbackId, nil];
@ -418,7 +490,21 @@ - (void)blendView:(UIImageView *)view forPropName:(NSString *)name propValue:(id
if (self.loadCallbackId.length > 0) { if (self.loadCallbackId.length > 0) {
if (image) { if (image) {
[self callJSResponse:self.loadCallbackId, [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]; nil];
} else { } else {
[self callJSResponse:self.loadCallbackId, nil]; [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: { loadCallback?: (image: {
width: number; width: number;
height: number; height: number;
animated: boolean;
} | undefined) => void; } | undefined) => void;
/** /**
* Default is Environment.screenScale. * 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: { loadCallback?: (image: {
width: number; width: number;
height: number; height: number;
animated: boolean;
} | undefined) => void; } | undefined) => void;
/** /**
* Default is Environment.screenScale. * Default is Environment.screenScale.

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

@ -90,7 +90,7 @@ export class Image extends View {
errorColor?: Color errorColor?: Color
@Property @Property
loadCallback?: (image: { width: number; height: number } | undefined) => void loadCallback?: (image: { width: number; height: number; animated: boolean } | undefined) => void
/** /**
* Default is Environment.screenScale. * 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); 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 { class Draggable extends Stack {
} }
@ -4058,7 +4058,7 @@ __decorate$2([
__metadata$2("design:type", Function) __metadata$2("design:type", Function)
], Draggable.prototype, "onDrag", void 0); ], 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) { function draggable(views, config) {
const ret = new Draggable; 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); }); } function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) { return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } 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 = [ const loaders = [
{ {
filter: () => true, 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); const result = yield axios__default['default'].get(source);
return result.data; return result.data;
}) })
@ -5430,7 +5430,7 @@ var doric_web = (function (exports, axios, sandbox) {
loaders.push(loader); loaders.push(loader);
} }
function loadDoricJSBundle(source) { 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)); const matched = loaders.filter(e => e.filter(source));
if (matched.length > 0) { if (matched.length > 0) {
return matched[matched.length - 1].request(source); return matched[matched.length - 1].request(source);
@ -5447,7 +5447,6 @@ var doric_web = (function (exports, axios, sandbox) {
} }
} }
exports.LayoutSpec = void 0;
(function (LayoutSpec) { (function (LayoutSpec) {
LayoutSpec[LayoutSpec["EXACTLY"] = 0] = "EXACTLY"; LayoutSpec[LayoutSpec["EXACTLY"] = 0] = "EXACTLY";
LayoutSpec[LayoutSpec["WRAP_CONTENT"] = 1] = "WRAP_CONTENT"; 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); }); } function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) { return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } } function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
@ -7883,7 +7882,7 @@ ${content}
smoothscroll.polyfill(); smoothscroll.polyfill();
registerDoricJSLoader({ registerDoricJSLoader({
filter: (source) => source.startsWith("assets://"), 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/`)); const ret = yield axios__default['default'].get(source.replace("assets://", `${window.location.href}/../../doric-demo/bundle/`));
return ret.data; return ret.data;
}) })
@ -7917,8 +7916,6 @@ ${content}
exports.toPixelString = toPixelString; exports.toPixelString = toPixelString;
exports.toRGBAString = toRGBAString; exports.toRGBAString = toRGBAString;
Object.defineProperty(exports, '__esModule', { value: true });
return exports; return exports;
}({}, axios, doric)); }({}, axios, doric));

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

File diff suppressed because one or more lines are too long