hola Desarrollé una aplicación web en ASP.net core y me enfrenté a un reto. en este proyecto tengo una imagen que debo hacer zoom y agregar un marcador y entre dos marcadores dibujar una línea. los marcadores se pueden arrastrar. Quiero que la línea cambie en consecuencia cuando cambie los marcadores. ¿Pero no sé cómo hacerlo? ingrese la descripción de la imagen aquí

 <div id="zoom-marker-div" class="zoom-marker-div"> <img class="zoom-marker-img" id="zoom-marker-img" alt="zoom-marker-img" name="zoom-marker-img" draggable="false" style="width:auto;height:auto" /> </div> // init item var initImg = function (item) { // handle "TAP" event and add marker to image item.on("zoom_marker_mouse_click", function (event, position) { console.log("Mouse click on: " + $(this).width() + " " + JSON.stringify(position));// JSON.stringify(position) var rateZoom = $(this).width() / 500 if (tagNumber <= 25) { const marker = item.zoomMarker_AddMarker({ src: "/Image-Zoom/img/marker5.svg", x: position.x, y: position.y + 20 / rateZoom, size: 20, dialog: {}, hint: { value: tagNumber, style: { color: "#ffffff", left: "10px" } } }); console.log(typeof position.x); // Configure dialog manually marker.param.dialog = { value: "<h4>" + pointList[tagNumber] + "</h4>", offsetX: 20, style: { "border-color": "#86df5f" } }; // Draw a line const context = item.zoomMarker_Canvas(); if (context !== null && counter == 2) { context.strokeStyle = 'aqua'; context.moveTo(position.x, position.y); context.lineTo(listUndo[tagNumber - 2].x, listUndo[tagNumber - 2].y); context.stroke(); counter = 1; } else { counter = 2; } console.log("Mouse click on: " + JSON.stringify(context)); listUndo.push(position) listmarkerId.push(markerId) ++markerId; ++tagNumber; } });