Una biblioteca JS para ver una imagen, dibujar sobre ella y pellizcar para hacer zoom

Actualmente estoy usando un lienzo con una imagen como fondo manipulado con FabricJS para dibujar fácilmente usando la propiedad isDrawingMode: true.

El problema es que a los usuarios les gustaría pellizcar para hacer zoom en la imagen y no sé cómo hacerlo con FabricJS, he encontrado otras bibliotecas como Pixi.js pero parecen realmente complejas para mi caso de uso: ver una imagen (es no ocupa toda la pantalla), dibujando y haciendo zoom, guardando el resultado.

Todos mis usuarios tienen iPads, por lo que es importante pellizcar para hacer zoom. ¿Conoce alguna biblioteca que pueda cumplir con estos requisitos?

Respuestas (1)

Una solución comercial que puede probar es LEADTOOLS Image Viewer and Annotations Library .

El control del visor de imágenes proporcionado por el SDK admite pellizcar para hacer zoom, así como la capacidad de agregar anotaciones que le permitirían dibujar en las imágenes.

Puede probar una demostración interactiva en línea aquí: LEADTOOLS JS Annotations Online Interactive Demo

Aquí hay un código de muestra sobre cómo comenzar con la biblioteca LEADTOOLS:

código HTML

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>LEADTOOLS Demo</title>
    <script type="text/javascript" src="lib/Leadtools.js"></script>
    <script type="text/javascript" src="lib/Leadtools.Controls.js"></script>
    <script type="text/javascript" src="lib/app.js"></script>
    <script type="text/javascript" src="lib/Leadtools.Annotations.Core.js"></script>
    <script type="text/javascript" src="lib/Leadtools.Annotations.Rendering.JavaScript.js"></script>
    <script type="text/javascript" src="lib/Leadtools.Annotations.Designers.js"></script>
    <script type="text/javascript" src="lib/Leadtools.Annotations.Automation.js"></script>
    <script type="text/javascript" src="lib/Leadtools.Annotations.JavaScript.js"></script>
</head>
<body>
    <div id="imageViewerDiv" style="width:550px; height:200px; background-color: darkgray"></div>
</body>

Código JavaScript

window.onload = function () {
var imageViewerDiv = document.getElementById("imageViewerDiv");
var createOptions = new lt.Controls.ImageViewerCreateOptions(imageViewerDiv);
var imageViewer = new lt.Controls.ImageViewer(createOptions);
imageViewer.imageUrl = "https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png";

var renderingEngine = new lt.Annotations.Rendering.AnnHtml5RenderingEngine();
var manager = new lt.Annotations.Automation.AnnAutomationManager.create(renderingEngine);
manager.createDefaultObjects();
manager.editObjectAfterDraw = false;

var automationControl = new lt.Annotations.JavaScript.ImageViewerAutomationControl();
automationControl.imageViewer = imageViewer;
var automationInteractiveMode = new lt.Annotations.JavaScript.AutomationInteractiveMode();
automationInteractiveMode.automationControl = automationControl;
imageViewer.defaultInteractiveMode = automationInteractiveMode;

var automation = new lt.Annotations.Automation.AnnAutomation(manager, automationControl);
imageViewer.itemChanged.add(function (sender, e) {
   var container = automation.container;
   container.size = container.mapper.sizeToContainerCoordinates(imageViewer.imageSize);
   manager.currentObjectId = lt.Annotations.Core.AnnObject.freehandObjectId;
});
automation.active = true;

}

Salida del código anterior:

captura de pantalla de bloques de código pegados

Solo como descargo de responsabilidad, soy un empleado de esta biblioteca.

Una biblioteca JS para ver una imagen, dibujar sobre ella y pellizcar para hacer zoom
RespuestasAquíPolítica de privacidad1y, 0v