可視化拖拽組件庫一些技術(shù)要點(diǎn)原理分析

const startY = e.clientYconst startX = e.clientX

// 獲取組件中心點(diǎn)位置const rect = this.$el.getBoundingClientRect()const centerX = rect.left + rect.width / 2const centerY = rect.top + rect.height / 2

const curX = moveEvent.clientXconst curY = moveEvent.clientY

// 旋轉(zhuǎn)前的角度const rotateDegreeBefore = Math.atan2(startY - centerY, startX - centerX) / (Math.PI / 180)// 旋轉(zhuǎn)后的角度const rotateDegreeAfter = Math.atan2(curY - centerY, curX - centerX) / (Math.PI / 180)// 獲取旋轉(zhuǎn)的角度值， startRotate 為初始角度值pos.rotate = startRotate + rotateDegreeAfter - rotateDegreeBefore

const center = {    x: style.left + style.width / 2,    y: style.top + style.height / 2,}

// 獲取畫布位移信息const editorRectInfo = document.querySelector('#editor').getBoundingClientRect()
// 當(dāng)前點(diǎn)擊坐標(biāo)const curPoint = {    x: e.clientX - editorRectInfo.left,    y: e.clientY - editorRectInfo.top,}
// 獲取對稱點(diǎn)的坐標(biāo)const symmetricPoint = {    x: center.x - (curPoint.x - center.x),    y: center.y - (curPoint.y - center.y),}

const curPositon = {    x: moveEvent.clientX - editorRectInfo.left,    y: moveEvent.clientY - editorRectInfo.top,}
const newCenterPoint = getCenterPoint(curPositon, symmetricPoint)
// 求兩點(diǎn)之間的中點(diǎn)坐標(biāo)function getCenterPoint(p1, p2) {    return {        x: p1.x + ((p2.x - p1.x) / 2),        y: p1.y + ((p2.y - p1.y) / 2),    }}

/** * 計(jì)算根據(jù)圓心旋轉(zhuǎn)后的點(diǎn)的坐標(biāo) * @param   {Object}  point  旋轉(zhuǎn)前的點(diǎn)坐標(biāo) * @param   {Object}  center 旋轉(zhuǎn)中心 * @param   {Number}  rotate 旋轉(zhuǎn)的角度 * @return  {Object}         旋轉(zhuǎn)后的坐標(biāo) * https://www.zhihu.com/question/67425734/answer/252724399 旋轉(zhuǎn)矩陣公式 */export function calculateRotatedPointCoordinate(point, center, rotate) {    /**     * 旋轉(zhuǎn)公式：     *  點(diǎn)a(x, y)     *  旋轉(zhuǎn)中心c(x, y)     *  旋轉(zhuǎn)后點(diǎn)n(x, y)     *  旋轉(zhuǎn)角度θ                tan ??     * nx = cosθ * (ax - cx) - sinθ * (ay - cy) + cx     * ny = sinθ * (ax - cx) + cosθ * (ay - cy) + cy     */
    return {        x: (point.x - center.x) * Math.cos(angleToRadian(rotate)) - (point.y - center.y) * Math.sin(angleToRadian(rotate)) + center.x,        y: (point.x - center.x) * Math.sin(angleToRadian(rotate)) + (point.y - center.y) * Math.cos(angleToRadian(rotate)) + center.y,    }}

function calculateLeftTop(style, curPositon, pointInfo) {    const { symmetricPoint } = pointInfo    const newCenterPoint = getCenterPoint(curPositon, symmetricPoint)    const newTopLeftPoint = calculateRotatedPointCoordinate(curPositon, newCenterPoint, -style.rotate)    const newBottomRightPoint = calculateRotatedPointCoordinate(symmetricPoint, newCenterPoint, -style.rotate)
    const newWidth = newBottomRightPoint.x - newTopLeftPoint.x    const newHeight = newBottomRightPoint.y - newTopLeftPoint.y    if (newWidth > 0 && newHeight > 0) {        style.width = Math.round(newWidth)        style.height = Math.round(newHeight)        style.left = Math.round(newTopLeftPoint.x)        style.top = Math.round(newTopLeftPoint.y)    }}

const newWidth = style.width * cos(style.rotate) + style.height * sin(style.rotate)

const newHeight = style.height * cos(style.rotate) + style.width * sin(style.rotate)

translateComponentStyle(style) {    style = { ...style }    if (style.rotate != 0) {        const newWidth = style.width * cos(style.rotate) + style.height * sin(style.rotate)        const diffX = (style.width - newWidth) / 2        style.left += diffX        style.right = style.left + newWidth
        const newHeight = style.height * cos(style.rotate) + style.width * sin(style.rotate)        const diffY = (newHeight - style.height) / 2        style.top -= diffY        style.bottom = style.top + newHeight
        style.width = newWidth        style.height = newHeight    } else {        style.bottom = style.top + style.height        style.right = style.left + style.width    }
    return style}

