Vue에서 스티커를 제거하는 방법-프런트엔드 Q&A-php.cn

Vue에서 스티커를 제거하는 방법

WBOY

풀어 주다： 2023-05-25 10:40:07

원래의

446명이 탐색했습니다.

vue.js를 기반으로 웹 애플리케이션을 구축하는 것이 점점 더 많은 프런트엔드 개발자의 선택이 되었습니다. 스티커 기능의 구현 역시 많은 소셜 애플리케이션에서 중요한 부분이 되었습니다. vue.js 기술 스택에서 스티커 기능을 구현하는 방법은 무엇입니까? 이번 글에서는 vue.js에서 스티커를 구현하는 방법을 자세히 소개하겠습니다.

1. 자료 준비

vue.js에서 스티커 기능을 구현하기 위해서는 관련 자료를 준비해야 합니다. 즉, 스티커 이미지와 관련 데이터 파일(스티커 이름, 위치 등)이 포함된 폴더입니다. 여기서는 require.ensure를 사용하여 자료 파일을 비동기적으로 로드함으로써 애플리케이션이 사용자 작업에 신속하게 응답하고 페이지 로딩 시간을 단축할 수 있습니다.

2. 스티커 표시

vue.js에서 스티커를 표시하려면 vue.js의 렌더링 기능을 사용하여 페이지에 스티커 요소를 추가해야 합니다. 이를 바탕으로 사용자의 마우스 이벤트를 모니터링하여 스티커를 드래그하고 크기를 조정하는 등의 대화형 효과를 얻을 수 있습니다.

1. 스티커 렌더링

vue.js의 렌더링 기능에서는 v-for 명령어를 통해 스티커 배열을 탐색하고 각 스티커를 페이지에 렌더링할 수 있습니다.

render(h) {
  return h('div', {
    class: 'sticker-wrapper',
  },
  this.$store.state.stickers.map(sticker => {
    return h('img', {
      class: 'sticker',
      style: {
        top: `${sticker.y}px`,
        left: `${sticker.x}px`,
        width: `${sticker.width}px`,
      },
      domProps: {
        src: sticker.src,
      },
      on: {
        mousedown: (event) => {
          this.dragSticker(event, sticker);
        },
      },
    });
  }));
}

로그인 후 복사

2. 스티커 드래그

마우스 이벤트를 수신하여 스티커 드래그 효과를 얻을 수 있습니다.

dragSticker(event, sticker) {
  this.selectedSticker = sticker;
  this.dragging = true;
  this.mouseStartX = event.clientX;
  this.mouseStartY = event.clientY;
  this.stickerStartX = sticker.x;
  this.stickerStartY = sticker.y;
  window.addEventListener('mousemove', this.moveSticker);
  window.addEventListener('mouseup', this.finishDrag);
},
moveSticker(event) {
  if (!this.dragging || !this.selectedSticker) {
    return;
  }
  const deltaX = event.clientX - this.mouseStartX;
  const deltaY = event.clientY - this.mouseStartY;
  this.selectedSticker.x = this.stickerStartX + deltaX;
  this.selectedSticker.y = this.stickerStartY + deltaY;
},
finishDrag() {
  this.dragging = false;
  this.selectedSticker = null;
  window.removeEventListener('mousemove', this.moveSticker);
  window.removeEventListener('mouseup', this.finishDrag);
},

로그인 후 복사

3. 스티커 크기 조정

드래그 앤 드롭 효과와 유사하게 사용자 마우스 이벤트를 듣고 스티커 크기를 동적으로 조정할 수도 있습니다.

resizeSticker(event, sticker, handle) {
  this.selectedSticker = sticker;
  event.stopPropagation();
  this.resizing = handle;
  this.mouseStartX = event.clientX;
  this.mouseStartY = event.clientY;
  this.stickerStartX = sticker.x;
  this.stickerStartY = sticker.y;
  this.stickerWidth = sticker.width;
  window.addEventListener('mousemove', this.handleResize);
  window.addEventListener('mouseup', this.finishResize);
},
handleResize(event) {
  if (!this.resizing || !this.selectedSticker) {
    return;
  }
  const deltaX = event.clientX - this.mouseStartX;
  const deltaY = event.clientY - this.mouseStartY;
  const scale = Math.min(Math.abs(deltaX), Math.abs(deltaY));
  if (this.resizing === 'nw') {
    this.selectedSticker.x = this.stickerStartX + deltaX;
    this.selectedSticker.y = this.stickerStartY + deltaY;
    this.selectedSticker.width = this.stickerWidth - scale;
  } else if (this.resizing === 'ne') {
    this.selectedSticker.y = this.stickerStartY + deltaY;
    this.selectedSticker.width = this.stickerWidth + scale;
  } else if (this.resizing === 'sw') {
    this.selectedSticker.x = this.stickerStartX + deltaX;
    this.selectedSticker.width = this.stickerWidth - scale;
  } else if (this.resizing === 'se') {
    this.selectedSticker.width = this.stickerWidth + scale;
  }
},
finishResize() {
  this.resizing = null;
  this.selectedSticker = null;
  window.removeEventListener('mousemove', this.handleResize);
  window.removeEventListener('mouseup', this.finishResize);
},

로그인 후 복사

3. 스티커 위치 정보 저장

사용자가 다음에 애플리케이션을 열 때 이전 스티커의 위치 정보를 얻을 수 있도록 vuex의 전역 상태에 스티커 배열을 저장하고 다음을 통해 스티커 데이터의 변경 사항을 관리할 수 있습니다. vuex.

mutations: {
  addSticker(state, newSticker) {
    state.stickers.push(newSticker);
  },
  removeSticker(state, sticker) {
    state.stickers.splice(state.stickers.indexOf(sticker), 1);
  },
  updateSticker(state, payload) {
    const sticker = payload.sticker;
    if (payload.prop === 'x') {
      sticker.x = payload.value;
    } else if (payload.prop === 'y') {
      sticker.y = payload.value;
    } else if (payload.prop === 'width') {
      sticker.width = payload.value;
    }
  },
},

로그인 후 복사

vuex에서 관리되는 데이터와 계산된 구성 요소 속성을 결합하면 데이터의 양방향 바인딩을 쉽게 달성할 수 있습니다.

computed: {
  ...mapState(['stickers']),
},

로그인 후 복사

4. 요약

vue.js의 렌더링 기능과 vuex의 데이터 관리를 통해 스티커 기능의 인터랙티브 효과를 쉽게 구현하고 스티커 위치 정보를 전역 상태로 저장하여 다음 열기를 용이하게 합니다. 스티커의 위치 정보를 복원합니다. 동시에 사용자 경험을 향상시키기 위해 스티커가 겹쳐지거나 화면에서 벗어나는 등의 문제를 피하는 데에도 주의를 기울여야 합니다.

위 내용은 Vue에서 스티커를 제거하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!