Skip to content

Commit

Permalink
fix: v2 image bugfix
Browse files Browse the repository at this point in the history
  • Loading branch information
李志豪 authored and 李志豪 committed Sep 4, 2024
1 parent ce3b461 commit 90ead3d
Show file tree
Hide file tree
Showing 2 changed files with 55 additions and 2 deletions.
18 changes: 17 additions & 1 deletion src/skia/graphic.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import SkiaPathRebuilder from './SkiaPathRebuilder';
import { ReactElement } from 'react';
import mapStyleToAttrs from 'zrender/lib/svg/mapStyleToAttrs';
import {
Skia,
Path as SkiaPath,
Text as SkiaText,
matchFont,
Expand Down Expand Up @@ -313,17 +314,32 @@ export function brushSVGImage(
y={y}
width={dw}
height={dh}
{...attrs}
>
{effects}
</SkiaImage>
);
}
type CustomImageProps = SkiaProps<ImageProps> & {
href: string;
height?: number;
width?: number;
children?: ReactElement[];
};
function SkiaImage({ href, children, ...attrs }: CustomImageProps) {
const skiaImage = useImage(href);
let skiaImage = useImage(href);
// Base64 image
if (href.indexOf(';base64') > -1) {
const base64Data = href.split(',')[1] || '';
const binaryData = Skia.Data.fromBase64(base64Data);
skiaImage = Skia.Image.MakeImageFromEncoded(binaryData);
}
const imageInfo = skiaImage?.getImageInfo();
if (imageInfo && !attrs.width) {
const { height: oriHeight, width: oriWidth } = imageInfo;
attrs.width = attrs.height ? (attrs.height / oriHeight) * oriWidth : 0;
}
// attrs.fit = 'fill'; // Here you can set 'Image' fit mode
return (
<Image {...attrs} image={skiaImage}>
{children}
Expand Down
39 changes: 38 additions & 1 deletion src/svg/svgChart.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ import React, {
useCallback,
} from 'react';

import { Platform, View } from 'react-native';
import { Platform, View, Image as RNImage } from 'react-native';

import {
setPlatformAPI,
Expand Down Expand Up @@ -80,6 +80,32 @@ const tagMap = {
mask: Mask,
};

const imageSizeMap: any = {};

interface ImageSize {
width: number;
height: number;
}

// 使用 async/await 获取图片尺寸
const getImageSize = async (uri: string): Promise<ImageSize> => {
return new Promise((resolve, reject) => {
RNImage.getSize(
uri,
(width, height) => resolve({ width, height }),
(error) => reject(error)
);
});
};

async function imageInit(url: string) {
const { width, height } = await getImageSize(url);
imageSizeMap[url] = {
width,
height,
};
}

function toCamelCase(str: string) {
var reg = /-(\w)/g;
return str.replace(reg, function (_: any, $1: string) {
Expand Down Expand Up @@ -170,6 +196,17 @@ function SvgEle(props: SVGVEleProps) {
</Tag>
);
}
if (tag === 'image' && !attrs.width) {
if (imageSizeMap[attrs.href]) {
const { width, height } = imageSizeMap[attrs.href];
attrs.width = (attrs.height / height) * width;
if (attrs.height === 0) {
attrs.opacity = 0;
}
} else {
imageInit(attrs.href);
}
}
return (
<Tag key={node.key} {...attrs}>
{children?.map((child) => <SvgEle key={child.key} node={child} />)}
Expand Down

0 comments on commit 90ead3d

Please sign in to comment.