pointList: ['lt', 't', 'rt', 'r', 'rb', 'b', 'lb', 'l'], // 八個(gè)方向initialAngle: { // 每個(gè)點(diǎn)對應(yīng)的初始角度    lt: 0,    t: 45,    rt: 90,    r: 135,    rb: 180,    b: 225,    lb: 270,    l: 315,},angleToCursor: [ // 每個(gè)范圍的角度對應(yīng)的光標(biāo)    { start: 338, end: 23, cursor: 'nw' },    { start: 23, end: 68, cursor: 'n' },    { start: 68, end: 113, cursor: 'ne' },    { start: 113, end: 158, cursor: 'e' },    { start: 158, end: 203, cursor: 'se' },    { start: 203, end: 248, cursor: 's' },    { start: 248, end: 293, cursor: 'sw' },    { start: 293, end: 338, cursor: 'w' },],cursors: {},

getCursor() {  const { angleToCursor, initialAngle, pointList, curComponent } = this  const rotate = (curComponent.style.rotate + 360) % 360 // 防止角度有負(fù)數(shù)，所以 + 360  const result = {}  let lastMatchIndex = -1 // 從上一個(gè)命中的角度的索引開始匹配下一個(gè)，降低時(shí)間復(fù)雜度  pointList.forEach(point => {      const angle = (initialAngle[point] + rotate) % 360      const len = angleToCursor.length      let i = 0      while (i < len) {          lastMatchIndex = (lastMatchIndex + 1) % len          const angleLimit = angleToCursor[lastMatchIndex]          if (angle < 23 || angle >= 338) {              result[point] = 'nw-resize'              break          }
          if (angleLimit.start <= angle && angle < angleLimit.end) {              result[point] = angleLimit.cursor + '-resize'              break          }      }  })
  return result},

const ctrlKey = 17, vKey = 86, cKey = 67, xKey = 88let isCtrlDown = false
window.onkeydown = (e) => {    if (e.keyCode == ctrlKey) {        isCtrlDown = true    } else if (isCtrlDown && e.keyCode == cKey) {        this.$store.commit('copy')    } else if (isCtrlDown && e.keyCode == vKey) {        this.$store.commit('paste')    } else if (isCtrlDown && e.keyCode == xKey) {        this.$store.commit('cut')    }}
window.onkeyup = (e) => {    if (e.keyCode == ctrlKey) {        isCtrlDown = false    }}

copy(state) {    state.copyData = {        data: deepCopy(state.curComponent),        index: state.curComponentIndex,    }},

paste(state, isMouse) {    if (!state.copyData) {        toast('請選擇組件')        return    }
    const data = state.copyData.data
    if (isMouse) {        data.style.top = state.menuTop        data.style.left = state.menuLeft    } else {        data.style.top += 10        data.style.left += 10    }
    data.id = generateID()    store.commit('addComponent', { component: data })    store.commit('recordSnapshot')    state.copyData = null},

cut({ copyData }) {    if (copyData) {        store.commit('addComponent', { component: copyData.data, index: copyData.index })    }
    store.commit('copy')    store.commit('deleteComponent')},

<li @click="copy" v-show="curComponent">復(fù)制li><li @click="paste">粘貼li><li @click="cut" v-show="curComponent">剪切li>
cut() {    this.$store.commit('cut')},
copy() {    this.$store.commit('copy')},
paste() {    this.$store.commit('paste', true)},

<template>    <div>{{ propValue.data }}div>template>
<script>export default {    // propValue: {    //     api: {    //             request: a,    //             params,    //      },    //     data: null    // }    props: {        propValue: {            type: Object,            default: () => {},        },    },    created() {        this.propValue.api.request(this.propValue.api.params).then(res => {            this.propValue.data = res.data        })    },}script>

const data = ['status', 'text'...]

// 組件能接收的數(shù)據(jù)props: {    propValue: {        type: String,    },    element: {        type: Object,    },    wsKey: {        type: String,        default: '',    },},

<template>    <div>{{ wsData[wsKey] }}div>template>
<script>import { mapState } from 'vuex'
export default {    props: {        propValue: {            type: String,        },        element: {            type: Object,        },        wsKey: {            type: String,            default: '',        },    },    computed: mapState([        'wsData',    ]),script>

www.test.com/?id=awww.test.com/?id=cwww.test.com/?id=b

import Vue from 'vue'
const components = [    'Picture',    'VText',    'VButton',]
components.forEach(key => {    Vue.component(key, () => import(`@/custom-component/${key}`))})

- v-text  - v1.vue  - v2.vue

{  component: 'v-text',  version: 'v1'  ...}

import Vue from 'vue'import componentList from '@/custom-component/component-list`
componentList.forEach(component => {    Vue.component(component.name, () => import(`@/custom-component/${component.name}/${component.version}`))})