WPF InkCanvas书写卡顿问题分析

sczmzx2024-08-08 9:01

背景

公司有一款授课软件微讲师授课软件，可以在我们的软件上自动书写，勾画，采用InkCanvas做为书写层，并且支持提笔书写功能，为了给用户极致的体验，需要用户在书写时非常流畅。

问题

在使用过程中发现一个问题，用户在主屏上书写很流畅，但是在扩展屏上书写时发现存在卡存现象，书写体验不好，现象如下：

书写时笔迹不能实时更随
使用笔和鼠标书写都存在相同问题
只有扩展屏才有这个问题
书写的过程中CPU占用在20%左右

问题原因

分析发现，2个窗口采用的InkCanvas都是统一封装，并且后台model都是一个，并没有区别，后面发现问题出在界面上：

xml 复制代码

<Border>
    <Border.Effect>
        <DropShadowEffect BlurRadius="10" Color="White" Direction="320" Opacity="0.5" ShadowDepth="0" />
    </Border.Effect>
    <InkCanvas></InkCanvas>
</Border>

其中InkCanvas包含在border下，但是border设置了阴影，导致卡顿的原因是由于设置阴影的原因，看了下相关介绍，发现阴影具有性能问题：为WPF中DropShadowBitmapEffect提供轻量级的替代品

解决办法

办法1

如果你的场景可以不需要阴影，那么直接去掉阴影的代码

xml 复制代码

<Border>
    <InkCanvas></InkCanvas>
</Border>

办法2

将InkCanvas放到border外面

xml 复制代码

<Grid>
	<Border>
	    <Border.Effect>
	        <DropShadowEffect BlurRadius="10" Color="White" Direction="320" Opacity="0.5" ShadowDepth="0" />
	    </Border.Effect>
	</Border>
    <InkCanvas></InkCanvas>
</Grid>