很多Power BI业务场景需要使用图片(参考:Power BI本地图片显示最佳解决方案),常规的图片显示效果如下图所示。
有时想给图片加点花样,比如进行圆形裁剪,以下是对比效果,注意人物的毛衣下方,图库不用重新准备,使用DAX可以精准裁剪。
有人可能想到,图片上方叠加一个SVG的圆形标签不就好?代码如下图所示:
<image xlink:href='Base64图像' width='*' height='*' />
<circle cx='*' cy='*' r='*' fill='none' stroke='black' stroke-width='1'/>
很遗憾,这样是不行的,下图人物的毛衣部分在圆圈的外面。
因此,不能直接叠加,我们需要将图片填充到圆圈中,代码修改如下即可正常显示:
<defs>
<pattern id='wujunmin' height='100%' width='100%'>
<image xlink:href='base64图像' height='*' width='*' />
</pattern>
</defs>
<circle cx='*' cy='*' r='*' fill='url(#wujunmin)' stroke='black' stroke-width='1'/>
这种操作方式有一个缺点,图像清晰度会下降,读者仔细看这两张图,下方明显模糊。
因此,如果需要圆形裁剪和图像清晰度二者得兼,还是需要叠加方式,只不过不能直接叠加一个圆圈,而是用PPT画一个这样的造型,圆圈和正方形相交的地方填充上颜色,圆圈内部无色,将形状另存为SVG矢量图,记事本打开复制里面的代码,和image标签放到一起。
这样对圆圈外部的毛衣进行了遮挡,圆圈内部没有颜色,使得头像得以显示。蓝色可以设置为和背景色相同,从而产生裁剪效果。
叠加的清晰度和原图保持一致,裁剪后的图片可以用在表格矩阵和新卡片图。
新卡片图是Power BI迄今为止最强大的三大视觉对象之一(另外两个是表格和矩阵)
《卡片图叠加进度条》
《卡片图动画缩放》
《卡片图穿墙术》