Skip to content

Latest commit

 

History

History
344 lines (270 loc) · 14.5 KB

getstarted.md

File metadata and controls

344 lines (270 loc) · 14.5 KB
Raw

Get Started

Translations: 简体中文

Components

The ZoomImage library includes several components to choose from, so you can choose the right one for your needs.

Different components need to import different dependencies, please refer to README to import the corresponding dependencies

compose android：

compose multiplatform：

  • ZoomImage：
    • The most basic zoom Image component, not integrate the image loading library
    • Additional work needs to be done to support network pictures and subsampling
    • Reference example ZoomImageSample

view：

Summary：

  • Components with integrated image loaders can support image and subsampling from any source without any additional work
  • Components that do not integrate an image loader can only display local images and require an additional call to the subsampling.setImageSource(ImageSource) method to support subsampling functionality

Examples

compose android

SketchZoomAsyncImage(
    request = DisplayRequest(LocalContext.current, "http://sample.com/sample.jpg") {
        placeholder(R.drawable.placeholder)
        crossfade()
    },
    contentDescription = "view image",
    modifier = Modifier.fillMaxSize(),
)

CoilZoomAsyncImage(
    model = ImageRequest.Builder(LocalContext.current).apply {
        data("http://sample.com/sample.jpg")
        placeholder(R.drawable.placeholder)
        crossfade(true)
    }.build(),
    contentDescription = "view image",
    modifier = Modifier.fillMaxSize(),
)

GlideZoomAsyncImage(
    model = "http://sample.com/sample.jpg",
    contentDescription = "view image",
    modifier = Modifier.fillMaxSize(),
) {
    it.placeholder(R.drawable.placeholder)
}

compose multiplatform

/* 
 * android
 */
val state: ZoomState by rememberZoomState()
val context = LocalContext.current
LaunchedEffect(Unit) {
    state.subsampling.setImageSource(ImageSource.fromResource(context, R.drawable.huge_image))
}
ZoomImage(
    painter = painterResource(R.drawable.huge_image_thumbnail),
    contentDescription = "view image",
    modifier = Modifier.fillMaxSize(),
    state = state,
)

/* 
 * desktop
 */
val state: ZoomState by rememberZoomState()
LaunchedEffect(Unit) {
    state.subsampling.setImageSource(ImageSource.fromResource("huge_image.jpeg"))
}
ZoomImage(
    painter = painterResource("huge_image_thumbnail.jpeg"),
    contentDescription = "view image",
    modifier = Modifier.fillMaxSize(),
    state = state,
)

view:

val sketchZoomImageView = SketchZoomImageView(context)
sketchZoomImageView.displayImage("http://sample.com/sample.jpg") {
    placeholder(R.drawable.placeholder)
    crossfade()
}

val coilZoomImageView = CoilZoomImageView(context)
coilZoomImageView.load("http://sample.com/sample.jpg") {
    placeholder(R.drawable.placeholder)
    crossfade(true)
}

val glideZoomImageView = GlideZoomImageView(context)
Glide.with(this@GlideZoomImageViewFragment)
    .load("http://sample.com/sample.jpg")
    .placeholder(R.drawable.placeholder)
    .into(glideZoomImageView)

val picassoZoomImageView = PicassoZoomImageView(context)
picassoZoomImageViewImage.loadImage("http://sample.com/sample.jpg") {
    placeholder(R.drawable.placeholder)
}

val zoomImageView = ZoomImageView(context)
zoomImageView.setImageResource(R.drawable.huge_image_thumbnail)
val imageSource = ImageSource.fromResource(context, R.drawable.huge_image)
zoomImageView.subsampling.setImageSource(imageSource)

PicassoZoomImageView provides a set of specialized APIs to listen for load results and get URIs, to support subsampling, so please don't load images directly using the official API

The APIs for zoom and subsampling are encapsulated in separate classes, and the compose versions are ZoomableState and SubsamplingState, view The versions are ZoomableEngine and SubsamplingEngine

example：

// compose
val state: ZoomState by rememberZoomState()
SketchZoomAsyncImage(
    imageUri = "http://sample.com/sample.jpg",
    contentDescription = "view image",
    modifier = Modifier.fillMaxSize(),
    state = state,
)
val zoomable: ZoomableState = state.zoomable
val subsampling: SubsamplingState = state.subsampling

// view
val sketchZoomImageView = SketchZoomImageView(context)
val zoomable: ZoomableEngine = sketchZoomImageView.zoomable
val subsampling: SubsamplingEngine = sketchZoomImageView.subsampling

For more detailed information about scale, offset, rotation, subsampling, read mode, scroll bar and other functions, please refer to the documentation at the end of the page

Public Properties

// compose
val state: ZoomState by rememberZoomState()
SketchZoomAsyncImage(state = state)
val zoomable: ZoomableState = state.zoomable
val subsampling: SubsamplingState = state.subsampling

// view
val sketchZoomImageView = SketchZoomImageView(context)
val zoomable: ZoomableEngine = sketchZoomImageView.zoomable
val subsampling: SubsamplingEngine = sketchZoomImageView.subsampling
  • Note: The relevant properties of the view version are wrapped in StateFlow, so its name is suffixed with State compared to the compose version
  • zoomable.baseTransform: Transform: Base transformation, include the base scale, offset, rotation, which is affected by contentScale, alignment properties and rotate method
  • zoomable.userTransform: Transform: User transformation, include the user scale, offset, rotation, which is affected by the user's gesture, readMode properties and scale, offset, locate method
  • zoomable.transform: Transform: Final transformation, include the final scale, offset, rotation, is equivalent to baseTransform + userTransform
  • zoomable.minScale: Float: Minimum scale factor, for limits the final scale factor, and as a target value for one of when switch scale
  • zoomable.mediumScale: Float: Medium scale factor, only as a target value for one of when switch scale
  • zoomable.maxScale: Float: Maximum scale factor, for limits the final scale factor, and as a target value for one of when switch scale
  • zoomable.continuousTransformType: Int: If true, a transformation is currently in progress, possibly in a continuous gesture operation, or an animation is in progress
  • zoomable.contentBaseDisplayRect: IntRect: The content region in the container after the baseTransform transformation
  • zoomable.contentBaseVisibleRect: IntRect: The content is visible region to the user after the baseTransform transformation
  • zoomable.contentDisplayRect: IntRect: The content region in the container after the final transform transformation
  • zoomable.contentVisibleRect: IntRect: The content is visible region to the user after the final transform transformation
  • zoomable.scrollEdge: ScrollEdge: Edge state for the current offset
  • zoomable.containerSize: IntSize: The size of the container that holds the content
  • zoomable.contentSize: IntSize: The size of the content, usually Painter.intrinsicSize.round()
  • zoomable.contentOriginSize: IntSize: The original size of the content
  • subsampling.ready: Boolean: Whether the image is ready for subsampling
  • subsampling.imageInfo: ImageInfo: The information of the image, including width, height, format, exif information, etc
  • subsampling.exifOrientation: ExifOrientation: The exif information of the image
  • subsampling.foregroundTiles: List<TileSnapshot>: List of current foreground tiles
  • subsampling.backgroundTiles: List<TileSnapshot>: List of current background tiles
  • subsampling.sampleSize: Int: The sample size of the image
  • subsampling.imageLoadRect: IntRect: The image load rect
  • subsampling.tileGridSizeMap: Map<Int, IntOffset>: Tile grid size map

Listen property changed

  • The relevant properties of the compose version are wrapped in State and can be read directly in the Composable function to implement listening
  • The relevant properties of the view are wrapped in StateFlow, and its collect function can be called to implement the listening

Document