视频裁剪

仅仅是模拟视频裁剪，获取到视频裁剪区域位置坐标，实际裁剪视频还是得依赖后端实现

dom模拟实现

video-cropper实现效果

元素选择框效果

主要依赖 css background 实现

.box {
    // 配置虚线背景 以及4条边框
    background-image: linear-gradient(to right, #fff 50%, transparent 50%), linear-gradient(to right, #fff 50%, transparent 50%), linear-gradient(to right, #fff, #fff), linear-gradient(to right, #fff, #fff);
    background-size: 10px 1px, 10px 1px, 100% 1px, 100% 1px;
    background-position: 0 calc(33.33% - 0.5px), 0 calc(66.66% - 0.5px), 0 0, 0 100%;
    background-repeat: repeat-x;
    &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;

        background-image: linear-gradient(to bottom, #fff 50%, transparent 50%), linear-gradient(to bottom, #fff 50%, transparent 50%), linear-gradient(to bottom, #fff, #fff), linear-gradient(to bottom, #fff, #fff);
        background-size: 1px 10px, 1px 10px, 1px 100%, 1px 100%;
        background-position: calc(33.33% - 1px) 0, calc(66.66% - 1px) 0, 0 0, 100% 0;
        background-repeat: repeat-y;
    }
}

mask遮罩区域

没想到吧，css background 一样能模拟出来

通过在盒子周围用4个背景拼接起来，形成一个整体的效果

    computed: {
        backgroundImage() {
      return `linear-gradient(to bottom, var(--main-bg-color) 0, var(--main-bg-color) ${
        this.top
      }px,transparent 0),linear-gradient(to top, var(--main-bg-color) 0, var(--main-bg-color) ${
        this.parentSize.height - this.bottom + 1
      }px, transparent 0),linear-gradient(to bottom,transparent ${0},transparent ${
        this.top
      }px, var(--main-bg-color) ${this.top}px, var(--main-bg-color) ${
        this.bottom
      }px , transparent 0),linear-gradient(to bottom, transparent ${0},transparent ${
        this.top
      }px, var(--main-bg-color) ${this.top}px, var(--main-bg-color) ${
        this.bottom - 1
      }px,transparent 0)`;
    },
    }

canvas 画布实现

通过canvas 可以轻易的实现该效果

原生canvas移动效果

建议通过 konva 实现，konva对canvas做了封住，更加易用