-1

我在图像上画了一个多边形,我想用鼠标点击来移动它,我有这个错误,我不能让他们有你的想法。对于这个问题,我使用了 librairie Two.js,但我做不到

 $scope.DrawPolygon = function (id, json)
 {

    var elem = document.getElementById('ImgCamera' + id);
    if (elem != null)
    {
        elem.innerHTML = "";
        var two = new Two({
            type: Two.Types.canvas,
            fullscreen: false,
            width: 640,
            height: 480,
        }).appendTo(elem);

        var canvas = two.renderer.domElement;
        var img = $scope.spotCAMImageLoaded[_GetCameraNumberFromPolygonNumber(id)];

        var texture = new Two.Texture(img, function () { });
        var rect = two.makeRectangle(canvas.width / 2, canvas.height / 2, canvas.width, canvas.height);
        rect.fill = texture;
        rect.noStroke();

        var jsonPoly = null;
        var camera = json.Camera2;
        if (_GetCameraNumberFromPolygonNumber(id) == 0)
            camera = json.Camera1;

        if (camera != null)
        {
            jsonPoly = camera[_GetPolygonNumberFromCameraNumber(id)];
            var polygon = two.makePath([new Two.Anchor(jsonPoly.P1.x, jsonPoly.P1.y)
                                         , new Two.Anchor(jsonPoly.P2.x, jsonPoly.P2.y)
                                         , new Two.Anchor(jsonPoly.P3.x, jsonPoly.P3.y)
                                         , new Two.Anchor(jsonPoly.P4.x, jsonPoly.P4.y)])


            polygon.fill = "#008bbe";
            polygon.opacity = 0.5;
            polygon.stroke = "#00435c";
            polygon.linewidth = 10;

        polygon.renderer.elem.style.cursor = 'pointer';
        two.update(); 

    }
}
4

2 回答 2

0

不熟悉Two.js并且您没有发布任何 DOM 结构,但是这个函数有很多事情要做。考虑将其分解为更小的函数。还尽可能多地使用angularjsDSL,例如:

  • 使用angular.element(<selector)而不是document.<selectorMethod>
  • 使用 elem 的真if(elem)值检查,0 nullundefined将被防范的值,与camera检查相同
于 2018-03-28T12:37:09.763 回答
0

不幸的是undefinednull它们在 JavaScript 中是不同的值。在第一个语句中,document.getElementById('ImgCamera' + id)正在返回undefined。尝试将第一个 if 语句更改为:

if (elem != undefined && != null) {
于 2019-01-02T19:51:42.137 回答