clip 裁剪

https://daybrush.com/moveable/release/latest/doc/Moveable.Clippable.html

1 屬性

this.moveable = new Moveable(
        this.$refs.content, // moveable元素的父元素
        {
          target: this.$refs.clip, // 響應(yīng)moveable操作的元素
          className: "moveable", // 可交互組件的class名稱
          clippable: true, // 是否支持裁剪
          clipArea: true, // 裁剪選區(qū)是否支持drag, default: false
          clipHorizontalGuidelines: [ 100], // 裁剪選區(qū)的水平方向邊界貼邊磁吸輔助線坐標(biāo)
          clipVerticalGuidelines: [ 100], // 裁剪選區(qū)的垂直方向邊界貼邊磁吸輔助線坐標(biāo)
          clipRelative: false, // 監(jiān)聽事件內(nèi)的裁剪數(shù)據(jù)返回值,是否用百分比代替像素單位px, default: false
          clipSnapThreshold: 5, // 邊界磁吸輔助線的磁吸效果響應(yīng)范圍,default: 5
          clipTargetBounds: true, // 裁剪區(qū)域是否必須在邊界內(nèi), default: false 
          defaultClipPath: "inset(0px 18px 16px 0px)", // 初始化時(shí)默認(rèn)的裁剪路徑, defaultClipPath < style < customClipPath < dragging clipPath
          // customClipPath: "inset(0px 18px 16px 0px)", // 指定clipPath選區(qū)框體和句柄以此裁剪路徑的位置顯示,即使后續(xù)通過clip操作后,選區(qū)框體和句柄還是會(huì)重新變?yōu)樵摌邮?          dragWithClip: false, // 拖動(dòng)target元素時(shí),裁剪框是否同步移動(dòng),(實(shí)際測(cè)試效果:true和false好像沒有區(qū)別)
        }
      );

2 事件

clip事件有clipStart,clip,clipEnd三種,通過moveable實(shí)例的on方法添加監(jiān)聽事件,返回值event

• clipStart

this.moveable
        .on("clipStart", ({
          currentTarget, // moveable實(shí)例,即this.moveable
          moveable, // moveable的manager對(duì)象, const manager = this.moveable.getManager();
          target, // DOM 初始化moveable的target元素
          clientX, // number 鼠標(biāo)所在屏幕的橫坐標(biāo)
          clientY, // number 鼠標(biāo)實(shí)例所在屏幕的縱坐標(biāo)
          datas,
          inputEvent, // Event 鼠標(biāo)事件mousemove
          clipType, // 裁剪的類型(形狀),"polygon" | "circle" | "ellipse" | "inset" | "rect";同 css:clip-path(https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path)屬性
          poses, // 裁剪句柄的坐標(biāo)[[x1,y1]...]
          clipStyle // 裁剪結(jié)果的css
        }) => {
            // ... 
        })

• clip

this.moveable
.on("clip", (
          {
            clipEventType, // 裁剪事件的類型: "added" | "changed" | "removed", 實(shí)際使用只發(fā)現(xiàn)changed,暫時(shí)不確定added和removed是怎么觸發(fā)的
            distX, // 句柄相對(duì)于原始位置移動(dòng)的水平距離,往右移動(dòng)為正值
            distY, // 句柄相對(duì)于原始位置移動(dòng)的垂直距離,往下移動(dòng)為正值
            clipStyles, // 裁剪結(jié)果的數(shù)據(jù),數(shù)組格式
            currentTarget, 
            moveable, 
            target,
            clientX,
            clientY, 
            datas,
            inputEvent, 
            clipType, 
            poses, 
            clipStyle
          }
        ) => {
          console.log(distX, distY, clipStyles)
          if (clipType === "rect") {
            target.style.clip = clipStyle;
          } else {
            target.style.clipPath = clipStyle;
          }
        })

• clipEnd

this.moveable
.on("clipEnd", (
      {
          lastEvent, // 最后一個(gè)clip的事件,如果moveable實(shí)例未被執(zhí)行clip操作,則為undefined
          isDrag, // boolean moveable實(shí)例是否被拖動(dòng)了
          isDouble, // boolean moveable實(shí)例是否被雙擊
          currentTarget, 
          moveable, 
          target,
          clientX,
          clientY, 
          datas,
          inputEvent, 
        }) => {
           // ...
        });