如何在 google 标记中设置带有边框的图像在 Android 中？

Posted 2023-03-28

【中文标题】如何在 google 标记中设置带有边框的图像在 Android 中？

【英文标题】：How to set image in google marker with a border in Android?

【发布时间】：2021-09-08 21:14:35

【问题描述】：

我有存储在 Firebase 中的用户个人资料照片，我想知道如何使用带有橙色边框的用户个人资料照片创建标记。

我尝试了一些来自互联网的代码，它可以工作，但测量结果似乎是错误的，我不知道我做错了什么。

我使用的代码：

fun setMarkerPhoto(user:User, location: Location)
    var bitmapFinal : Bitmap?

    if(hasProfilePhoto)
        /*val options = RequestOptions()
        options.centerCrop()*/
        Glide.with(this)
                .asBitmap()
                /*.apply(options)*/
                .centerCrop()
                .load(user.image)
                .into(object : CustomTarget<Bitmap>()
                    override fun onResourceReady(resource: Bitmap, transition: com.bumptech.glide.request.transition.Transition<in Bitmap>?) 
                        bitmapFinal = createUserBitmapFinal(resource)



                        markerOptions
                                .position(LatLng(location!!.latitude, location!!.longitude))
                                .title("Current Location")
                                .snippet(address)
                                .icon(BitmapDescriptorFactory.fromBitmap(bitmapFinal))


                        mCurrentMarker = googleMap.addMarker(markerOptions)
                    

                    override fun onLoadCleared(placeholder: Drawable?) 
                        TODO("Not yet implemented")
                    
                )
    else
        markerOptions
                .position(LatLng(mLastLocation!!.latitude, mLastLocation!!.longitude))
                .title("Current Location")
                .snippet(address)
                .icon(BitmapDescriptorFactory.fromBitmap(smallMarker))



        mCurrentMarker = googleMap.addMarker(markerOptions)
    


 private fun createUserBitmapFinal(bitmapInicial: Bitmap?): Bitmap? 
    var result: Bitmap? = null
    try 
        result = Bitmap.createBitmap(150,150, Bitmap.Config.ARGB_8888) //change the size of the placeholder
        result.eraseColor(Color.TRANSPARENT)
        val canvas = Canvas(result)
        val drawable: Drawable = resources.getDrawable(R.drawable.ic_pickup)
        drawable.setBounds(0, 0, 150,150) //change the size of the placeholder, but you need to maintain the same proportion of the first line
        drawable.draw(canvas)
        val roundPaint = Paint(Paint.ANTI_ALIAS_FLAG)
        val bitmapRect = RectF()
        canvas.save()

        if (bitmapInicial != null) 
            val shader =
                    BitmapShader(bitmapInicial, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP)
            val matrix = Matrix()
            val scale: Float = 200 / bitmapInicial.width.toFloat()  //reduce or augment here change the size of the original bitmap inside the placehoder.
            // But you need to adjust the line bitmapRect with the same proportion
            matrix.postTranslate(5f, 5f)
            matrix.postScale(scale, scale)
            roundPaint.shader = shader
            shader.setLocalMatrix(matrix)
            bitmapRect[10f, 10f, 104f+10f]=104f+10f //change here too to change the size
            canvas.drawRoundRect(bitmapRect, 56f, 56f, roundPaint)
        

我真的不明白如何将位图图像完美地放入占位符中。我的标记看起来像这样：

即使我提到它应该在代码中，图像也没有被中心裁剪，它说 Glide.centerCrop()

另外，我正在使用 GeoFire 显示用户指定半径内的用户标记，现在我可以显示一个简单的标记，但我希望标记也包含该用户的个人资料照片！我该怎么做？

GeoFire 代码：

val geoQuery: GeoQuery = geoFire.queryAtLocation(GeoLocation(location.latitude, location.longitude), 0.5)
    geoQuery.addGeoQueryEventListener(object : GeoQueryEventListener 
        override fun onKeyEntered(key: String, location: GeoLocation) 
            println(String.format("Key %s entered the search area at [%f,%f]", key, location.latitude, location.longitude))
            Log.i("key entered","User found around you")
            val aroundYou = LatLng(location.latitude, location.longitude)

            
            if (markerList != null) 
                for (marker in markerList) 
                    marker.remove()
                
            

            otherMarkerOptions
                    .position(aroundYou)
                    .title("Current Location")
                    //.snippet(address)
                    .icon(BitmapDescriptorFactory.fromBitmap(smallMarker)) //This is a simple marker but i want it to have the user's profile photo 

            
            markerList.add(googleMap.addMarker(otherMarkerOptions))

            //
        

提前谢谢你

编辑：

在线：val drawable: Drawable = resources.getDrawable(R.drawable.ic_pickup)

就是这个png：

我想在该可绘制文件中插入用户的个人资料照片，如果用户没有个人资料照片，则只有可绘制的照片可见。

【参考方案1】：

在 StrackOverflow 的另一个问题中，您可以从我的代码中获得转换位图的代码。正如我在那里提到的，我无法测试代码，因为我现在只使用颤振。

但是看着你的代码我可以试试这个：

添加此功能：

fun dp(value: Float): Int 
    return if (value == 0f) 
        0
     else Math.ceil(resources.displayMetrics.density * value.toDouble()).toInt()

在你的台词中：

result = Bitmap.createBitmap(150,150, Bitmap.Config.ARGB_8888);
drawable.setBounds(0, 0, 150,150);

改为：

result = Bitmap.createBitmap(dp(62f), dp(76f), Bitmap.Config.ARGB_8888);
drawable.setBounds(0, 0, dp(150f), dp(150f)) ;

让我知道结果。

【讨论】：

我做了你提到的，占位符变得更大了。这是我试过你所说的ibb.co/9sQLBPF后的样子，我也编辑了这个问题，你能检查一下吗？谢谢