Question

在背景中有图像，在这里我需要使用图像上的特定坐标（它们来自API）绘制一个矩形。由于坐标不断变化，如何动态绘制。

我尝试使用canvas，svg，但没有用。链接上一个问题 How to draw svg on image?

坐标：

        var a = _self.sendObjCoordinates[0].coordinates.xmin;
        var b = _self.sendObjCoordinates[0].coordinates.ymin;
        var c = _self.sendObjCoordinates[0].coordinates.xmax;
        var d  = _self.sendObjCoordinates[0].coordinates.ymax;

样本值：

     {xmin: 399, ymin: 191, xmax: 1166, ymax: 742}

1）加载图片的代码：

<div class="lbi-svg-box scrollbar-external">
    <img src=""  alt="" class="lbi-img"  />
    <svg class="lbi-svg">
    </svg>  
</div>

2）我在这里创建画布

Labelimg.prototype = {
        addImg: function (src) {
            var img = document.querySelector('.lbi-img');
            if (!img) {

                var canvas = document.createElement('canvas');
                img = document.createElement('img');
                img.className = 'lbi-img';
                canvas.id = "CursorLayer";
                canvas.width = 500;
                canvas.height = 700;
            }
         }
     }

The error is :Uncaught TypeError: Cannot read property 'getContext' of null
    at HTMLButtonElement.submitFormBtn.onclick (labelimg.js:418)

3）用于创建rect的代码：

var can = document.getElementById("CursorLayer");

                var ctx = can.getContext('2d');
                ctx.fillStyle='#fa4b2a';    // color of fill
                ctx.rect(20, 20, 150, 100);
                ctx.stroke(); // create rectangle

Answer 1

您尝试将矩形绘制到画布上的时间 getElementyById（）函数可获取对画布的引用。不幸的是，它将返回 null ，因为您实际上没有将画布添加到DOM中-因此它不存在，您将获得：

无法读取null的属性'getContext'

通过 appendChild（）函数将动态创建的HTML元素添加到DOM。

尝试更改：

var canvas = document.createElement('canvas');

收件人：

var canvas = document.createElement('canvas');
document.body.appendChild(canvas);

如何使用从后端/ API获取的特定坐标绘制矩形？

1 个答案: