4. [vue.js] Farbric.js 사용하기 | 이미지 위에 마우스 드레깅으로 영역 설정

http://fabricjs.com/

Fabric.js Javascript Canvas Library

---

프로젝트에서 이렇게 사용자가 직접 영역설정을 해야하는 코드를 구현해야해서 처음 Farbric.js 를 알게됐다

다른점은 이미지를 마우스 드레깅 하는게 아니라 이미지 위에 사각형을 추가해서 사각형 안의 영역을 구해야하는것

 

---

사용법은 아주 간단! 위의 Farbric.js 사이트에 들어가서

1. Download the latest version을 눌러서 js 코드를 복사해서 프로젝트에 js파일을 만들고 붙여넣어서 import해서 사용하던가

그냥 스크립트 url을 연결해서 사용하던가 편한대로 Farbric.js를 연결시켜 준다.

 

---

<template>
  <div>
    <div ref="canvasCon" style="position: absolute;"></div>
    <img width="100%" height="100%" v-bind:src="imgFileUid" />
  </div>
</template>

<script>
import "farbric.js";

let canvas = null;
let rect = null;
let tempThis = null;

export default {
  

  data() {
    return {
        area: {
                x: "50",
                y: "50",
                w: "25",
                h: "25",

            }

    };
  },

  mounted() {},

  methods: {
    open() {
            let areaCanvas = document.querySelector("#areaCanvas");

            if (areaCanvas != null) document.querySelector("#areaCanvas").remove();

            this.canvasGridSquare();

    },
    canvasGridSquare() {
        let canvasHtml = " <canvas id='areaCanvas' width='300' height='300'></canvas>";
        this.$refs.canvasCon.innerHTML = canvasHtml;

        canvas = new fabric.Canvas("areaCanvas");

        rect = new fabric.Rect({
            left: this.area.x * 3,
            top: this.area.y * 3,
            width: this.area.w * 3 - 1,
            height: this.area.h * 3 - 1,
            fill: "",
            stroke: "red",
            strokeWidth: 2,
            fillOpacity: 0,
        });

        canvas.add(rect);
        this.canvasMouseEvent();

    },
    canvasMouseEvent() {
        tempThis = this;

        canvas.on("mouse:up", function (param) {
            let obj = canvas.getActiveObject(rect);
            if (param.target != null && param.target != "") {
                tempThis.area.x = parseInt(100 * (param.target.left / 300));
                tempThis.area.y = parseInt(100 * (param.target.top / 300));
                tempThis.area.w = parseInt(100 * ((obj.aCoords.br.x - obj.aCoords.tl.x) / 300));
                tempThis.area.h = parseInt(100 * ((obj.aCoords.br.y - obj.aCoords.tl.y) / 300));
            }
        });
    },


},
};
</script>

<style lang="scss" scoped></style>

 

2. 팝업이 시작되면 canvasCon이란 ID를 가지고 있는 div안에 areaCanvas란 ID를 가진 Canvas 태그를 추가한다

    만약 이미 areaCanvas란 ID를 가진 Canvas가 있다면 romove() 메서드로 요소를 제거한다.

 

 

3. 사용자가 마우스로 영역을 설정하면 바뀐 영역값이 area.x, area.y, area.w, area.h에 저장되게한다