Question

我有一个简单的演示应用程序，它使用一个图像作为InkCanvas的背景，并在调整图像的显示大小时缩放笔划，使它们保持在相对于图像的相同位置。既然你可以画画 - ＆gt;调整大小 - ＆gt;画 - ＆gt;调整大小 - ＆gt;绘制这意味着我必须通过在每个笔划上指定PointTransform来每次将每个笔划缩放不同的数量。

float thisScale = (float)(scale / _prevScale);
foreach (InkStroke stroke in myCanvas.InkPresenter.StrokeContainer.GetStrokes())
{
    float thisPointScale = thisScale * stroke.PointTransform.M11;
    stroke.PointTransform = Matrix3x2.CreateScale(new Vector2(thisPointScale));
}

这样可以很好地调整笔画的长度。但是，它对笔画的厚度没有任何影响。当您使用厚笔或非均匀笔（例如荧光笔）时，这一点更加明显。

这些链接指向显示结果的两个屏幕剪辑。全屏 - https://1drv.ms/i/s!ArHMZAt1svlBiZZDfrxFqyGU1bJ6MQ 较小的窗口 - https://1drv.ms/i/s!ArHMZAt1svlBiZZCqHHYaISPfWMMpQ

关于如何调整笔画粗细的任何想法？

Answer 1

将ScaleTransform应用于InkCanvas控件。这将负责缩放墨水笔划，笔划位置和背景图像。本质上，转换适用于InkCanvas中包含的所有内容。无需将Matrix与StrokeCollection一起使用。

<强> XAML

<Grid>
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto" />
        <RowDefinition Height="1*" />
    </Grid.RowDefinitions>
    <StackPanel Orientation="Horizontal">
        <Button Content="Red Highlighter "
                x:Name="InkRedAttributesButton"
                Click="InkRedAttributesButton_Click" />
        <Button Content="Blue Highlighter "
                x:Name="InkBlueAttributesButton"
                Click="InkBlueAttributesButton_Click" />
        <Button Content="Scale Down"
                x:Name="ScaleDownButton"
                Click="ScaleDownButton_Click" />
        <Button Content="Scale Up"
                x:Name="ScaleUpButton"
                Click="ScaleUpButton_Click" />
    </StackPanel>
    <InkCanvas x:Name="myCanvas"
               Grid.Row="1"  HorizontalAlignment="Left" VerticalAlignment="Top">
        <InkCanvas.Background>
            <ImageBrush ImageSource="/SO_Questions;component/Images/Star02.jpg"
                        Stretch="Fill" />
        </InkCanvas.Background>
        <InkCanvas.RenderTransform>
            <ScaleTransform x:Name="InkCanvasScaleTransform" />
        </InkCanvas.RenderTransform>
    </InkCanvas>
</Grid>

<强>代码

 private void ScaleUpButton_Click(object sender, RoutedEventArgs e) {
      InkCanvasScaleTransform.ScaleX += .2;
      InkCanvasScaleTransform.ScaleY += .2;

    }
    private void ScaleDownButton_Click(object sender, RoutedEventArgs e) {
      InkCanvasScaleTransform.ScaleX -= .2;
      InkCanvasScaleTransform.ScaleY -= .2;

    }

    private void InkRedAttributesButton_Click(object sender, RoutedEventArgs e) {
      DrawingAttributes inkAttributes = new DrawingAttributes();

      inkAttributes.Height = 12;
      inkAttributes.Width = 12;
      inkAttributes.Color = Colors.Red;
      inkAttributes.IsHighlighter = true;
      myCanvas.DefaultDrawingAttributes = inkAttributes;
    }

    private void InkBlueAttributesButton_Click(object sender, RoutedEventArgs e) {
      DrawingAttributes inkAttributes = new DrawingAttributes();

      inkAttributes.Height = 12;
      inkAttributes.Width = 12;
      inkAttributes.Color = Colors.Blue;
      inkAttributes.IsHighlighter = true;
      myCanvas.DefaultDrawingAttributes = inkAttributes;
    }

<强>截图

100％缩放

缩放60％

Answer 2

缩放InkCanvas并不总能解决问题，特别是如果您想将缩放的墨水保存到gif图像文件中。

显然，InkStroke的PointTransform仅转换笔划点的位置，而不是用于绘制笔划的PenTip的大小。（没有记录我能找到的任何地方，但通过反复试验发现。“PointTransform”这个名字有点像线索）

因此，除了将缩放因子应用于PointTransform之外，您还必须按如下方式缩放PenTip（修改为原始代码）：

float thisPointScale = thisScale * stroke.PointTransform.M11;
stroke.PointTransform = Matrix3x2.CreateScale(new Vector2(thisPointScale));
stroke.DrawingAttributes.PenTipTransform = Matrix3x2.CreateScale(new Vector2(thisPointScale));

希望这有助于某人...

Answer 3

要调整笔触的粗细，您必须更改DrawingAttributes的Size属性。 PenTipTransform不适用于铅笔 - 它会引发异常。

关键是你不能直接设置 的属性属性：https://docs.microsoft.com/en-us/uwp/api/windows.ui.input.inking.inkdrawingattributes

以下是如何获得此示例：

static IEnumerable<InkStroke> GetScaledStrokes(IEnumerable<InkStroke> source, float scale) { var scaleMatrix = Matrix3x2.CreateScale(scale); var resultStrokes = source.Select(x => x.Clone()).ToArray(); foreach (var inkStroke in resultStrokes) { inkStroke.PointTransform = scaleMatrix; var da = inkStroke.DrawingAttributes; var daSize = da.Size; daSize.Width = daSize.Width * scale; daSize.Height = daSize.Height * scale; da.Size = daSize; inkStroke.DrawingAttributes = da; } return resultStrokes; }

完整示例：https://github.com/ycherkes/ScaledInks

在UWP中缩放InkStrokes

3 个答案: