0

我能够使用 Openseadragon JS 在我的网页中显示具有放大和缩小功能的平面图（图像），并且用户可以使用 Openseadragon 的 addOverlay 方法在图像上放置点。现在我想在这些点之间画线当用户添加新点时。任何帮助下面是我尝试的示例函数`

function drawLine(webPoint) {
    var points = document.getElementsByClassName("pointer");
    counter = points.length
    console.log(counter);

    if (points.length == 1) {
        console.log("inside if");
        //start and end points are same
        var startPoint=[webPoint['x'],webPoint['y']];
        var endPoint=[webPoint['x'],webPoint['y']];
    } else {
        //start and end points are diff
        console.log("inside else");
        for(var i=0; i<=points.length; i++) {
            if (i == counter) {
               console.log("set endpoint");
               console.log(i);
               var endPoint=[webPoint['x'],webPoint['y']];
            }
            if (i == (counter-1)) {
                console.log("set startpoint");
                console.log(i);
                var startPoint=[webPoint['x'],webPoint['y']];
//                var rect = points[i].getBoundingClientRect();
//                var startPoint=[rect.top, rect.left];
            }
        }
    }

    // Paperscript
    var canvas = document.getElementById('osd-overlaycanvas');
    paper.setup(canvas);
    var path = new paper.Path();
    path.strokeColor = 'black';
    var pointOne     = new paper.Point(100, 20);
    var pointTwo     = new paper.Point(150, 100);
    path.moveTo(pointOne);
    path.lineTo(pointOne.add(pointTwo));
    path.closed = true;
    paper.view.draw();


}`

使用OpenSeadragonFabricjsOverlay添加代码

var point = new OpenSeadragon.Point(x, y);
var viewpoint = viewer.viewport.deltaPointsFromPixelsNoRotate(point);
var options = {
                   scale: 1000
                   }
var overlay = this.viewer.fabricjsOverlay(options);
var line = new fabric.Line([ 'x1', 'y1', 'x2','y2 ], {
            fill: 'red',
            stroke: 'red',
            strokeWidth: 5,
            selectable: false
          });
overlay.fabricCanvas().add(line);

查看器初始化如下

viewer = OpenSeadragon({
        id: "id_name",
        showNavigationControl: false,
        tileSources: tileSource.get(floorId),
        width:10
    });
4

0 回答 0