HTML画布到WPF XAML画布

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

    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>

函数drawBodyMap（）{
var c=document.getElementById（'myCanvas'）；
var ctx=c.getContext（'2d'）；
var imageObj=新图像（）；
imageObj.src=https://.../body.jpg';
imageObj.onload=函数（）{
ctx.drawImage（imageObj，0,060667）；
};
}
函数getMousePos（画布，evt）{
var rect=canvas.getBoundingClientRect（）；
返回{
x:evt.clientX-rect.left，
y:evt.clientY-rect.top
};
}
var canvas=document.getElementById（'myCanvas'）；
var ctx=canvas.getContext（'2d'）；
canvas.addEventListener（'mouseup'，函数（evt）{
如果（ixPos>9）
返回；
var mousePos=getMousePos（canvas，evt）；
bodyX[ixPos]=鼠标点x；
bodyY[ixPos]=鼠标点y；
painType[ixPos]=疼痛类型；
ixPos++；
ctx.beginPath（）；
弧（mousePos.x，mousePos.y，8，0，2*Math.PI）；
如果（疼痛类型==1）
ctx.fillStyle=“#DC143C”；
否则如果（疼痛类型==2）
ctx.fillStyle=“#EA728A”；
否则如果（疼痛类型==3）
ctx.fillStyle=“#DAA520”；
否则如果（疼痛类型==4）
ctx.fillStyle=“#008000”；
否则如果（疼痛类型==5）
ctx.fillStyle=“#4169E1”；
ctx.fill（）；
}，假）；

添加到主体图像画布上的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);
        }
    }

private void DisplayBodyPain（）
{
List pain=gFunc.sws.GetBodyPain（MemberID）；
foreach（身体疼痛bp疼痛）
{
边框b=新边框（）；
b、 Tag=bp.PainType.ToString（）；
b、 光标=光标。手；
b、 宽度=16；
b、 高度=16；
b、 转弯半径=新的转弯半径（8）；
b、 后台=GetPainBrush（（字节）bp.PainType）；
cvsBody.Children.添加（b）；
Canvas.SetTop（b，bp.YPos）；
SetLeft（b，bp.XPos）；
}
}

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

有没有办法解决这个问题？我应该换一种方式吗

HTML画布

WPF画布

---

我认为需要从要放置标记的坐标中减去标记的大小。对于最后两行，请尝试以下操作：

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

---

通过减去标记的高度和宽度的一半，标记的中心将放置在所需的坐标上。

我认为您需要从要放置标记的坐标中减去标记的大小。对于最后两行，请尝试以下操作：

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

---

通过减去标记的高度和宽度的一半，标记的中心被放置在所需的坐标上。

由于WPF版本工作不正常，您应该包括绘制WPF版本的代码。我不是投反对票的人，但这根本不是一个好问题，当然也不是。这类东西通常归结为圆弧坐标以其坐标为中心，而WPF以左上角为中心。但正如@Keith Stein所指出的，您需要至少显示WPF代码，最好是一个mcve。由于WPF版本工作不正常，您应该包括绘制WPF版本的代码。我不是投反对票的人，但这根本不是一个好问题，当然也不是。这类东西通常归结为圆弧坐标以其坐标为中心，而WPF以左上角为中心。但正如@Keith Stein所指出的，您至少需要显示WPF代码，最好是一个mcve。是的，这就是问题所在。我没想到，我忘了坐标是左上角。非常感谢您的回复。标记现在正是。是的，这就是问题所在。我没想到，我忘了坐标是左上角。非常感谢您的回复。标记现在正是时候。