Tengo una configuración simple donde uso la ubicación de los clics y crea una etiqueta con texto. Lo que me gustaría poder hacer es cambiar el tamaño en el zoom, de modo que la etiqueta siempre tenga un tamaño relativo. Actualmente, la etiqueta es enorme cuando hago zoom para cubrir áreas clave.
código:
createTag() { return new Konva.Tag({ // omitted for brevity }) } createLabel(x: number, y: number) { return new Konva.Label({ x: x, y: y, opacity: 0.75 }); } createText() { return new Konva.Text({ // omitted for brevity }); } createMarker(point: any) { var label = createLabel(point.x, point.y); var tag = createTag(); var text = createText(); label.add(tag); label.add(text); this.layer.add(label); this.stage.add(this.layer); }Oyente de eventos de clic del mouse
this.stage.on('click', function (e) { // omitted for brevity var pointer = this.getRelativePointerPosition(); createMarker(pointer); // omitted for brevity } this.stage.on('wheel', function (e) { // zoom code });¿Cómo puedo cambiar el tamaño de las etiquetas para que tengan un tamaño relativo del lienzo?
Hay muchas soluciones posibles. Si está cambiando la escala de todo el escenario, puede aplicar una escala invertida a la etiqueta, por lo que su escala absoluta será siempre 1.
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 circle = new Konva.Circle({ x: stage.width() / 2, y: stage.height() / 2, radius: 50, fill: 'green', }); layer.add(circle); // tooltip var tooltip = new Konva.Label({ x: circle.x(), y: circle.y(), opacity: 0.75, }); layer.add(tooltip); tooltip.add( new Konva.Tag({ fill: 'black', pointerDirection: 'down', pointerWidth: 10, pointerHeight: 10, lineJoin: 'round', shadowColor: 'black', shadowBlur: 10, shadowOffsetX: 10, shadowOffsetY: 10, shadowOpacity: 0.5, }) ); tooltip.add( new Konva.Text({ text: 'Try to zoom with wheel', fontFamily: 'Calibri', fontSize: 18, padding: 5, fill: 'white', }) ); var scaleBy = 1.01; stage.on('wheel', (e) => { e.evt.preventDefault(); var oldScale = stage.scaleX(); var pointer = stage.getPointerPosition(); var mousePointTo = { x: (pointer.x - stage.x()) / oldScale, y: (pointer.y - stage.y()) / oldScale, }; var newScale = e.evt.deltaY > 0 ? oldScale * scaleBy : oldScale / scaleBy; stage.scale({ x: newScale, y: newScale }); // apply reversed scale to label // so its absolte scale is still 1 tooltip.scale({ x: 1 / newScale, y: 1 / newScale }) var newPos = { x: pointer.x - mousePointTo.x * newScale, y: pointer.y - mousePointTo.y * newScale, }; stage.position(newPos); }); <script src="https://unpkg.com/konva@8.3.0/konva.min.js"></script> <div id="container"></div>