Javascript 如何在div中绘制图形

我正在尝试在div元素中绘制形状。如果不是变换比例，下面的代码将以正确的起点绘制形状。但是，如果使用“变换比例”，则绘制形状时，线不在正确的位置。如果div是transform scale in（0.7，0.7），如何修复下面的代码？先谢谢你

$(function() {
    var $container = $('#container');
    var $selection = $('<div>').addClass('selection-box');

    $container.on('mousedown', function(e) {
        var click_y = e.pageY,
        click_x = e.pageX;

        $selection.css({
          'top':    click_y,
          'left':   click_x,
          'width':  0,
          'height': 0
        });
        $selection.appendTo($container);

        $container.on('mousemove', function(e) {            
          var move_x = e.pageX,
              move_y = e.pageY,
              width  = Math.abs(move_x - click_x),
              height = Math.abs(move_y - click_y),
              new_x, new_y;

          new_x = (move_x < click_x) ? (click_x - width) : click_x;
          new_y = (move_y < click_y) ? (click_y - height) : click_y;

          $selection.css({
            'width': width,
            'height': height,
            'top': new_y,
            'left': new_x
          });

        }).on('mouseup', function(e) {
            $container.off('mousemove');
            $selection.remove();
        });
    });
});

$（函数（）{
var$container=$（“#container”）；
var$selection=$（''）.addClass（'selection-box'）；
$container.on（'mousedown'，函数（e）{
var click_y=e.pageY，
单击_x=e.pageX；
$selection.css({
“顶部”：单击“y”，
“左”：单击，
“宽度”：0，
“高度”：0
});
$selection.appendTo（$container）；
$container.on（'mousemove'，函数（e）{
var move_x=e.pageX，
move_y=e.pageY，
宽度=Math.abs（移动x-单击x），
高度=Math.abs（移动y-单击y），
新x，新y；
新建x=（移动x<单击x）？（单击x-宽度）：单击x；
新建y=（移动y<单击y）？（单击y-高度）：单击y；
$selection.css({
“宽度”：宽度，
“高度”：高度，
"顶":新"，
“左”：新的
});
}).on（'mouseup'，函数（e）{
$container.off（'mousemove'）；
$selection.remove（）；
});
});
});

请提供具体信息和代码演示这是您想要在这个容器中绘制的演示？是的。如果容器不是变换比例，则上述代码有效，但如果变换比例，则形状线的绘制不正确。如果有帮助，请检查此代码