In meiner Anwendung verwende ich KonvaJS ausgiebig, aber ich habe einen Schritt erreicht, wo ich eine Bootstrap Popover auf KonvaJS Image klicken muss, ist das möglich?Wie erstellt man ein Bootstrap-Popover, indem man auf das KonvaJS Image-Objekt klickt?
Bitte beachten Sie, dass ich mehr als 50 Bilder in dieser App habe und ich für jeden ein Popover erstellen muss.
Wenn Sie PopOver nur für Canvas-Bilder haben möchten, würde ich vorschlagen, Konva.Label zu verwenden. Sie können den Zeiger in die gewünschte Richtung einstellen und die Position des Etiketts festlegen. Hier ist die plunkr, die ich erstellt habe.
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.rawgit.com/konvajs/konva/0.15.0/konva.min.js"></script>
<meta charset="utf-8">
<title>Konva Label Demo</title>
<style>
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #F0F0F0;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
var stage = new Konva.Stage({
container: 'container',
width: 300,
height: 300
});
var layer = new Konva.Layer();
// label with left pointer
var tooltip = new Konva.Label({
x: 170,
y: 75,
opacity: 0.75
});
tooltip.add(new Konva.Tag({
fill: 'black',
pointerDirection: 'down',
pointerWidth: 10,
pointerHeight: 10,
lineJoin: 'round',
shadowColor: 'black',
shadowBlur: 10,
shadowOffset: 10,
shadowOpacity: 0.5
}));
tooltip.add(new Konva.Text({
text: 'Yoda has powers...',
fontFamily: 'Calibri',
fontSize: 18,
padding: 5,
fill: 'white'
}));
var image = new Image();
image.onload = function() {
var lion = new Konva.Image({
image: image,
x: 70,
y: 75,
draggable: true
});
layer.add(lion);
// add the labels to layer
layer.add(tooltip);
layer.draw();
};
image.src = 'http://konvajs.github.io/assets/yoda.jpg';
// add the layer to the stage
stage.add(layer);
</script>
</body>
</html>
Was haben Sie versucht? Sie können die Mausposition beim Klicken erhalten? Und Sie können Popover erstellen und dann die Position überschreiben (mit der Mausposition). http://codingexplained.com/coding/front-end/css/change-bootstrap-popover-position – lavrton