vue 불규칙 캡 처 실현

여러분 이 보 시 는 대부분 은 규칙 적 인 캡 처 입 니 다.대부분의 응용 장면 에 대응 할 수 있 습 니 다.그러나 이미지 처리 에 대해 규칙 을 사용자 에 게 맡 기 려 면 일반적인 캡 처 는 사용 자 를 만족 시 킬 수 없습니다.그러면 우 리 는 전단 에서 이미지 의 임 의적 인 규칙 을 캡 처 할 수 있 는 지,이어서 제 가 함께 토론 하 겠 습 니 다!

svg 를 통 해 그림 캡 처 실현
svg 에서 clipPath image 라벨 을 사용 하여 id 맵,동적 위치 polygon 의 좌 표를 통 해 그림 을 캡 처 합 니 다.

    <div>
        <div class="content" @mousemove="mousemove" @mouseup="(e) => {mouseup(e);}">
          <!--      -->
          <svg
            ref="blackSvg"
            class="blackSvg"
            xmlns="http://www.w3.org/2000/svg"
            width="300"
            height="300"
          >
            <defs>
              <clipPath id="clippath">
                <polygon :points="points"></polygon>
              </clipPath>
            </defs>
            <image
              xmlns:link="http://www.w3.org/1999/xlink"
              href="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3228549874,2173006364&fm=26&gp=0.jpg" rel="external nofollow" 
              width="300"
              height="300"
              preserveAspectRatio="none"
              style="clip-path: url(#clippath)"
            ></image>
          </svg>
          <!--     -->
          <ul class="interception">
            <li
              v-for="item in 4"
              :ref="`li${item}`"
              :key="item"
              @mousedown="(e) => {mousedown(e, item);}"
            ></li>
          </ul>
          <!--      -->
          <img
            class="blackImge"
            src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3228549874,2173006364&fm=26&gp=0.jpg"
            alt=""
          />
          <!--     -->
          <div class="blackDiv"></div>
    </div>
  </div>

css 부분

<style lang="sass">
.blackDiv
    width: 100%
    height: 100%
    position: absolute
    top: 0
    z-index: 2
    background: rgba(0,0,0, 1)
.content
    width:300px
    height:300px
    text-align: left
    position: relative
    .blackSvg
        position: absolute
        top: 0
        z-index: 3
    .blackImge
        position: absolute
        top: 0
        left: 0
        width: 300px
        height: 300px
    .interception
        list-style: none
        position: absolute
        top: 0
        margin: 0
        padding: 0
        z-index: 3
        >li
            position: absolute
            width: 10px
            height: 10px
            background: blue
            border-radius: 50%
            cursor: pointer
            &:hover
                transform: scale(1.2)
                transition-duration: .2
        >li:nth-child(1)
            top: 10px
            left: 10px
        >li:nth-child(2)
            top: 10px
            left: 100px
        >li:nth-child(3)
            top: 100px
            left: 100px
        >li:nth-child(4)
            top: 100px
            left: 10px
</style>
<script>

export default {
  name: 'Canvas',
  data() {
    return {
      points: '0 0,300 0,300 300,0 300', //        
      status: false,
      index: 0,
      disX: 0,
      disY: 0,
      coordinates: { //       
        1: [0, 0],
        2: [300, 0],
        3: [300, 300],
        4: [0, 300],
      },
    };
  },
  mounted() {
    this.$nextTick(() => {
      for (let key in this.coordinates) {
        const left = this.coordinates[key][0];
        const top = this.coordinates[key][1];
        this.$refs[`li${key}`].style.left = `${left}px`;
        this.$refs[`li${key}`].style.top = `${top}px`;
        if (key == 2 || key == 3) {
          this.$refs[`li${key}`].style.left = `${left - 10}px`;
        }
        if (key == 3 || key == 4) {
          this.$refs[`li${key}`].style.top = `${top - 10}px`;
        }
      }
      document.onmouseup = () => {
        this.status = false;
      };
    });
  },
  methods: {
    //    
    mousedown(e, index) {
      this.status = true;
      this.index = index;
      this.disX = e.clientX - this.$refs[`li${index}`].offsetLeft;
      this.disY = e.clientY - this.$refs[`li${index}`].offsetTop;
    },
    //     
    mouseup(e) {
      this.status = false;
    },
    //     
    mousemove(e) {
      if (this.status) {
        let left = e.clientX - this.disX;
        let top = e.clientY - this.disY;
        this.$refs[`li${this.index}`].style.left = `${left}px`;
        this.$refs[`li${this.index}`].style.top = `${top}px`;
        this.coordinates[this.index] = [left, top];
        const pointsArr = [];
        for (let item in this.coordinates) {
          pointsArr.push(
            Array.from(this.coordinates[item], (e) => {
              return e + 5;
            })
          );
        }
        this.points = pointsArr.join(' ');
      }
    },
  },
};

효과 도 전시

원본 주소
github 주소-->github.com/lgxin/captu…
이상 은 vue 가 불규칙 캡 처 를 실현 하 는 상세 한 내용 입 니 다.vue 불규칙 캡 처 에 관 한 자 료 는 다른 관련 글 을 주목 하 세 요!