Utilice vue+fabric.js para obtener las coordenadas de la imagen y realizar funciones de arrastre, rotación, estiramiento y otras funciones.

¿Qué es Fabric.js?

Fabric.js es una biblioteca que simplifica la escritura de programas de Canvas. Fabric.js proporciona a Canvas el modelo de objetos faltantes, el analizador svg, la interactividad y una gran cantidad de otras herramientas indispensables.

¿Por qué usar Fabric.js?

Canvas proporciona una buena capacidad de lienzo, pero la Api no es lo suficientemente amigable. En realidad, está bien dibujar gráficos simples, pero no es tan conveniente dibujar algunos gráficos complejos y escribir algunos efectos complejos. Fabric.js está desarrollado para este propósito y utiliza principalmente objetos para escribir código.

comenzar

Introducción de Fabric.js en el proyecto Vue

Suponiendo que está usando ES6 y Webpack en su proyecto, puede comenzar a usar Fabric.js así:

1. En la línea de comando:

npm install fabric（或yarn add fabric）

2. Importarlo  .vue al archivo

import { fabric } from 'fabric'

3.   Comience su viaje Fabric.js en el ciclo de vida .vue en el archivo único mounted:

Nota: Los módulos npm de fabric predeterminados producen paquetes bastante grandes, si tiene muchos paquetes en Fabric.js, es posible que no los necesite, en cuyo caso puede crear su propia versión aquí o en la línea de comando.

hacer dibujos

1. Agregue un lienzo con id al componente

<canvas id="c"></canvas>

2. Inicializar el lienzo

this.canvasObj = new fabric.Canvas('c',{
                preserveObjectStacking:true // 禁止选中图层时自定置于顶部
});
this.canvasObj.setWidth(this.caWidth); //设置画布宽度
this.canvasObj.setHeight(this.caHeight); //设置画布高度

3. Agregue gráficos al lienzo

setImage: function (imgname) {
                let imgCoord = fabric.Image.fromURL(imgname, (img) => {
                    img.scale(1).set({
                        left: 150,
                        top: 150,
                        angle: -15
                    });
                    this.canvasObj.add(img).setActiveObject(img);
                });
 }

Hasta ahora se han agregado los gráficos al lienzo, el siguiente paso es obtener las coordenadas XY de los gráficos.

Toda la información del objeto gráfico se puede obtener a través del método getObjects() proporcionado por fabric.js. Fabric.js devolverá las imágenes en forma de matriz según el nivel de las imágenes. Aquí solo necesito obtener el arriba a la derecha abajo a la izquierda de la imagen Coordenadas de las cuatro esquinas

getImg: function () {
                this.imgcoordinate = [];
                let items = this.canvasObj.getObjects();
                items.forEach((item, index) => {
                    let itemcoord = {
                        floorIndex: index,
                        tl: {
                            x: item.aCoords.tl.x,
                            y: item.aCoords.tl.y
                        },
                        tr: {
                            x: item.aCoords.tr.x,
                            y: item.aCoords.tr.y
                        },
                        bl: {
                            x: item.aCoords.bl.x,
                            y: item.aCoords.bl.y
                        },
                        br: {
                            x: item.aCoords.br.x,
                            y: item.aCoords.br.y
                        }
                    };
                    this.imgcoordinate.push(itemcoord);
                });
}

En este punto, se puede obtener toda la información de coordenadas de la imagen. Si necesita cambiar el nivel de la imagen y eliminar la imagen, también puede mirar hacia abajo

// 移动层次
moveActive: function (index) {
                let t = this.canvasObj.getActiveObject();
                switch (index) {
                    case 0:
                    t.sendBackwards(); //向下一层
                    break;
                    case 1:
                    t.sendToBack();  //向下至底层
                    break;
                    case 2:
                    t.bringForward();  //向上一层
                    break;
                    case 3:
                    t.bringToFront();   //向上至顶层
                    break;
                    case 4:
                    this.canvasObj.remove(t);   //删除图片
                    break;
                    default:
                    return
                }
},

Si desea generar una imagen y descargarla, puede vincular la información de la imagen generada a una etiqueta <a> y luego simular hacer clic para descargar

domeLode: function(){
       let url = this.canvasObj.toDataURL();
       $('<a>').attr({href:url,download:'a.png'})[0].click();
}

Mira la representación final