msclient/src/lib/Mask.svelte

<script>
  import { onMount } from "svelte";

  // 应该确定四个点
  export let canvas_dom;

  let mask_top = canvas_dom.offsetTop;
  let mask_left = canvas_dom.offsetLeft;
  let mask_width = canvas_dom.clientWidth;
  let mask_height = canvas_dom.clientHeight;

  let cursor = "default";

  let crop_tag = false;

  let crop_area = -1;

  let mask_rects = [];

  function get_crop_rect(rects) {
    if (rects.length == 9) {
      return {
        x: rects[4][0] - mask_left,
        y: rects[4][1] - mask_top,
        width: rects[4][2],
        height: rects[4][3],
      };
    } else {
      return {};
    }
  }

  export let crop_rect = {};

  let crop_rect_with_offset = {
    x: mask_left + mask_width * 0.2,
    y: mask_top,
    width: mask_width * 0.6,
    height: mask_height * 0.6,
  };

  $: {
    crop_rect = get_crop_rect(mask_rects);
    console.log(crop_rect);
  }

  function init_mask_rects() {
    // TODO:
    return [
      [
        mask_left,
        mask_top,
        crop_rect_with_offset.x - mask_left,
        crop_rect_with_offset.y - mask_top,
      ],
      [
        crop_rect_with_offset.x,
        mask_top,
        crop_rect_with_offset.width,
        crop_rect_with_offset.y - mask_top,
      ],
      [
        crop_rect_with_offset.x + crop_rect_with_offset.width,
        mask_top,
        mask_left + mask_width,
        crop_rect_with_offset.y - mask_top,
      ],
      [
        mask_left,
        crop_rect_with_offset.y,
        crop_rect_with_offset.x - mask_left,
        crop_rect_with_offset.y - mask_top,
      ],
      [
        crop_rect_with_offset.x,
        crop_rect_with_offset.y,
        crop_rect_with_offset.width,
        crop_rect_with_offset.height,
      ],
    ];
  }

  function _set_crop_rect(e) {
    if (crop_area < 0) {
      return;
    }
    switch (crop_area) {
      case 0:
        console.log("mask_rects.4:" + mask_rects[4]);
        crop_rect_with_offset.x = e.clientX;
        crop_rect_with_offset.y = e.clientY;
        crop_rect_with_offset.width =
          mask_rects[4][2] - (mask_rects[4][0] - e.clientX);
        crop_rect_with_offset.height =
          mask_rects[4][3] - (mask_rects[4][1] - e.clientY);
        mask_rects = init_mask_rects();
        return;
      /*mask_rects[4][2] = r4[3] - (r4[0] - e.clientX);
        mask_rects[4][3] = r4[4] - (r4[1] - e.clientY);
      case 1:
        mask_rects[4][1] = e.clientY;
        mask_rects[4][3] = r4[4] - (r4[1] - e.clientY);*/
    }
  }

  function set_crop_rect(e, i) {
    console.log(crop_tag);
    if (crop_tag) {
      _set_crop_rect(e);
      return;
    }
    if (i != 4) {
      crop_area = -1;
      return;
    }
    if (
      e.clientX - mask_rects[4][1] <= mask_width * 0.01 &&
      e.clientY - mask_rects[4][0] <= mask_height * 0.01
    ) {
      cursor = "nwse-resize";
      crop_area = 0;
      return;
    }
    if (e.clientY - mask_rects[4][0] <= mask_height * 0.01) {
      cursor = "ns-resize";
      crop_area = 1;
      return;
    }

    if (
      e.clientX - mask_rects[4][1] <= mask_width * 0.01 &&
      e.clientY - mask_rects[4][0] - mask_rects[4][3] >= -mask_height * 0.01
    ) {
      cursor = "nesw-resize";
      crop_area = 2;
      return;
    }
    if (e.clientX - mask_rects[4][1] <= mask_width * 0.01) {
      cursor = "ew-resize";
      crop_area = 3;
      return;
    }

    if (e.clientX - mask_rects[4][1] - mask_rects[4][2] >= -mask_width * 0.01) {
      cursor = "ew-resize";
      crop_area = 4;
      return;
    }

    if (
      e.clientX - mask_rects[4][1] - mask_rects[4][2] >= -mask_width * 0.01 &&
      e.clientY - mask_rects[4][0] <= mask_height * 0.01
    ) {
      cursor = "nesw-resize";
      crop_area = 5;
      return;
    }
    if (
      e.clientY - mask_rects[4][0] - mask_rects[4][3] >=
      -mask_height * 0.01
    ) {
      cursor = "ns-resize";
      crop_area = 6;
      return;
    }
    if (
      e.clientX - mask_rects[4][1] - mask_rects[4][2] >= -mask_width * 0.01 &&
      e.clientY - mask_rects[4][0] - mask_rects[4][3] >= -mask_height * 0.01
    ) {
      cursor = "nwse-resize";
      crop_area = 7;
      return;
    }
    crop_area = -1;
  }

  onMount(() => {
    for (let i = 0; i < 9; i++) {
      mask_rects[i] = [
        mask_top_pos(i),
        mask_left_pos(i),
        mask_width_pos(i),
        mask_height_pos(i),
      ];
    }
  });

  function mask_top_pos(index) {
    let k = Math.floor(index / 3);
    switch (k) {
      case 0:
        return mask_top;
      case 1:
        return mask_top + mask_height * 0.2;
      case 2:
        return mask_top + mask_height * 0.8;
    }
  }

  function mask_left_pos(index) {
    let k = index % 3;
    switch (k) {
      case 0:
        return mask_left;
      case 1:
        return mask_left + mask_width * 0.2;
      case 2:
        return mask_left + mask_width * 0.8;
    }
  }

  function mask_width_pos(index) {
    let k = index % 3;
    switch (k) {
      case 0:
        return mask_width * 0.2;
      case 1:
        return mask_width * 0.6;
      case 2:
        return mask_width * 0.2;
    }
  }

  function mask_height_pos(index) {
    let k = Math.floor(index / 3);
    switch (k) {
      case 0:
        return mask_height * 0.2;
      case 1:
        return mask_height * 0.6;
      case 2:
        return mask_height * 0.2;
    }
  }
</script>

{#each mask_rects as r, i}
  <!-- svelte-ignore a11y-click-events-have-key-events -->
  <div
    class={i != 4 ? "mask" : "mask-center"}
    style:top={r[0] + "px"}
    style:left={r[1] + "px"}
    style:width={r[2] + "px"}
    style:height={r[3] + "px"}
    style:cursor
    on:mousemove={(e) => {
      set_crop_rect(e, i);
    }}
    on:mousedown={() => {
      if (i == 4) {
        crop_tag = true;
      }
    }}
    on:mouseup={() => {
      crop_tag = false;
    }}
  >
    <div class="mask-inner" />
  </div>
{/each}

<style>
  .mask {
    position: fixed;
    background-color: gray;
    opacity: 0.6;
  }

  .mask-center {
    position: fixed;
    border: 2px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: red;
  }

  .mask-inner {
    width: 98%;
    height: 98%;
    cursor: default;
  }
</style>