Skip to content

Latest commit

 

History

History
294 lines (224 loc) · 13 KB

getstarted.md

File metadata and controls

294 lines (224 loc) · 13 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.

Compose multiplatform：

Only android compose：

Android view：

Tip

  • Different components need to import different dependencies, please refer to README to import the corresponding dependencies*
  • 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 setImageSource(ImageSource) method to support subsampling functionality

Examples

Compose multiplatform：

// Using the basic ZoomImage component
val zoomState: ZoomState by rememberZoomState()
LaunchedEffect(zoomState.subsampling) {
    val resUri = Res.getUri("files/huge_world.jpeg")
    val imageSource = ImageSource.fromComposeResource(resUri)
  zoomState.setImageSource(imageSource)
}
ZoomImage(
    painter = painterResource(Res.drawable.huge_world_thumbnail),
    contentDescription = "view image",
    modifier = Modifier.fillMaxSize(),
    zoomState = zoomState,
)

// Using the SketchZoomAsyncImage component
SketchZoomAsyncImage(
    uri = "https://sample.com/sample.jpeg",
    contentDescription = "view image",
    modifier = Modifier.fillMaxSize(),
)

// Using the CoilZoomAsyncImage component
CoilZoomAsyncImage(
    model = "https://sample.com/sample.jpeg",
    contentDescription = "view image",
    modifier = Modifier.fillMaxSize(),
)

Only android compose：

// Using the GlideZoomAsyncImage component
GlideZoomAsyncImage(
    model = "https://sample.com/sample.jpeg",
    contentDescription = "view image",
    modifier = Modifier.fillMaxSize(),
)

Android view：

// Using the basic ZoomImageImage component
val zoomImageView = ZoomImageView(context)
zoomImageView.setImageResource(R.drawable.huge_world_thumbnail)
val imageSource = ImageSource.fromResource(context, R.raw.huge_world)
zoomImageView.setImageSource(imageSource)

// Using the SketchZoomImageView component
val sketchZoomImageView = SketchZoomImageView(context)
sketchZoomImageView.loadImage("https://sample.com/sample.jpeg")

// Using the CoilZoomImageView component
val coilZoomImageView = CoilZoomImageView(context)
coilZoomImageView.load("https://sample.com/sample.jpeg")

// Using the GlideZoomImageView component
val glideZoomImageView = GlideZoomImageView(context)
Glide.with(this@GlideZoomImageViewFragment)
    .load("https://sample.com/sample.jpeg")
    .into(glideZoomImageView)

// Using the PicassoZoomImageView component
val picassoZoomImageView = PicassoZoomImageView(context)
picassoZoomImageViewImage.loadImage("https://sample.com/sample.jpeg")

Tip

  • 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
  • For more usage methods related to image loading of each component, please refer to the usage of its original component.

Zoom And Subsampling

The scaling and subsampling APIs are encapsulated in different classes. You can directly control scaling and subsampling or obtain related information through them, as follows:

example：

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

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

Public Properties

[!TIP] 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

Tip

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*

Document