moveable组件学习笔记四: clip裁剪

clip 裁剪

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

1 属性

this.moveable = new Moveable(
        this.$refs.content, // moveable元素的父元素
        {
          target: this.$refs.clip, // 响应moveable操作的元素
          className: "moveable", // 可交互组件的class名称
          clippable: true, // 是否支持裁剪
          clipArea: true, // 裁剪选区是否支持drag, default: false
          clipHorizontalGuidelines: [ 100], // 裁剪选区的水平方向边界贴边磁吸辅助线坐标
          clipVerticalGuidelines: [ 100], // 裁剪选区的垂直方向边界贴边磁吸辅助线坐标
          clipRelative: false, // 监听事件内的裁剪数据返回值,是否用百分比代替像素单位px, default: false
          clipSnapThreshold: 5, // 边界磁吸辅助线的磁吸效果响应范围,default: 5
          clipTargetBounds: true, // 裁剪区域是否必须在边界内, default: false 
          defaultClipPath: "inset(0px 18px 16px 0px)", // 初始化时默认的裁剪路径, defaultClipPath < style < customClipPath < dragging clipPath
          // customClipPath: "inset(0px 18px 16px 0px)", // 指定clipPath选区框体和句柄以此裁剪路径的位置显示,即使后续通过clip操作后,选区框体和句柄还是会重新变为该样式
          dragWithClip: false, // 拖动target元素时,裁剪框是否同步移动,(实际测试效果:true和false好像没有区别)
        }
      );

2 事件

clip事件有clipStart,clip,clipEnd三种,通过moveable实例的on方法添加监听事件,返回值event

• clipStart

this.moveable
        .on("clipStart", ({
          currentTarget, // moveable实例,即this.moveable
          moveable, // moveable的manager对象, const manager = this.moveable.getManager();
          target, // DOM 初始化moveable的target元素
          clientX, // number 鼠标所在屏幕的横坐标
          clientY, // number 鼠标实例所在屏幕的纵坐标
          datas,
          inputEvent, // Event 鼠标事件mousemove
          clipType, // 裁剪的类型(形状),"polygon" | "circle" | "ellipse" | "inset" | "rect";同 css:clip-path(https://developer.mozilla.org/zh-CN/docs/Web/CSS/clip-path)属性
          poses, // 裁剪句柄的坐标[[x1,y1]...]
          clipStyle // 裁剪结果的css
        }) => {
            // ... 
        })

• clip

this.moveable
.on("clip", (
          {
            clipEventType, // 裁剪事件的类型: "added" | "changed" | "removed", 实际使用只发现changed,暂时不确定added和removed是怎么触发的
            distX, // 句柄相对于原始位置移动的水平距离,往右移动为正值
            distY, // 句柄相对于原始位置移动的垂直距离,往下移动为正值
            clipStyles, // 裁剪结果的数据,数组格式
            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, // 最后一个clip的事件,如果moveable实例未被执行clip操作,则为undefined
          isDrag, // boolean moveable实例是否被拖动了
          isDouble, // boolean moveable实例是否被双击
          currentTarget, 
          moveable, 
          target,
          clientX,
          clientY, 
          datas,
          inputEvent, 
        }) => {
           // ...
        });