HTML 画布到 WPF XAML 画布答案

【问题标题】：HTML Canvas to WPF XAML CanvasHTML 画布到 WPF XAML 画布
【发布时间】：2019-12-30 01:22:10
【问题描述】：

我有一个 ASP.NET 应用程序，它允许用户单击或点击画布以指示身体图像上的疼痛位置。身体图像显示在 Canvas 上，并且与 Canvas 的大小相同。

    function drawBodyMap() {
        var c = document.getElementById('myCanvas');
        var ctx = c.getContext('2d');
        var imageObj = new Image();
        imageObj.src = 'https://.../body.jpg';
        imageObj.onload = function () {
            ctx.drawImage(imageObj, 0, 0, 600, 367);
        };
    }

<canvas id="myCanvas" width="600" height="367"></canvas>

    <script>
        function getMousePos(canvas, evt) {
            var rect = canvas.getBoundingClientRect();
            return {
                x: evt.clientX - rect.left,
                y: evt.clientY - rect.top
            };
        }
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');

        canvas.addEventListener('mouseup', function (evt) {
            if (ixPos > 9)
                return;
            var mousePos = getMousePos(canvas, evt);
            bodyX[ixPos] = mousePos.x;
            bodyY[ixPos] = mousePos.y;
            painType[ixPos] = pain_type;
            ixPos++;
            ctx.beginPath();
            ctx.arc(mousePos.x, mousePos.y, 8, 0, 2 * Math.PI);
            if (pain_type == 1)
                ctx.fillStyle = "#DC143C";
            else if (pain_type == 2)
                ctx.fillStyle = "#EA728A";
            else if (pain_type == 3)
                ctx.fillStyle = "#DAA520";
            else if (pain_type == 4)
                ctx.fillStyle = "#008000";
            else if (pain_type == 5)
                ctx.fillStyle = "#4169E1";
            ctx.fill();
        }, false);
    </script>

在身体图像上添加到画布的 X、Y 点被保存到数据库中。然后将这些点加载到 WPF 应用程序中，该应用程序在 XAML 画布上显示相同的正文图像。然后 C# 代码在图像上添加点。

WPF 代码：

    private void DisplayBodyPain()
    {
        List<BodyPain> pain = gFunc.sws.GetBodyPain(MemberID);
        foreach (BodyPain bp in pain)
        {
            Border b = new Border();
            b.Tag = bp.PainType.ToString();
            b.Cursor = Cursors.Hand;
            b.Width = 16;
            b.Height = 16;
            b.CornerRadius = new CornerRadius(8);
            b.Background = GetPainBrush((byte)bp.PainType);
            cvsBody.Children.Add(b);
            Canvas.SetTop(b, bp.YPos);
            Canvas.SetLeft(b, bp.XPos);
        }
    }

我遇到的问题是在 XAML 画布上绘制的点都与在 HTML 画布上绘制的点略有不同。每个点都不在完全相同的位置。

有什么办法可以解决这个问题吗？我应该采取不同的做法吗？

HTML 画布

WPF 画布

【问题讨论】：

由于 WPF 版本不能正常工作，您应该包含绘制 WPF 版本的代码。
我不是投反对票的人，但这根本不是一个好问题，当然也不是an mcve。这种东西通常归结为弧坐标以它们的坐标为中心，而 WPF 与左上角对齐。但正如@Keith Stein 指出的那样，您至少需要显示您的 WPF 代码，最好是 mcve。

标签： html wpf xaml asp.net-core html5-canvas

【解决方案1】：

我认为您需要从要放置标记的坐标中减去标记的大小。对于最后两行，试试这个：

Canvas.SetTop(b, bp.YPos - (b.Height / 2));
Canvas.SetLeft(b, bp.XPos - (b.Width / 2));

通过减去标记的高度和宽度的一半，标记的中心位于所需的坐标上。

【讨论】：

是的，这就是问题所在。我没有想到这一点，我忘记了坐标在左上角。非常感谢您的回复。标记完全正确。