compose map 源码解析

目录

TileCanvas

ZoomPanRotateState

ZoomPanRotate

布局,手势处理完了,就开始要计算tile了

MapState

TileCanvasState

---

telephoto的源码已经分析过了.它的封装好,扩展好,适用于各种view.

最近又看到一个用compose写的map,用不同的方式,有点意思.分析一下它的实现流程与原理.

https://github.com/p-lr/MapCompose.git  这是源码.

TileCanvas

Canvas(modifier = modifier.fillMaxSize()) {withTransform({translate(left = -zoomPRState.scrollX, top = -zoomPRState.scrollY)scale(scale = zoomPRState.scale, Offset.Zero)}) {for (tile in tilesToRender) {val bitmap = tile.bitmap ?: continueval scaleForLevel = visibleTilesResolver.getScaleForLevel(tile.zoom)?: continueval tileScaled = (tileSize / scaleForLevel).toInt()val l = tile.col * tileScaledval t = tile.row * tileScaledval r = l + tileScaledval b = t + tileScaleddest.set(l, t, r, b)drawIntoCanvas {it.nativeCanvas.drawBitmap(bitmap, null, dest, null)}}}}

我把旋转的代码删除了.telephoto是在绘制前把偏移量计算好了,而这个绘制是得到tile后,在绘制的时候设置偏移量,使用的是bitmap,所以不支持多平台.

使用画布前要初始化一些数据:

val zoomPRState = state.zoomPanRotateStatekey(state) {ZoomPanRotate(modifier = modifier.clipToBounds().background(state.mapBackground),gestureListener = zoomPRState,layoutSizeChangeListener = zoomPRState,) {TileCanvas(modifier = Modifier,zoomPRState = zoomPRState,visibleTilesResolver = state.visibleTilesResolver,tileSize = state.tileSize,tilesToRender = state.tileCanvasState.tilesToRender,)content()}}

zoomPRState最重要的就是这个,保存了各种状态,变量.它的初始化就要追溯到mapstate了.因为它是用于map,所以它会先设置一个地图的总大小,层级.

val state = MapState(4, 4096, 4096) {scale(1.0f)}.apply {addLayer(tileStreamProvider)shouldLoopScale = true//enableRotation()}

TileStreamProvider就是根据这个缩放级别,行列去获取对应的图片,示例中是使用assets里面的图片,都是放好切片的.

ZoomPanRotateState

这个类管理了缩放,平移,旋转功能.

看一个缩放功能,先把缩放值作一个范围取值,避免超出最大与最小值.然后更新中心点,再通知监听者

fun setScale(scale: Float, notify: Boolean = true) {this.scale = constrainScale(scale)updateCentroid()if (notify) notifyStateChanged()}

中心点的计算,取当前布局的大小的半的值,加上偏移滚动的量 

private fun updateCentroid() {pivotX = layoutSize.width.toDouble() / 2pivotY = layoutSize.height.toDouble() / 2centroidX = (scrollX + pivotX) / (fullWidth * scale)centroidY = (scrollY + pivotY) / (fullHeight * scale)}

这个state它不是自己更新的,是外部触发的,哪里触发先放着.

缩放有了,滚动的与缩放类似.需要确定边界值,然后更新中心点.

fun setScroll(scrollX: Float, scrollY: Float) {this.scrollX = constrainScrollX(scrollX)this.scrollY = constrainScrollY(scrollY)updateCentroid()notifyStateChanged()}

这三个方法是这个类的核心方法,其它都是通过它们计算得到的.

ZoomPanRotate

这算是入口页面,自定义了Layout,它与普通的图片不同,它是多层级别的,所以要自定义一个.

它的布局大小改变的时,通过layoutSizeChangeListener,告诉zoomPanRotateState,

override fun onSizeChanged(composableScope: CoroutineScope, size: IntSize) {scope = composableScopevar newScrollX: Float? = nullvar newScrollY: Float? = nullif (layoutSize != IntSize.Zero) {newScrollX = scrollX + (layoutSize.width - size.width) / 2newScrollY = scrollY + (layoutSize.height - size.height) / 2}layoutSize = sizerecalculateMinScale()if (newScrollX != null && newScrollY != null) {setScroll(newScrollX, newScrollY)}/* Layout was done at least once, resume continuations */for (ct in onLayoutContinuations) {ct.resume(Unit)}onLayoutContinuations.clear()}

这时,zoomPanRotateState的一切就开始了.

先设置size,这是屏幕的大小.fullwidth/fullheight,这是页面图片的高宽值.在初始化时,我们设置了4096.然后将屏幕大小与这个计算缩放值.

gestureListener = zoomPRState,我们从这里面可以看出,layout里面的手势事件全部是通过这个传递给zoomPanRotateState, 这种方式与之前看过的一些库的源码思路确实不一太一样.

回到前面的zoomPanRotateState更新问题,现在解决了.

到这里,没有看到tile,只了解了整个画布,高宽,缩放平移这些.阶段总结一下:

ZoomPanRotate,这个类处理了布局.手势通过zoomPanRotateState来处理.包含缩放,平移.它有几个关键的属性,总大小与图片原始大小.layoutSize, fullWidth, fullHeight.

初始化时,它从ZoomPanRotate得到view的大小.

并根据图片原始大小计算出它与view的缩放比例.它的模式有三种

when (mode) {Fit -> min(minScaleX, minScaleY)Fill -> max(minScaleX, minScaleY)is Forced -> mode.scale
}

然后ZoomPanRotate中如果触发了手势,则回调到zoomPanRotateState中,重新计算平移,缩放值.

布局,手势处理完了,就开始要计算tile了

zoomPanRotateState不管是首次布局,还是手势,都会触发下面的方法,而它触发了mapstate中的状态变化:

private fun notifyStateChanged() {if (layoutSize != IntSize.Zero) {stateChangeListener.onStateChanged()}}

MapState

里面包含了zoomPanRotateState和tileCanvasState.

其它的state暂时不讨论,比如marker,path这些,这里只关注它如何管理缩放,平移这些.

override fun onStateChanged() {consumeLateInitialValues()renderVisibleTilesThrottled()stateChangeListener?.invoke(this)}

它先处理延迟初始化的的值,然后就启动tile渲染工作,发送事件throttledTask.trySend(Unit)

最后如果它还有外部的回调则调用.

启动任务后,开始计算可见的tile:先更新viewport

private suspend fun renderVisibleTiles() {val viewport = updateViewport()tileCanvasState.setViewport(viewport)}

这个是从zoomPanRotateState获取的偏移与view的大小,并处理了padding.viewport差不多是最大的视图区域大小了,并不是图片大小.

private fun updateViewport(): Viewport {val padding = preloadingPaddingreturn viewport.apply {left = zoomPanRotateState.scrollX.toInt() - paddingtop = zoomPanRotateState.scrollY.toInt() - paddingright = left + zoomPanRotateState.layoutSize.width + padding * 2bottom = top + zoomPanRotateState.layoutSize.height + padding * 2angleRad = zoomPanRotateState.rotation.toRad()}}

mapstate其实是一个管家,它本身并不直接管理,而是通过其它类来管理.这样有利于它的扩展.

更新了viewport后,就可以计算tile了.它通过另一个类来计算:

TileCanvasState

来看它的计算方法:启动协程, 用VisibleTilesResolver计算

suspend fun setViewport(viewport: Viewport) {/* Thread-confine the tileResolver to the main thread */val visibleTiles = withContext(Dispatchers.Main) {visibleTilesResolver.getVisibleTiles(viewport)}withContext(scope.coroutineContext) {setVisibleTiles(visibleTiles)}}

它的声明是在mapstate里面的:

internal val visibleTilesResolver =VisibleTilesResolver(levelCount = levelCount,fullWidth = fullWidth,fullHeight = fullHeight,tileSize = tileSize,magnifyingFactor = initialValues.magnifyingFactor) {zoomPanRotateState.scale}

回到计算tile:

fun getVisibleTiles(viewport: Viewport): VisibleTiles {val scale = scaleProvider.getScale()val level = getLevel(scale, magnifyingFactor)val scaleAtLevel = scaleForLevel[level] ?: throw AssertionError()val relativeScale = scale / scaleAtLevel/* At the current level, row and col index have maximum values */val maxCol = max(0.0, ceil(fullWidth * scaleAtLevel / tileSize) - 1).toInt()val maxRow = max(0.0, ceil(fullHeight * scaleAtLevel / tileSize) - 1).toInt()fun Int.lowerThan(limit: Int): Int {return if (this <= limit) this else limit}val scaledTileSize = tileSize.toDouble() * relativeScalefun makeVisibleTiles(left: Int, top: Int, right: Int, bottom: Int): VisibleTiles {val colLeft = floor(left / scaledTileSize).toInt().lowerThan(maxCol).coerceAtLeast(0)val rowTop = floor(top / scaledTileSize).toInt().lowerThan(maxRow).coerceAtLeast(0)val colRight = (ceil(right / scaledTileSize).toInt() - 1).lowerThan(maxCol)val rowBottom = (ceil(bottom / scaledTileSize).toInt() - 1).lowerThan(maxRow)val tileMatrix = (rowTop..rowBottom).associateWith {colLeft..colRight}val count = (rowBottom - rowTop + 1) * (colRight - colLeft + 1)return VisibleTiles(level, tileMatrix, count, getSubSample(scale))}return if (viewport.angleRad == 0f) {makeVisibleTiles(viewport.left, viewport.top, viewport.right, viewport.bottom)} else {val xTopLeft = viewport.leftval yTopLeft = viewport.topval xTopRight = viewport.rightval yTopRight = viewport.topval xBotLeft = viewport.leftval yBotLeft = viewport.bottomval xBotRight = viewport.rightval yBotRight = viewport.bottomval xCenter = (viewport.right + viewport.left).toDouble() / 2val yCenter = (viewport.bottom + viewport.top).toDouble() / 2val xTopLeftRot =rotateX(xTopLeft - xCenter, yTopLeft - yCenter, viewport.angleRad) + xCenterval yTopLeftRot =rotateY(xTopLeft - xCenter, yTopLeft - yCenter, viewport.angleRad) + yCentervar xLeftMost = xTopLeftRotvar yTopMost = yTopLeftRotvar xRightMost = xTopLeftRotvar yBotMost = yTopLeftRotval xTopRightRot =rotateX(xTopRight - xCenter, yTopRight - yCenter, viewport.angleRad) + xCenterval yTopRightRot =rotateY(xTopRight - xCenter, yTopRight - yCenter, viewport.angleRad) + yCenterxLeftMost = xLeftMost.coerceAtMost(xTopRightRot)yTopMost = yTopMost.coerceAtMost(yTopRightRot)xRightMost = xRightMost.coerceAtLeast(xTopRightRot)yBotMost = yBotMost.coerceAtLeast(yTopRightRot)val xBotLeftRot =rotateX(xBotLeft - xCenter, yBotLeft - yCenter, viewport.angleRad) + xCenterval yBotLeftRot =rotateY(xBotLeft - xCenter, yBotLeft - yCenter, viewport.angleRad) + yCenterxLeftMost = xLeftMost.coerceAtMost(xBotLeftRot)yTopMost = yTopMost.coerceAtMost(yBotLeftRot)xRightMost = xRightMost.coerceAtLeast(xBotLeftRot)yBotMost = yBotMost.coerceAtLeast(yBotLeftRot)val xBotRightRot =rotateX(xBotRight - xCenter, yBotRight - yCenter, viewport.angleRad) + xCenterval yBotRightRot =rotateY(xBotRight - xCenter, yBotRight - yCenter, viewport.angleRad) + yCenterxLeftMost = xLeftMost.coerceAtMost(xBotRightRot)yTopMost = yTopMost.coerceAtMost(yBotRightRot)xRightMost = xRightMost.coerceAtLeast(xBotRightRot)yBotMost = yBotMost.coerceAtLeast(yBotRightRot)makeVisibleTiles(xLeftMost.toInt(),yTopMost.toInt(),xRightMost.toInt(),yBotMost.toInt())}}

先获取缩放值,如果发生手势缩放,它就不再只是图片与view的比例,需要加上手势的缩放,这部分是在zoomPanRotateState里面计算过的.

然后处理层级.处理层级的目的是为了从asset中取图片.

接着计算行列数.

这里忽略了旋转,那么只关注不旋转的计算makeVisibleTiles.它得到的是一个取值范围,不像telephoto那样具体偏移.因为asset里面的图片是固定块大小的,名字是数字,只要有这个取值范围,然后根据这个去取就行了.

计算完tile的可见区,开始渲染:

private val renderTask = scope.throttle(wait = 34) {/* Evict, then render */val (lastVisible, ids, opacities) = visibleStateFlow.value ?: return@throttleevictTiles(lastVisible, ids, opacities)renderTiles(lastVisible, ids)}

先是回收,如果缩放级别不同,应该回收旧的tile.

接着根据优先级排序,然后设置要渲染的tile

private fun renderTiles(visibleTiles: VisibleTiles, layerIds: List<String>) {/* Right before sending tiles to the view, reorder them so that tiles from current level are* above others. */val tilesToRenderCopy = tilesCollected.sortedBy {val priority =if (it.zoom == visibleTiles.level && it.subSample == visibleTiles.subSample) 100 else 0priority + if (layerIds == it.layerIds) 1 else 0}tilesToRender = tilesToRenderCopy}

tilesToRender,这个就是最外层的绘制部分的内容.

到这里渲染其实没有开始,只是监听渲染结果visibleStateFlow,这个是在当前类初始化的时候,启动了协程来监听.

collectNewTiles()中visibleStateFlow.collectLatest(),它变化的时候,才触发真正的图片解码

初始化还启动了其它的协程:

init {/* Collect visible tiles and send specs to the TileCollector */scope.launch {collectNewTiles()}/* Launch the TileCollector */tileCollector = TileCollector(workerCount.coerceAtLeast(1), bitmapConfig, tileSize)scope.launch {_layerFlow.collectLatest { layers ->tileCollector.collectTiles(tileSpecs = visibleTileLocationsChannel,tilesOutput = tilesOutput,layers = layers,bitmapPool = bitmapPool)}}/* Launch a coroutine to consume the produced tiles */scope.launch {consumeTiles(tilesOutput)}scope.launch(Dispatchers.Main) {for (t in recycleChannel) {val b = t.bitmapt.bitmap = nullb?.recycle()}}}

注释也比较清晰了,一个是收集tiles,一个是消费tiles.

tileCollector.collectTiles,这里触发图片的获取.

{val tilesToDownload = Channel<TileSpec>(capacity = Channel.RENDEZVOUS)val tilesDownloadedFromWorker = Channel<TileSpec>(capacity = 1)repeat(workerCount) {worker(tilesToDownload,tilesDownloadedFromWorker,tilesOutput,layers,bitmapPool)}tileCollectorKernel(tileSpecs, tilesToDownload, tilesDownloadedFromWorker)}

worker是具体的解码了.

整个过程比较复杂.在收集tile的协程里面它使用channel去接收tile的变化.

for (spec in tilesToDownload) {if (layers.isEmpty()) {tilesDownloaded.send(spec)continue}val bitmapForLayers = layers.mapIndexed { index, layer ->async {val bitmap = createBitmap(512, 512, Config.ARGB_8888)val canvas = Canvas(bitmap)val paint = Paint()paint.textSize = 60fpaint.strokeWidth = 4fpaint.isAntiAlias = truepaint.style = Paint.Style.STROKEcanvas.drawARGB(255, 0, 255, 0)paint.setColor(Color.WHITE)val rect = Rect(0, 0, bitmap.getWidth(), bitmap.getHeight())paint.setColor(Color.YELLOW)canvas.drawRect(rect, paint)paint.setColor(Color.RED)canvas.drawText(index.toString(), 130f, 130f, paint)BitmapForLayer(bitmap, layer)/*val i = layer.tileStreamProvider.getTileStream(spec.row, spec.col, spec.zoom)if (i != null) {getBitmap(subSamplingRatio = subSamplingRatio,layer = layer,inputStream = i,isPrimaryLayer = index == 0)} else BitmapForLayer(null, layer)*/}}.awaitAll()val resultBitmap = bitmapForLayers.firstOrNull()?.bitmap ?: run {tilesDownloaded.send(spec)/* When the decoding failed or if there's nothing to decode, then send back the Tile* just as in normal processing, so that the actor which submits tiles specs to the* collector knows that this tile has been processed and does not immediately* re-sends the same spec. */tilesOutput.send(Tile(spec.zoom,spec.row,spec.col,spec.subSample,layerIds,layers.map { it.alpha }))null} ?: continue // If the decoding of the first layer failed, skip the restif (layers.size > 1) {canvas.setBitmap(resultBitmap)for (result in bitmapForLayers.drop(1)) {paint.alpha = (255f * result.layer.alpha).toInt()if (result.bitmap == null) continuecanvas.drawBitmap(result.bitmap, 0f, 0f, paint)}}println("getBitmap.Tile:zoom:${spec.zoom}, row-col:${spec.row}-${spec.col}, ${spec.subSample}")val tile = Tile(spec.zoom,spec.row,spec.col,spec.subSample,layerIds,layers.map { it.alpha }).apply {this.bitmap = resultBitmap}tilesOutput.send(tile)tilesDownloaded.send(spec)}

这里截取解码的部分代码.我取消了asset的图片获取,转为创建一个空的bitmap.解码的过程并不复杂,但它的代码看着没有那么舒服.

tilesToDownload,是要解码的tile.根据参数 解码,然后创建tile,其中还处理了layer,因为地图总是与缩放的层级相关的.

解码完就通过channel发送出去.然后就到了外面的接收方:

TileCanvasState.consumeTiles(tilesOutput)

如果layoerid相同才有用,否则要回收.renderthrottled前面有介绍过,就是最后触发最外层的渲染了.

private suspend fun consumeTiles(tileChannel: ReceiveChannel<Tile>) {for (tile in tileChannel) {val lastVisible = lastVisibleif ((lastVisible == null || lastVisible.contains(tile))&& !tilesCollected.contains(tile)&& tile.layerIds == visibleStateFlow.value?.layerIds) {tile.prepare()tilesCollected.add(tile)renderThrottled()} else {tile.recycle()}fullEvictionDebounced()}}

整个流程看着没那么舒服.也比较复杂,它不像图片查看器,只有一层,都需要关注layer.

不管是渲染,解码都是channel来通信.

先这样吧,下次再补充