Maybe someone is familiar with js and Konva.
I wrote a script that should draw arrows with captions on top of the panorama. However, when the script is run (in the Skin Action - Mouse click - URL), the panorama image disappears. Example video https://youtu.be/ygntnc9xrA8
Code: Select all
javascript:"";
pano.setLocked(true);
var width = window.innerWidth;
var height = window.innerHeight;
var stage = new Konva.Stage({
container: 'container',
width: width,
height: height
});
var layer = new Konva.Layer();
stage.add(layer);
var line = new Konva.Line({
stroke: '#510e72',
strokeWidth: 4,
dash: [10, 10]
});
layer.add(line);
var isDrawing = false;
var points = [];
var arrows = [];
var inputFields = [];
stage.on('mousedown', function(e) {
if (e.evt.button === 0) {
isDrawing = true;
var pos = stage.getPointerPosition();
points = [pos.x, pos.y];
}
});
stage.on('mousemove', function(e) {
if (!isDrawing) {
return;
}
var pos = stage.getPointerPosition();
line.points([pos.x, pos.y, points[0], points[1]]);
layer.batchDraw();
});
stage.on('mouseup', function(e) {
if (!isDrawing) {
return;
}
if (e.evt.button === 0) {
isDrawing = false;
var pos = stage.getPointerPosition();
points.push(pos.x, pos.y);
var arrow = new Konva.Arrow({
points: points,
pointerLength: 20,
pointerWidth: 20,
fill: '#510e72',
stroke: '#510e72',
strokeWidth: 4
});
layer.add(arrow);
line.points([]);
layer.batchDraw();
var inputField = document.createElement('textarea');
inputField.style.position = 'absolute';
inputField.style.left = points[0] + 'px';
inputField.style.top = points[1] + 'px';
inputField.style.resize = 'none';
inputField.style.overflow = 'auto';
document.body.appendChild(inputField);
inputField.focus();
inputField.addEventListener('input', function() {
inputField.style.height = 'auto';
inputField.style.height = inputField.scrollHeight + 'px';
});
arrows.push(arrow);
inputFields.push(inputField);
}
});
stage.on('contextmenu', function(e) {
e.evt.preventDefault();
var target = e.target;
if (target instanceof Konva.Arrow) {
var arrowIndex = arrows.indexOf(target);
if (arrowIndex > -1) {
var arrow = arrows[arrowIndex];
arrow.destroy();
arrows.splice(arrowIndex, 1);
var inputField = inputFields[arrowIndex];
inputField.parentNode.removeChild(inputField);
inputFields.splice(arrowIndex, 1);
}
}
var target = e.target;
if (target instanceof Konva.Arrow) {
target.remove();
layer.batchDraw();
} else if (target instanceof Konva.Tag) {
var inputFieldIndex = inputFields.indexOf(target);
if (inputFieldIndex > -1) {
var inputField = inputFields[inputFieldIndex];
inputField.parentNode.removeChild(inputField);
inputFields.splice(inputFieldIndex, 1);
}
}
});