Vue3中使用paper.js

已于 2024-04-12 17:45:56 修改
阅读量484 收藏 1
点赞数 3
文章标签： javascript vue.js canvas
于 2024-03-26 17:15:18 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44775782/article/details/137052080
版权

目录

Paper.js的使用

在这里插入图片描述

安装Paper

npm install paper

引入Paper.js

import * as Paper from "paper";

创建画布

// 创建画布
<template>
  <canvas id="myCanvas" ref="myCanvas"></canvas>
</template>

实例化Paper、Project以及Tool

const paperInstance = new Paper.PaperScope();
let project: null | paper.Project = null;//全局项目，用来设置图层、导入导出数据等
const tool = new Paper.Tool();//全局工具，用来监听事件

onMounted(() => {
  paperInstance.setup(document.getElementById("myCanvas") as HTMLCanvasElement);
  project = new Paper.Project(
    document.getElementById("myCanvas") as HTMLCanvasElement
  );
  tool.activate();
});

画圆

const drawCircle = () => {
  const circle = new Paper.Path.Circle({
    center: [200, 100], //中心点  或者使用new Path.Point(200,100)
    radius: 50, //半径
    fillColor: new Paper.Color("red"), //填充颜色
    strokeColor: new Paper.Color("black"), //边框颜色
  });
  circle.strokeWidth = 2;
};

画点和线

const drawPointAndLine = () => {
  const point = new Paper.Point(500, 100); //点位置
  const path = new Paper.Path(); //需要path才能画出来
  // point.selected = true; //选中样式
  path.add(point); // 将点添加到路径中
  const copyPoint = point.clone(); // 克隆点
  copyPoint.set(600, 100); // 设置克隆点的位置
  path.add(copyPoint); // 将克隆点添加到路径中 2个点形成一条线
  path.strokeColor = new Paper.Color("black"); // 设置路径的边框颜色
  path.strokeWidth = 4;
  path.selected = true; // 选中路径
};

画矩形

const drawRectangle = () => {
  // 方式一
  const rect1 = new Paper.Path.Rectangle({
    center: [200, 400], //中心点
    size: [50, 100], //边长
    radius: [5, 5], //圆角
    fillColor: "orange",
    strokeColor: "black",
    strokeWidth: 4,
    rotation: 45, //旋转角度
    selected: true, //选中样式
  });
  // 方式二
  const topLeft = new Paper.Point(200, 20); //坐上角位置
  const rectSize = new Paper.Size(200, 200); //大小
  const rect2 = new Paper.Rectangle(topLeft, rectSize); //通过坐上角和大小创建矩形 还可以通过坐上角和右下角创建矩形等
  const radius = new Paper.Size(30, 30); //圆角
  const path = new Paper.Path.Rectangle(rect2, radius); //将矩形通过path画出来
  path.fillColor = new Paper.Color("blue");
  path.position.set({
    x: 300,
    y: 300,
  });
  path.selected = true;
};

导入图片

import Demo1 from "../../assets/demo1.jpg";

const drawImg = () => {
  const img = new Paper.Raster(Demo1);
  img.position.set(700, 600);
  img.scale(0.2);
};

画文字

const drawText = () => {
  const text = new Paper.PointText({
    position: [500, 200], //文本位置
    fillColor: "black",
    justification: "center",
    fontSize: 20, //字体大小
    content: "测试文字",
    locked: false, //锁定
  });
};

Item组

  const drawGroup = () => {
  const group = new Paper.Group();
  const text = new Paper.PointText({
    position: [0, -50 - 10], //文本位置
    content: "圆",
    fillColor: "black",
    justification: "center",
    fontSize: 20, //字体大小
  });
  const circle = new Paper.Path.Circle({
    center: [0, 0], //中心点
    radius: 50, //半径
    fillColor: "red", //填充颜色
  });
  group.addChildren([text, circle]);
  group.position.set(1200, 800);
};

曲线

const drawCurve = () => {
  const group = new Paper.Group();
  const earth = new Paper.Path.Circle({
    center: [800, 200],
    radius: 50,
    fillColor: new Paper.Color("green"),
  });

  var firstPoint1 = calculatePointOnCircle(800, 200, 50, (Math.PI / 18) * 19);
  var secondPoint1 = calculatePointOnCircle(800, 200, 50, (Math.PI / 18) * 1);
  var handleOut1 = new Paper.Point(160, 60);
  var handleIn1 = new Paper.Point(-160, 20);
  var firstSegment = new Paper.Segment(firstPoint1, undefined, handleIn1);
  var secondSegment = new Paper.Segment(secondPoint1, handleOut1, undefined);
  const curve1 = new Paper.Path([firstSegment, secondSegment]);
  curve1.strokeColor = new Paper.Color("black");
  curve1.strokeWidth = 8;
  curve1.locked = true;
  curve1.selected = false;

  group.addChildren([earth, curve1]);
};

监听键盘事件

const onKeyDown = () => {
   // 通过tool来监听
  tool.onKeyDown = (event: any) => {
    console.log(event);
    if (event.event.key === "z" && event.event.ctrlKey) {
    }
  };
};

监听鼠标事件

const onMouse = () => {
  const children = project?.activeLayer.children; //获取所有的item
  // 全局的鼠标事件
  tool.onMouseDown = (event: any) => {
    if (!event.item) {
      children?.forEach((item: any) => {
        item.selected = false;
      });
    } else {
      children?.forEach((item: any) => {
        item.selected = false;
      });
      event.item.selected = true;
    }
  };
  // 单个item的事件
  children?.forEach((item: any) => {
    // 每个item添加按下鼠标事件
    item.onMouseDown = () => {
      project?.activeLayer.addChild(item);//提高层级
      item.selected = true;
    };
    // 每个item添加鼠标拖动事件
    item.onMouseDrag = (event: paper.MouseEvent) => {
      item.position.set(
        item.position.x + event.delta.x,
        item.position.y + event.delta.y
      );
    };
  });
};

设置动画

let direction = "right";
const drawAnimate = () => {
  const node = new Paper.Path.Circle({
    center: [200, 100],
    radius: 50,
  });
  node.strokeColor = new Paper.Color("black");
  node.fillColor = new Paper.Color("white");
  node.onFrame = () => {
    const maxWidth = document.body.clientWidth;
    if (direction === "right") {
      if (node.bounds.right >= maxWidth) {
        direction = "left";
      }
    } else {
      if (node.bounds.left <= 0) {
        direction = "right";
      }
    }
    if (direction === "right") {
      node.bounds.x += 5;
    } else {
      node.bounds.x -= 5;
    }
  };
};

动画线

const drawAnimateLine = () => {
  const line = new Paper.Path.Line({
    from: [1200, 200],
    to: [1200, 600],
    strokeColor: new Paper.Color("red"),
    strokeWidth: 8,
  });
  line.style.dashArray = [10, 10];
  line.onFrame = () => {
    line.style.dashOffset -= 1;
    if (line.style.dashOffset <= 0) {
      line.style.dashOffset = 100;
    }
  };
};

下载成图片

const screenShot = () => {
  // 获取svg元素，将整个canvas导出为svg
  const flash = project?.exportSVG();
  // 将SVG元素转换为字符串
  var serializer = new XMLSerializer();
  var xmlString = serializer.serializeToString(flash as SVGAElement);
  // 创建一个Blob对象
  var blob = new Blob([xmlString], { type: "image/svg+xml;charset=utf-8" });
  // 创建一个指向该Blob的URL
  var url = URL.createObjectURL(blob);
  // 创建一个a标签
  var a = document.createElement("a");
  a.href = url;
  a.download = "my-svg-file.svg";
  // 将a标签添加到文档中，触发点击事件，然后将其从文档中删除
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
};

缩放画布

const mouseWheel = (e: any) => {
  paperInstance.view.zoom = paperInstance.view.zoom * (1 + e.wheelDelta / 1000);
};

onMounted(() => {
  canvasEl.addEventListener("wheel", mouseWheel);
});
onUnmounted(() => {
  const canvasEl = document.getElementById("myCanvas") as HTMLCanvasElement;
  canvasEl.removeEventListener("wheel", mouseWheel);
});

拖拽画布

const downPoint = {
  x: 0,
  y: 0,
};
let zoom = 1;

const mouseMove = (e: any) => {
  const translateX = e.x - downPoint.x;
  const translateY = e.y - downPoint.y;
  // 移动距离 需要除以缩放比例否则移动会 过快或慢
  paperInstance.view.translate({
    x: translateX / zoom,
    y: translateY / zoom,
  });
  downPoint.x = e.x;
  downPoint.y = e.y;
};

const cancelMove = () => {
  const canvasEl = document.getElementById("myCanvas") as HTMLCanvasElement;
  canvasEl.removeEventListener("mousemove", mouseMove);
  canvasEl.removeEventListener("mouseup", cancelMove);
};

onMounted(() => {
  paperInstance.view.onMouseDown = (e: paper.MouseEvent) => {
    const ele = e.target as unknown as paper.View;
    if (ele === paperInstance.view) {
      //只有拖canvas才能拖动
      downPoint.x = e.x;
      downPoint.y = e.y;
      zoom = paperInstance.view.zoom;
      canvasEl.addEventListener("mousemove", mouseMove);
      canvasEl.addEventListener("mouseup", cancelMove);
    }
  };
});

自定义选中样式和拖拽边角进行放大缩小

  const addSelect = (item: paper.Item) => {
    const rect = new Paper.Path.Rectangle({
      center: item.bounds.center, //中心点
      size: item.bounds.size, //边长
      strokeColor: new Paper.Color("blue"),
      strokeWidth: 1,
    });
    const topLeftRect = new Paper.Path.Rectangle({
      center: item.bounds.topLeft, //中心点
      size: [10, 10], //边长
      fillColor: new Paper.Color("#fff"),
      strokeColor: new Paper.Color("blue"),
      strokeWidth: 1,
      name: "topLeftRect",
    });
    const topRightRect = new Paper.Path.Rectangle({
      center: item.bounds.topRight, //中心点
      size: [10, 10], //边长
      fillColor: new Paper.Color("#fff"),
      strokeColor: new Paper.Color("blue"),
      strokeWidth: 1,
      name: "topRightRect",
    });
    const bottomLeftRect = new Paper.Path.Rectangle({
      center: item.bounds.bottomLeft, //中心点
      size: [10, 10], //边长
      fillColor: new Paper.Color("#fff"),
      strokeColor: new Paper.Color("blue"),
      strokeWidth: 1,
      name: "bottomLeftRect",
    });
    const bottomRightRect = new Paper.Path.Rectangle({
      center: item.bounds.bottomRight, //中心点
      size: [10, 10], //边长
      fillColor: new Paper.Color("#fff"),
      strokeColor: new Paper.Color("blue"),
      strokeWidth: 1,
      name: "bottomRightRect",
    });
    const topCenterRect = new Paper.Path.Rectangle({
      center: item.bounds.topCenter, //中心点
      size: [10, 10], //边长
      fillColor: new Paper.Color("#fff"),
      strokeColor: new Paper.Color("blue"),
      strokeWidth: 1,
      name: "topCenterRect",
    });
    const leftCenterRect = new Paper.Path.Rectangle({
      center: item.bounds.leftCenter, //中心点
      size: [10, 10], //边长
      fillColor: new Paper.Color("#fff"),
      strokeColor: new Paper.Color("blue"),
      strokeWidth: 1,
      name: "leftCenterRect",
    });
    const rightCenterRect = new Paper.Path.Rectangle({
      center: item.bounds.rightCenter, //中心点
      size: [10, 10], //边长
      fillColor: new Paper.Color("#fff"),
      strokeColor: new Paper.Color("blue"),
      strokeWidth: 1,
      name: "rightCenterRect",
    });
    const bottomCenterRect = new Paper.Path.Rectangle({
      center: item.bounds.bottomCenter, //中心点
      size: [10, 10], //边长
      fillColor: new Paper.Color("#fff"),
      strokeColor: new Paper.Color("blue"),
      strokeWidth: 1,
      name: "bottomCenterRect",
    });
    // 将矩形和四个角添加到组中
    const g1 = new Paper.Group([
      rect,
      topLeftRect,
      topRightRect,
      bottomLeftRect,
      bottomRightRect,
      topCenterRect,
      leftCenterRect,
      rightCenterRect,
      bottomCenterRect,
    ]);
    // 将选择框和当前元素添加到组中，目的是统一选择框和当前元素的拖拽缩放等
    const g2 = new Paper.Group([item, g1]);
    // 配置了drag才开启
    if (config.itemHandle?.includes("drag")) {
      g2.onMouseDrag = (e: paper.MouseEvent) => {
        e.stopPropagation();
        g2.position.set(
          item.position.x + e.delta.x,
          item.position.y + e.delta.y
        );
      };
    }
    topLeftRect.onMouseDrag = (e: paper.MouseEvent) => {
      e.stopPropagation();
      if (
        item.bounds.size.height - e.delta.y <= 20 ||
        item.bounds.size.width - e.delta.x <= 20
      ) {
        return;
      }
      item.bounds.center.y += e.delta.y;
      item.bounds.center.x += e.delta.x;
      item.bounds.size.height -= e.delta.y;
      item.bounds.size.width -= e.delta.x;

      rect.bounds.center.y += e.delta.y;
      rect.bounds.center.x += e.delta.x;
      rect.bounds.size.height -= e.delta.y;
      rect.bounds.size.width -= e.delta.x;

      // 左上 xy
      topLeftRect.bounds.x += e.delta.x;
      topLeftRect.bounds.y += e.delta.y;
      // 右上 y
      topRightRect.bounds.y += e.delta.y;
      // 左下 x
      bottomLeftRect.bounds.x += e.delta.x;
      // 上中 xy
      topCenterRect.bounds.y += e.delta.y;
      topCenterRect.bounds.x += e.delta.x / 2;
      // 左中 xy
      leftCenterRect.bounds.y += e.delta.y / 2;
      leftCenterRect.bounds.x += e.delta.x;
      // 右中 y
      rightCenterRect.bounds.y += e.delta.y / 2;
      // 下中 x
      bottomCenterRect.bounds.x += e.delta.x / 2;
    };
    topRightRect.onMouseDrag = (e: paper.MouseEvent) => {
      e.stopPropagation();
      if (
        item.bounds.size.height - e.delta.y <= 20 ||
        item.bounds.size.width + e.delta.x <= 20
      ) {
        return;
      }
      item.bounds.center.y += e.delta.y;
      item.bounds.size.height -= e.delta.y;
      item.bounds.size.width += e.delta.x;

      rect.bounds.center.y += e.delta.y;
      rect.bounds.size.height -= e.delta.y;
      rect.bounds.size.width += e.delta.x;

      // 右上 xy
      topRightRect.bounds.x += e.delta.x;
      topRightRect.bounds.y += e.delta.y;
      // 左上 y
      topLeftRect.bounds.y += e.delta.y;
      // 右下 x
      bottomRightRect.bounds.x += e.delta.x;
      // 上中 xy
      topCenterRect.bounds.y += e.delta.y;
      topCenterRect.bounds.x += e.delta.x / 2;
      // 左中 y
      leftCenterRect.bounds.y += e.delta.y / 2;
      // 右中 xy
      rightCenterRect.bounds.y += e.delta.y / 2;
      rightCenterRect.bounds.x += e.delta.x;
      // 下中 x
      bottomCenterRect.bounds.x += e.delta.x / 2;
    };
    bottomLeftRect.onMouseDrag = (e: paper.MouseEvent) => {
      e.stopPropagation();
      if (
        item.bounds.size.height + e.delta.y <= 20 ||
        item.bounds.size.width - e.delta.x <= 20
      ) {
        return;
      }
      item.bounds.center.x += e.delta.x;
      item.bounds.size.height += e.delta.y;
      item.bounds.size.width -= e.delta.x;

      rect.bounds.center.x += e.delta.x;
      rect.bounds.size.height += e.delta.y;
      rect.bounds.size.width -= e.delta.x;

      // 左下 xy
      bottomLeftRect.bounds.x += e.delta.x;
      bottomLeftRect.bounds.y += e.delta.y;
      // 坐上 x
      topLeftRect.bounds.x += e.delta.x;
      // 右下 y
      bottomRightRect.bounds.y += e.delta.y;
      // 上中 x
      topCenterRect.bounds.x += e.delta.x / 2;
      // 左中 xy
      leftCenterRect.bounds.y += e.delta.y / 2;
      leftCenterRect.bounds.x += e.delta.x;
      // 右中 y
      rightCenterRect.bounds.y += e.delta.y / 2;
      // 下中 xy
      bottomCenterRect.bounds.y += e.delta.y;
      bottomCenterRect.bounds.x += e.delta.x / 2;
    };
    bottomRightRect.onMouseDrag = (e: paper.MouseEvent) => {
      e.stopPropagation();
      if (
        item.bounds.size.height + e.delta.y <= 20 ||
        item.bounds.size.width + e.delta.x <= 20
      ) {
        return;
      }
      item.bounds.size.height += e.delta.y;
      item.bounds.size.width += e.delta.x;

      rect.bounds.size.height += e.delta.y;
      rect.bounds.size.width += e.delta.x;

      // 右下
      bottomRightRect.bounds.x += e.delta.x;
      bottomRightRect.bounds.y += e.delta.y;
      // 右上 x
      topRightRect.bounds.x += e.delta.x;
      // 左下 y
      bottomLeftRect.bounds.y += e.delta.y;
      // 上中 x
      topCenterRect.bounds.x += e.delta.x / 2;
      // 左中 y
      leftCenterRect.bounds.y += e.delta.y / 2;
      // 右中 xy
      rightCenterRect.bounds.y += e.delta.y / 2;
      rightCenterRect.bounds.x += e.delta.x;
      // 下中 xy
      bottomCenterRect.bounds.y += e.delta.y;
      bottomCenterRect.bounds.x += e.delta.x / 2;
    };
    topCenterRect.onMouseDrag = (e: paper.MouseEvent) => {
      e.stopPropagation();
      if (item.bounds.size.height - e.delta.y <= 20) {
        return;
      }
      item.bounds.center.y += e.delta.y;
      item.bounds.size.height -= e.delta.y;

      rect.bounds.center.y += e.delta.y;
      rect.bounds.size.height -= e.delta.y;

      // 左上 y
      topLeftRect.bounds.y += e.delta.y;
      // 右上 y
      topRightRect.bounds.y += e.delta.y;
      // 上中 y
      topCenterRect.bounds.y += e.delta.y;
      // 左中 y
      leftCenterRect.bounds.y += e.delta.y / 2;
      // 右中 y
      rightCenterRect.bounds.y += e.delta.y / 2;
    };
    leftCenterRect.onMouseDrag = (e: paper.MouseEvent) => {
      e.stopPropagation();
      if (item.bounds.size.width - e.delta.x <= 20) {
        return;
      }
      item.bounds.center.x += e.delta.x;
      item.bounds.size.width -= e.delta.x;

      rect.bounds.center.x += e.delta.x;
      rect.bounds.size.width -= e.delta.x;

      // 左上 x
      topLeftRect.bounds.x += e.delta.x;
      // 左下 x
      bottomLeftRect.bounds.x += e.delta.x;
      // 左中 x
      leftCenterRect.bounds.x += e.delta.x;
      // 上中 x
      topCenterRect.bounds.x += e.delta.x / 2;
      // 下中 x
      bottomCenterRect.bounds.x += e.delta.x / 2;
    };
    bottomCenterRect.onMouseDrag = (e: paper.MouseEvent) => {
      e.stopPropagation();
      if (item.bounds.size.height + e.delta.y <= 20) {
        return;
      }
      item.bounds.size.height += e.delta.y;

      rect.bounds.size.height += e.delta.y;

      // 左下 y
      bottomLeftRect.bounds.y += e.delta.y;
      // 右下 y
      bottomRightRect.bounds.y += e.delta.y;
      // 下中 y
      bottomCenterRect.bounds.y += e.delta.y;
      // 左中 y
      leftCenterRect.bounds.y += e.delta.y / 2;
      // 右中 y
      rightCenterRect.bounds.y += e.delta.y / 2;
    };
    rightCenterRect.onMouseDrag = (e: paper.MouseEvent) => {
      e.stopPropagation();
      if (item.bounds.size.width + e.delta.x <= 20) {
        return;
      }
      item.bounds.size.width += e.delta.x;

      rect.bounds.size.width += e.delta.x;

      // 右上 x
      topRightRect.bounds.x += e.delta.x;
      // 右下 x
      bottomRightRect.bounds.x += e.delta.x;
      // 右中 x
      rightCenterRect.bounds.x += e.delta.x;
      // 上中 x
      topCenterRect.bounds.x += e.delta.x / 2;
      // 下中 x
      bottomCenterRect.bounds.x += e.delta.x / 2;
    };
    [
      topLeftRect,
      topRightRect,
      bottomLeftRect,
      bottomRightRect,
      topCenterRect,
      leftCenterRect,
      rightCenterRect,
      bottomCenterRect,
    ].forEach((item) => {
      item.onMouseLeave = (e: paper.MouseEvent) => {
        e.stopPropagation();
        cursor.value = "default";
      };
      item.onMouseEnter = (e: paper.MouseEvent) => {
        e.stopPropagation();
        switch (e.target.name) {
          case "topLeftRect":
            cursor.value = "nw-resize";
            break;
          case "topRightRect":
            cursor.value = "ne-resize";
            break;
          case "bottomLeftRect":
            cursor.value = "sw-resize";
            break;
          case "bottomRightRect":
            cursor.value = "se-resize";
            break;
          case "topCenterRect":
            cursor.value = "n-resize";
            break;
          case "leftCenterRect":
            cursor.value = "w-resize";
            break;
          case "rightCenterRect":
            cursor.value = "e-resize";
            break;
          case "bottomCenterRect":
            cursor.value = "s-resize";
            break;
        }
      };
    });

    return [g1, g2, item];
  };

完整代码

<template>
  <div class="container">
    <canvas id="myCanvas" ref="canvasEl"></canvas>
  </div>
</template>

<script lang="ts">
export default { name: "Paper" };
</script>
<script lang="ts" setup>
import * as Paper from "paper";
import { onMounted, reactive } from "vue";
import Demo1 from "../../assets/demo1.jpg";
import { CanvasHandle, ItemHandle, usePaper } from "./";

let direction = "right";
const config = reactive({
  zoom: true,
  canvasHandle: "select" as CanvasHandle,
  itemHandle: ["select", "drag"] as ItemHandle,
  tooltips: () => {
    return "123";
  },
});
const { canvasEl, cursor, registerMouseEvent } = usePaper(config);//使用配置进行创建

const drawAnimate = () => {
  const node = new Paper.Path.Circle({
    center: [200, 100],
    radius: 50,
  });
  node.strokeColor = new Paper.Color("black");
  node.fillColor = new Paper.Color("white");
  node.onFrame = () => {
    const maxWidth = document.body.clientWidth;
    if (direction === "right") {
      if (node.bounds.right >= maxWidth) {
        direction = "left";
      }
    } else {
      if (node.bounds.left <= 0) {
        direction = "right";
      }
    }
    if (direction === "right") {
      node.bounds.x += 5;
    } else {
      node.bounds.x -= 5;
    }
  };
};

const drawCircle = () => {
  const circle = new Paper.Path.Circle({
    center: [200, 100], //中心点
    radius: 50, //半径
    fillColor: new Paper.Color("red"), //填充颜色
    strokeColor: new Paper.Color("black"), //边框颜色
    cursor: "pointer",
  });
  circle.strokeWidth = 2;

  const pathData = "M 50 100 L 100 0 L 0 0 Z";
  const path = new Paper.Path(pathData);
  path.strokeColor = new Paper.Color("black");
  path.fillColor = new Paper.Color("green");
  path.strokeWidth = 2;
  path.strokeWidth = 2;
  path.position.set(400, 100);
};

const drawPointAndLine = () => {
  const point = new Paper.Point(500, 100); //点位置
  const path = new Paper.Path(); //需要path才能画出来
  // point.selected = true; //选中样式
  path.add(point); // 将点添加到路径中
  const copyPoint = point.clone(); // 克隆点
  copyPoint.set(600, 100); // 设置克隆点的位置
  path.add(copyPoint); // 将克隆点添加到路径中 2个点形成一条线
  path.strokeColor = new Paper.Color("black"); // 设置路径的边框颜色
  path.strokeWidth = 4;
};

const drawRectangle = () => {
  // 方式一
  const rect1 = new Paper.Path.Rectangle({
    center: [200, 400], //中心点
    size: [50, 100], //边长
    radius: [5, 5], //圆角
    fillColor: "orange",
    strokeColor: "black",
    strokeWidth: 4,
    rotation: 45, //旋转角度
  });
  // 方式二
  const topLeft = new Paper.Point(200, 20); //坐上角位置
  const rectSize = new Paper.Size(200, 200); //大小
  const rect2 = new Paper.Rectangle(topLeft, rectSize); //通过坐上角和大小创建矩形 还可以通过坐上角和右下角创建矩形等
  const radius = new Paper.Size(30, 30); //圆角
  const path = new Paper.Path.Rectangle(rect2, radius); //将矩形通过path画出来
  path.fillColor = new Paper.Color("blue");
  path.position.set({
    x: 300,
    y: 300,
  });
};

const drawImg = () => {
  const img = new Paper.Raster(Demo1);
  const rect2 = new Paper.Rectangle(img.bounds.topLeft, img.bounds.size); //通过坐上角和大小创建矩形 还可以通过坐上角和右下角创建矩形等
  const path = new Paper.Path.Rectangle(rect2);
  path.strokeColor = new Paper.Color("transparent");
  path.strokeWidth = 4;
  img.position.set(700, 600);
  img.scale(0.2);
  // addSelect(img);
};

const drawText = () => {
  const text = new Paper.PointText({
    position: [1600, 50], //文本位置
    fillColor: "black",
    justification: "center",
    fontSize: 20, //字体大小
    content: "下载",
    locked: false, //锁定
    name: "download",
    style: {
      cursor: "pointer",
    },
  });
};

const drawGroup = () => {
  const group = new Paper.Group();
  const text = new Paper.PointText({
    position: [0, -50 - 10], //文本位置
    content: "圆",
    fillColor: "black",
    justification: "center",
    fontSize: 20, //字体大小
  });
  const circle = new Paper.Path.Circle({
    center: [0, 0], //中心点
    radius: 50, //半径
    fillColor: "red", //填充颜色
  });
  group.addChildren([text, circle]);
  group.position.set(1200, 800);
};

const drawCurve = () => {
  const group = new Paper.Group();
  const earth = new Paper.Path.Circle({
    center: [800, 200],
    radius: 50,
    fillColor: new Paper.Color("green"),
  });

  var firstPoint1 = calculatePointOnCircle(800, 200, 50, (Math.PI / 18) * 19);
  var secondPoint1 = calculatePointOnCircle(800, 200, 50, (Math.PI / 18) * 1);
  var handleOut1 = new Paper.Point(160, 60);
  var handleIn1 = new Paper.Point(-160, 20);
  var firstSegment = new Paper.Segment(firstPoint1, undefined, handleIn1);
  var secondSegment = new Paper.Segment(secondPoint1, handleOut1, undefined);
  const curve1 = new Paper.Path([firstSegment, secondSegment]);
  curve1.strokeColor = new Paper.Color("black");
  curve1.strokeWidth = 8;
  curve1.locked = true;
  curve1.selected = false;
  curve1.style.strokeCap = "round"; //圆角

  group.addChildren([earth, curve1]);
};

const drawAnimateLine = () => {
  const line = new Paper.Path.Line({
    from: [1200, 200],
    to: [1200, 600],
    strokeColor: new Paper.Color("red"),
    strokeWidth: 8,
  });
  line.style.dashArray = [10, 10];
  line.onFrame = () => {
    line.style.dashOffset -= 1;
    if (line.style.dashOffset <= 0) {
      line.style.dashOffset = 100;
    }
  };
};

const drawArc = () => {
  const group = new Paper.Group();
  const arc = new Paper.Path.Arc({
    from: [0, 50],
    through: [50, 0],
    to: [50, 100],
    strokeColor: "black",
    fillColor: "red",
    strokeWidth: 4,
  });

  const pathData = "M 50 50 L 50 101 L -1 50 Z";
  const path = new Paper.Path(pathData);
  path.fillColor = new Paper.Color("white");
  path.strokeWidth = 0;
  group.addChildren([arc, path]);
};

const calculatePointOnCircle = (
  centerX: number,
  centerY: number,
  radius: number,
  angle: number
) => {
  var x = centerX + radius * Math.cos(angle);
  var y = centerY + radius * Math.sin(angle);
  return new Paper.Point(x, y);
};

onMounted(() => {
  drawCircle();
  drawPointAndLine();
  drawRectangle();
  drawImg();
  drawText();
  drawGroup();
  drawAnimateLine();
  drawAnimate();
  drawArc();
  setTimeout(() => {
    drawCurve(); //注册事件之后画出来 不会响应事件
    registerMouseEvent(); //需要重新注册一下事件
  }, 3000);
});
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  position: relative;
  #myCanvas {
    width: 100%;
    height: 100%;
    cursor: v-bind(cursor);
  }
  .control {
    div {
      position: absolute;
      width: 10px;
      height: 10px;
      background-color: #fff;
      border: 1px solid blue;
    }
    .top-left {
      cursor: nw-resize;
    }
    .top-right {
      cursor: ne-resize;
    }
    .bottom-left {
      cursor: sw-resize;
    }
    .bottom-right {
      cursor: se-resize;
    }
  }
}
</style>

将元素的拖拽缩放、canvas的拖拽缩放抽离成hook

import { nextTick, onMounted, onUnmounted, ref, toRaw, watch } from "vue";
import * as Paper from "paper";
export type CanvasHandle = "select" | "drag" | "none";
export type ItemHandle = CanvasHandle[] | CanvasHandle;
export interface PaperConfig {
  zoom: boolean;
  canvasHandle: CanvasHandle;
  itemHandle: ItemHandle;
  tooltips: string | (() => string);
}

export const usePaper = (config: PaperConfig) => {
  const defaultConfig: PaperConfig = {
    zoom: true,
    canvasHandle: "drag",
    itemHandle: "none",
    tooltips: "我是提示",
  };
  config = { ...defaultConfig, ...config };

  const paperInstance = ref<paper.PaperScope>(new Paper.PaperScope());
  const canvasEl = ref<HTMLCanvasElement>();
  const zoom = ref(1);
  const selection = ref<paper.Path.Rectangle>();
  const selectionGroup = ref<paper.Item[]>();
  const cursor = ref("default");

  const downPoint = {
    x: 0,
    y: 0,
  };
  const map = new WeakMap();

  watch(
    () => selectionGroup.value,
    (newValue, oldValue) => {
      if (oldValue) {
        oldValue[0].remove();
      }
    }
  );

  const mouseWheel = (e: any) => {
    if (config.zoom) {
      e.preventDefault();
      paperInstance.value.view.zoom =
        paperInstance.value.view.zoom * (1 + e.wheelDelta / 1000);
      zoom.value = paperInstance.value.view.zoom;
    }
  };

  /**
   * @description 处理canvas拖拽选中
   */
  const canvasHandleFn = () => {
    // 鼠标按下操作
    paperInstance.value.view.onMouseDown = (event: paper.MouseEvent | any) => {
      const ele = event.target as unknown as paper.View;
      const view = toRaw(paperInstance.value.view);
      // 开启拖拽画布
      if (config.canvasHandle === "drag") {
        /**
         * @description 拖画布
         */
        const mouseMove = (e: any) => {
          const translateX = e.x - downPoint.x;
          const translateY = e.y - downPoint.y;
          paperInstance.value.view.translate({
            x: translateX / zoom.value,
            y: translateY / zoom.value,
          });
          downPoint.x = e.x;
          downPoint.y = e.y;
        };
        /**
         * @description 取消监听
         */
        const cancelMove = () => {
          canvasEl.value?.removeEventListener("mousemove", mouseMove);
          canvasEl.value?.removeEventListener("mouseup", cancelMove);
        };
        if (ele === view) {
          //只有拖canvas才能拖动
          downPoint.x = event.event.pageX;
          downPoint.y = event.event.pageY;
          zoom.value = paperInstance.value.view.zoom;
          canvasEl.value?.addEventListener("mousemove", mouseMove);
          canvasEl.value?.addEventListener("mouseup", cancelMove);
        }
      }

      //框选 鼠标按下给出框选左上角位置
      if (config.canvasHandle === "select") {
        if (ele === view) {
          selection.value = new Paper.Path.Rectangle(
            event.point,
            new Paper.Size(1, 1)
          );
          selection.value.strokeWidth = 1;
          selection.value.strokeColor = new Paper.Color(0, 0, 0, 0.5);
          selection.value.style.dashArray = [4, 4];
          selection.value.name = "selection";
        }
        if (selectionGroup.value && ele === view) {
          // 处理选中组
          const children = selectionGroup.value[2].removeChildren();
          children?.forEach((item) => {
            item.addTo(paperInstance.value.project);
          });
          selectionGroup.value = undefined;
        }
      }
    };
    paperInstance.value.view.onMouseDrag = (e: paper.MouseEvent) => {
      if (selection.value) {
        selection.value.bounds.width += e.delta.x;
        selection.value.bounds.height += e.delta.y;
      }
    };
    paperInstance.value.view.onMouseUp = (e: paper.MouseEvent) => {
      if (selection.value) {
        let childrens: paper.Item[] = [];
        // 处理选中组
        const chooseItems = paperInstance.value.project.getItems({
          match: (item: paper.Item) => {
            const { topLeft, bottomRight } = item.bounds;
            if (
              topLeft.x > selection.value!.bounds.topLeft.x &&
              topLeft.y > selection.value!.bounds.topLeft.y &&
              bottomRight.x < selection.value!.bounds.bottomRight.x &&
              bottomRight.y < selection.value!.bounds.bottomRight.y
            ) {
              // 处理选中组
              if (item instanceof Paper.Group) {
                childrens.push(...item.children);
                return item;
              } else {
                if (!childrens.includes(item)) {
                  return item;
                }
              }
            }
          },
        });
        console.log(chooseItems);
        if (chooseItems.length) {
          // 将框出来的item 组成一个组 组进行缩放拖拽
          const g = new Paper.Group([...chooseItems]);
          selectionGroup.value = addSelect(g);
          paperInstance.value.project?.activeLayer.addChild(
            selectionGroup.value![1]
          ); //提高层级
        }
        if (selection.value) {
          selection.value!.remove();
          selection.value = undefined;
        }
        downPoint.x = 0;
        downPoint.y = 0;
      }
    };
  };

  /**
   * @description 添加选择框 并注册事件
   */
  const addSelect = (item: paper.Item) => {
    const rect = new Paper.Path.Rectangle({
      center: item.bounds.center, //中心点
      size: item.bounds.size, //边长
      strokeColor: new Paper.Color("blue"),
      strokeWidth: 1,
    });
    const topLeftRect = new Paper.Path.Rectangle({
      center: item.bounds.topLeft, //中心点
      size: [10, 10], //边长
      fillColor: new Paper.Color("#fff"),
      strokeColor: new Paper.Color("blue"),
      strokeWidth: 1,
      name: "topLeftRect",
    });
    const topRightRect = new Paper.Path.Rectangle({
      center: item.bounds.topRight, //中心点
      size: [10, 10], //边长
      fillColor: new Paper.Color("#fff"),
      strokeColor: new Paper.Color("blue"),
      strokeWidth: 1,
      name: "topRightRect",
    });
    const bottomLeftRect = new Paper.Path.Rectangle({
      center: item.bounds.bottomLeft, //中心点
      size: [10, 10], //边长
      fillColor: new Paper.Color("#fff"),
      strokeColor: new Paper.Color("blue"),
      strokeWidth: 1,
      name: "bottomLeftRect",
    });
    const bottomRightRect = new Paper.Path.Rectangle({
      center: item.bounds.bottomRight, //中心点
      size: [10, 10], //边长
      fillColor: new Paper.Color("#fff"),
      strokeColor: new Paper.Color("blue"),
      strokeWidth: 1,
      name: "bottomRightRect",
    });
    const topCenterRect = new Paper.Path.Rectangle({
      center: item.bounds.topCenter, //中心点
      size: [10, 10], //边长
      fillColor: new Paper.Color("#fff"),
      strokeColor: new Paper.Color("blue"),
      strokeWidth: 1,
      name: "topCenterRect",
    });
    const leftCenterRect = new Paper.Path.Rectangle({
      center: item.bounds.leftCenter, //中心点
      size: [10, 10], //边长
      fillColor: new Paper.Color("#fff"),
      strokeColor: new Paper.Color("blue"),
      strokeWidth: 1,
      name: "leftCenterRect",
    });
    const rightCenterRect = new Paper.Path.Rectangle({
      center: item.bounds.rightCenter, //中心点
      size: [10, 10], //边长
      fillColor: new Paper.Color("#fff"),
      strokeColor: new Paper.Color("blue"),
      strokeWidth: 1,
      name: "rightCenterRect",
    });
    const bottomCenterRect = new Paper.Path.Rectangle({
      center: item.bounds.bottomCenter, //中心点
      size: [10, 10], //边长
      fillColor: new Paper.Color("#fff"),
      strokeColor: new Paper.Color("blue"),
      strokeWidth: 1,
      name: "bottomCenterRect",
    });
    // 将矩形和四个角添加到组中
    const g1 = new Paper.Group([
      rect,
      topLeftRect,
      topRightRect,
      bottomLeftRect,
      bottomRightRect,
      topCenterRect,
      leftCenterRect,
      rightCenterRect,
      bottomCenterRect,
    ]);
    // 将选择框和当前元素添加到组中，目的是统一选择框和当前元素的拖拽缩放等
    const g2 = new Paper.Group([item, g1]);
    // 配置了drag才开启
    if (config.itemHandle?.includes("drag")) {
      g2.onMouseDrag = (e: paper.MouseEvent) => {
        e.stopPropagation();
        g2.position.set(
          item.position.x + e.delta.x,
          item.position.y + e.delta.y
        );
      };
    }
    topLeftRect.onMouseDrag = (e: paper.MouseEvent) => {
      e.stopPropagation();
      if (
        item.bounds.size.height - e.delta.y <= 20 ||
        item.bounds.size.width - e.delta.x <= 20
      ) {
        return;
      }
      item.bounds.center.y += e.delta.y;
      item.bounds.center.x += e.delta.x;
      item.bounds.size.height -= e.delta.y;
      item.bounds.size.width -= e.delta.x;

      rect.bounds.center.y += e.delta.y;
      rect.bounds.center.x += e.delta.x;
      rect.bounds.size.height -= e.delta.y;
      rect.bounds.size.width -= e.delta.x;

      // 左上 xy
      topLeftRect.bounds.x += e.delta.x;
      topLeftRect.bounds.y += e.delta.y;
      // 右上 y
      topRightRect.bounds.y += e.delta.y;
      // 左下 x
      bottomLeftRect.bounds.x += e.delta.x;
      // 上中 xy
      topCenterRect.bounds.y += e.delta.y;
      topCenterRect.bounds.x += e.delta.x / 2;
      // 左中 xy
      leftCenterRect.bounds.y += e.delta.y / 2;
      leftCenterRect.bounds.x += e.delta.x;
      // 右中 y
      rightCenterRect.bounds.y += e.delta.y / 2;
      // 下中 x
      bottomCenterRect.bounds.x += e.delta.x / 2;
    };
    topRightRect.onMouseDrag = (e: paper.MouseEvent) => {
      e.stopPropagation();
      if (
        item.bounds.size.height - e.delta.y <= 20 ||
        item.bounds.size.width + e.delta.x <= 20
      ) {
        return;
      }
      item.bounds.center.y += e.delta.y;
      item.bounds.size.height -= e.delta.y;
      item.bounds.size.width += e.delta.x;

      rect.bounds.center.y += e.delta.y;
      rect.bounds.size.height -= e.delta.y;
      rect.bounds.size.width += e.delta.x;

      // 右上 xy
      topRightRect.bounds.x += e.delta.x;
      topRightRect.bounds.y += e.delta.y;
      // 左上 y
      topLeftRect.bounds.y += e.delta.y;
      // 右下 x
      bottomRightRect.bounds.x += e.delta.x;
      // 上中 xy
      topCenterRect.bounds.y += e.delta.y;
      topCenterRect.bounds.x += e.delta.x / 2;
      // 左中 y
      leftCenterRect.bounds.y += e.delta.y / 2;
      // 右中 xy
      rightCenterRect.bounds.y += e.delta.y / 2;
      rightCenterRect.bounds.x += e.delta.x;
      // 下中 x
      bottomCenterRect.bounds.x += e.delta.x / 2;
    };
    bottomLeftRect.onMouseDrag = (e: paper.MouseEvent) => {
      e.stopPropagation();
      if (
        item.bounds.size.height + e.delta.y <= 20 ||
        item.bounds.size.width - e.delta.x <= 20
      ) {
        return;
      }
      item.bounds.center.x += e.delta.x;
      item.bounds.size.height += e.delta.y;
      item.bounds.size.width -= e.delta.x;

      rect.bounds.center.x += e.delta.x;
      rect.bounds.size.height += e.delta.y;
      rect.bounds.size.width -= e.delta.x;

      // 左下 xy
      bottomLeftRect.bounds.x += e.delta.x;
      bottomLeftRect.bounds.y += e.delta.y;
      // 坐上 x
      topLeftRect.bounds.x += e.delta.x;
      // 右下 y
      bottomRightRect.bounds.y += e.delta.y;
      // 上中 x
      topCenterRect.bounds.x += e.delta.x / 2;
      // 左中 xy
      leftCenterRect.bounds.y += e.delta.y / 2;
      leftCenterRect.bounds.x += e.delta.x;
      // 右中 y
      rightCenterRect.bounds.y += e.delta.y / 2;
      // 下中 xy
      bottomCenterRect.bounds.y += e.delta.y;
      bottomCenterRect.bounds.x += e.delta.x / 2;
    };
    bottomRightRect.onMouseDrag = (e: paper.MouseEvent) => {
      e.stopPropagation();
      if (
        item.bounds.size.height + e.delta.y <= 20 ||
        item.bounds.size.width + e.delta.x <= 20
      ) {
        return;
      }
      item.bounds.size.height += e.delta.y;
      item.bounds.size.width += e.delta.x;

      rect.bounds.size.height += e.delta.y;
      rect.bounds.size.width += e.delta.x;

      // 右下
      bottomRightRect.bounds.x += e.delta.x;
      bottomRightRect.bounds.y += e.delta.y;
      // 右上 x
      topRightRect.bounds.x += e.delta.x;
      // 左下 y
      bottomLeftRect.bounds.y += e.delta.y;
      // 上中 x
      topCenterRect.bounds.x += e.delta.x / 2;
      // 左中 y
      leftCenterRect.bounds.y += e.delta.y / 2;
      // 右中 xy
      rightCenterRect.bounds.y += e.delta.y / 2;
      rightCenterRect.bounds.x += e.delta.x;
      // 下中 xy
      bottomCenterRect.bounds.y += e.delta.y;
      bottomCenterRect.bounds.x += e.delta.x / 2;
    };
    topCenterRect.onMouseDrag = (e: paper.MouseEvent) => {
      e.stopPropagation();
      if (item.bounds.size.height - e.delta.y <= 20) {
        return;
      }
      item.bounds.center.y += e.delta.y;
      item.bounds.size.height -= e.delta.y;

      rect.bounds.center.y += e.delta.y;
      rect.bounds.size.height -= e.delta.y;

      // 左上 y
      topLeftRect.bounds.y += e.delta.y;
      // 右上 y
      topRightRect.bounds.y += e.delta.y;
      // 上中 y
      topCenterRect.bounds.y += e.delta.y;
      // 左中 y
      leftCenterRect.bounds.y += e.delta.y / 2;
      // 右中 y
      rightCenterRect.bounds.y += e.delta.y / 2;
    };
    leftCenterRect.onMouseDrag = (e: paper.MouseEvent) => {
      e.stopPropagation();
      if (item.bounds.size.width - e.delta.x <= 20) {
        return;
      }
      item.bounds.center.x += e.delta.x;
      item.bounds.size.width -= e.delta.x;

      rect.bounds.center.x += e.delta.x;
      rect.bounds.size.width -= e.delta.x;

      // 左上 x
      topLeftRect.bounds.x += e.delta.x;
      // 左下 x
      bottomLeftRect.bounds.x += e.delta.x;
      // 左中 x
      leftCenterRect.bounds.x += e.delta.x;
      // 上中 x
      topCenterRect.bounds.x += e.delta.x / 2;
      // 下中 x
      bottomCenterRect.bounds.x += e.delta.x / 2;
    };
    bottomCenterRect.onMouseDrag = (e: paper.MouseEvent) => {
      e.stopPropagation();
      if (item.bounds.size.height + e.delta.y <= 20) {
        return;
      }
      item.bounds.size.height += e.delta.y;

      rect.bounds.size.height += e.delta.y;

      // 左下 y
      bottomLeftRect.bounds.y += e.delta.y;
      // 右下 y
      bottomRightRect.bounds.y += e.delta.y;
      // 下中 y
      bottomCenterRect.bounds.y += e.delta.y;
      // 左中 y
      leftCenterRect.bounds.y += e.delta.y / 2;
      // 右中 y
      rightCenterRect.bounds.y += e.delta.y / 2;
    };
    rightCenterRect.onMouseDrag = (e: paper.MouseEvent) => {
      e.stopPropagation();
      if (item.bounds.size.width + e.delta.x <= 20) {
        return;
      }
      item.bounds.size.width += e.delta.x;

      rect.bounds.size.width += e.delta.x;

      // 右上 x
      topRightRect.bounds.x += e.delta.x;
      // 右下 x
      bottomRightRect.bounds.x += e.delta.x;
      // 右中 x
      rightCenterRect.bounds.x += e.delta.x;
      // 上中 x
      topCenterRect.bounds.x += e.delta.x / 2;
      // 下中 x
      bottomCenterRect.bounds.x += e.delta.x / 2;
    };
    [
      topLeftRect,
      topRightRect,
      bottomLeftRect,
      bottomRightRect,
      topCenterRect,
      leftCenterRect,
      rightCenterRect,
      bottomCenterRect,
    ].forEach((item) => {
      item.onMouseLeave = (e: paper.MouseEvent) => {
        e.stopPropagation();
        cursor.value = "default";
      };
      item.onMouseEnter = (e: paper.MouseEvent) => {
        e.stopPropagation();
        switch (e.target.name) {
          case "topLeftRect":
            cursor.value = "nw-resize";
            break;
          case "topRightRect":
            cursor.value = "ne-resize";
            break;
          case "bottomLeftRect":
            cursor.value = "sw-resize";
            break;
          case "bottomRightRect":
            cursor.value = "se-resize";
            break;
          case "topCenterRect":
            cursor.value = "n-resize";
            break;
          case "leftCenterRect":
            cursor.value = "w-resize";
            break;
          case "rightCenterRect":
            cursor.value = "e-resize";
            break;
          case "bottomCenterRect":
            cursor.value = "s-resize";
            break;
        }
      };
    });

    return [g1, g2, item];
  };

  const registerMouseEvent = () => {
    const children = paperInstance.value.project.activeLayer.children;
    // 单个item的事件
    children?.forEach((item: any) => {
      // 每个item添加按下鼠标事件
      item.onMouseDown = (event: paper.MouseEvent) => {
        // 处理点击单个选中
        if (config.itemHandle?.includes("select")) {
          if (map.has(event.target)) {
            // 点击相同item，移除之前的，新添加一个
            selectionGroup.value = map.get(event.target);
            selectionGroup.value![0].remove();
            map.delete(event.target);
            selectionGroup.value = addSelect(new Paper.Group(event.target));
          } else {
            if (selectionGroup.value) {
              // 获取选中组
              const current = selectionGroup.value[1].getItems({
                match: (item: paper.Item) => {
                  if (item === event.target) {
                    return item;
                  }
                },
              });
              // 没有组 添加单个item的选中
              if (!current.length) {
                selectionGroup.value = addSelect(new Paper.Group(event.target));
                map.set(event.target, selectionGroup.value);
              }
            } else {
              selectionGroup.value = addSelect(new Paper.Group(event.target));
            }
          }
          paperInstance.value.project.activeLayer.addChild(
            selectionGroup.value![1]
          ); //提高层级

          // // 下载
          // const download = paperInstance.value.project.getItem({
          //   name: "download",
          // });
          // if (download!.name === event.target.name) {
          //   screenShot();
          // }
        } else if (
          config.itemHandle === "drag" ||
          (config.itemHandle && config.itemHandle[0] === "drag")
        ) {
          paperInstance.value.project.activeLayer.addChild(event.target);
        }
      };
      // 每个item添加鼠标拖动事件
      item.onMouseDrag = (event: paper.MouseEvent | any) => {
        // 只有拖拽 单独开启
        if (
          config.itemHandle === "drag" ||
          (config.itemHandle && config.itemHandle[0] === "drag")
        ) {
          item.position.set(
            item.position.x + event.delta.x,
            item.position.y + event.delta.y
          );
        }
        let tootipsEl = document.querySelector(".tootips") as HTMLElement;
        if (!tootipsEl) {
          tootipsEl = document.createElement("div");
          document.body.appendChild(tootipsEl);
          tootipsEl.innerHTML =
            typeof config.tooltips === "string"
              ? config.tooltips
              : config.tooltips();
          tootipsEl.className = "tootips";
          tootipsEl.style.position = "absolute";
          tootipsEl.style.left = event.event.offsetX + 10 + "px";
          tootipsEl.style.top = event.event.offsetY + 10 + "px";
          tootipsEl.style.color = "#999";
        } else {
          tootipsEl.style.display = "block";
          tootipsEl.style.left = event.event.offsetX + 10 + "px";
          tootipsEl.style.top = event.event.offsetY + 10 + "px";
        }
      };
      item.onMouseEnter = (e: paper.MouseEvent) => {
        cursor.value = "pointer";
      };
      item.onMouseLeave = () => {
        cursor.value = "defatul";
        let tootipsEl = document.querySelector(".tootips") as HTMLElement;
        tootipsEl.style.display = "none";
      };
      item.onMouseMove = (event: paper.MouseEvent | any) => {
        let tootipsEl = document.querySelector(".tootips") as HTMLElement;
        if (!tootipsEl) {
          tootipsEl = document.createElement("div");
          document.body.appendChild(tootipsEl);
          tootipsEl.innerHTML =
            typeof config.tooltips === "string"
              ? config.tooltips
              : config.tooltips();
          tootipsEl.className = "tootips";
          tootipsEl.style.position = "absolute";
          tootipsEl.style.left = event.event.offsetX + 10 + "px";
          tootipsEl.style.top = event.event.offsetY + 10 + "px";
          tootipsEl.style.color = "#999";
        } else {
          tootipsEl.style.display = "block";
          tootipsEl.style.left = event.event.offsetX + 10 + "px";
          tootipsEl.style.top = event.event.offsetY + 10 + "px";
        }
      };
    });
  };

  // const screenShot = () => {
  //   // 获取svg元素，将整个canvas导出为svg
  //   const flash = paperInstance.value.project.exportSVG();
  //   // 将SVG元素转换为字符串
  //   var serializer = new XMLSerializer();
  //   var xmlString = serializer.serializeToString(flash as SVGAElement);
  //   // 创建一个Blob对象
  //   var blob = new Blob([xmlString], { type: "image/svg+xml;charset=utf-8" });
  //   // 创建一个指向该Blob的URL
  //   var url = URL.createObjectURL(blob);
  //   // 创建一个a标签
  //   var a = document.createElement("a");
  //   a.href = url;
  //   a.download = "my-svg-file.svg";
  //   // 将a标签添加到文档中，触发点击事件，然后将其从文档中删除
  //   document.body.appendChild(a);
  //   a.click();
  //   document.body.removeChild(a);
  // };

  onMounted(() => {
    paperInstance.value.setup(canvasEl.value!);
    canvasEl.value?.addEventListener("wheel", mouseWheel);
    nextTick(() => {
      canvasHandleFn();
      registerMouseEvent();
    });
  });

  onUnmounted(() => {
    paperInstance.value.project.clear();
    canvasEl.value?.removeEventListener("wheel", mouseWheel);
  });

  return {
    paperInstance,
    canvasEl,
    zoom,
    cursor,
    selectionGroup,
    addSelect,
    registerMouseEvent,
  };
};
小阮的学习笔记
关注
Paper.js入门：项目和项目
代码教主
06-12 2884
您可能没有听说过Paper.js 。 因此，让我们从问题开始：什么是Paper.js？ 它是允许您创建和使用矢量图形的库。 官方网站将其描述为矢量图形脚本的瑞士军刀。 尽管图书馆提供了很多东西，但是即使您从未听说过它，也很容易学习。 在本教程中，我将从库的基本知识开始，然后再转到复杂的主题。 使用PaperScript 有两种使用库的方法。 您可以使用PaperScript，它是Jav...
Paper.js
炯炯侠
11-03 138
http://paperjs.org
图形编辑器基于Paper.js教程13：基于 Paper.js 的自动重置圆形运动程序，按钮控制运动，按键控制运动，websocket控制运动
最新发布
知无涯
08-06 1万+
本案例代码不仅展示了如何使用 Paper.js 实现基本的图形动画和用户交互，还演示了如何通过网络接口扩展控制功能。通过结合这些技术，开发者可以创建丰富而动态的 Web 应用，提升用户体验和应用的互动性。
paper-vueify：paper.js的vue改编
02-15
纸化 介绍 Paper.js是用于创建复杂的画布形状和动画的非常有用的工具。 但是将paper.js用于数据可视化之类的任务并不是很方便，并且可能会产生许多冗余代码行。 另一方面， Vue是数据驱动的框架，对数据相关的操作极为友好。 通过将这两个强大的工具结合在一起，可以实现非常好的数据可视化和轻量级数据驱动的动画编辑工作流程。 这就是paper-vueify的目的。 paper-vueify已更新为paper.js的新正式版本。 安装 建议在项目中安装和维护纸质验证的方法是通过Node.js Pacakge Manager（NPM），只需在项目文件夹中键入npm命令即可： npm install --save paper-vueify 与V1.1.5开始，纸vueify的同步与paper.js v0.12.1的最新官方声明，由于存在@类型/纸和官方的一个之间的一些差异，请始终使用官方
vue项目中使用paper.js实现首页canvas绘制
Pure_White520的博客
04-02 2082
由于项目的定制化，需要canvas绘制机器人及机器人轨道。 1、初始化页面 提前npm安装paper.js，并引入页面中 import paper from 'paper' <template> <div> <canvas id="myCanvas" :width="canvasW" height="canvasH" ref="myCanvas"></canvas> </div> </template> 调用方法 this.
Paper.js - Paper.js
05-21 178
Paper.js - Paper.js Paper.js - Paper.jsPaper.js is an open source vector graphics scripting framework that runs on top of the HTML5 ...
paper.js
Pure_White520的博客
04-02 2407
PaperScript代码在它自己的范围内自动执行，不受全局范围的影响，仍然可以访问所有全局浏览器对象和函数，比如文档或窗口。 默认情况下，paper .js库只将一个对象导出到全局作用域:paper对象。它包含标准库定义的所有类和对象。当使用PaperScript时，用户不需要关心这些，因为在PaperScript代码中，通过使用聪明的范围，所有的对象和函数看起来都是全局的。 PaperScript还提供了项目、视图和鼠标工具对象的自动创建，并简化了这些对象的事件处理程序的安装。 绘制一个线段 &lt
Paper.js - 一个强大的JavaScript矢量图形库
gitblog_00010的博客
03-14 1122
Paper.js - 一个强大的JavaScript矢量图形库 Paper.js是一个开源的JavaScript矢量图形库，专为Web设计师和开发人员提供易用性和灵活性。通过使用Paper.js，您可以在浏览器中创建复杂的2D图形、动画和交互式应用。 项目介绍 Paper.js的目标是让Web设计人员能够轻松地在JavaScript环境中进行图形设计。它提供了丰富的API和工具，使得开发者可以专注...
vdraw：:artist_palette:Vue＆Paper.js支持多人合作的画板工具
02-05
基于Vue.js＆Paper.js Web画板 项目设置 yarn install 编译和热重装以进行开发 yarn run serve 编译并最小化生产 yarn run build 运行测试 yarn run test 整理和修复文件 yarn run lint 自定义配置 请参阅。
Multidraw:使用 Paper.js 和 Firebased 共享绘图板
05-31
综上所述，Multidraw项目展示了JavaScript库如Paper.js和Firebase在构建实时协作应用中的强大功能，同时也涉及到前端开发、实时通信、数据管理和用户体验等多个方面的技术知识。通过这个项目，开发者可以学习到如何...
Paper.js入门：动画和图像
代码教主
06-14 1124
到目前为止，在本系列中，我已经介绍了Paper.js中的项目和项 ， 路径和几何以及用户交互 。 该库还允许您为项目中的各种项目设置动画。 如果将其与基于用户输入的操作能力结合起来，则可以创建一些非常酷的效果。 本教程将介绍如何为Paper.js中的项目设置动画。 本教程后面的部分还将介绍图像处理以及如何处理单个像素的颜色。 该库还使您可以从矢量创建栅格，最后将进行介绍。 动画基础 P...
JavaScript插件paper.js和样例
11-29
Paper.js是一个在HTML5 Canvas之上运行的开源矢量图形脚本框架。它提供了一个干净的场景图/文档对象模型和许多强大的功能来创建和使用矢量图形和贝塞尔曲线，所有这些都巧妙地包含在一个设计良好，一致和干净的编程界面中。
paper.js：矢量图形脚本编制的瑞士军刀–使用HTML5 Canvas将Scriptographer移植到JavaScript和浏览器。 由@lehni和@puckey创建
02-15
Paper.js-矢量图形脚本的瑞士军刀 如果要使用Paper.js，只需从下载最新的“稳定”版本。 网站： ： 问题： ： 讨论论坛： ： 主线源代码： : 推特： 最新版本： ： 预先构建的开发版本： 和分支。 安装Paper.js 在项目中作为依赖项安装和维护Paper.js的推荐方法是通过针对浏览器，Node.js或Electron的 。 如果已经安装了NPM，只需在项目文件夹中键入以下命令之一： npm install paper 执行后，您将在项目的node_modules文件夹中找到一个paper文件夹。 有关如何安装Node.js和NPM的更多信息，请阅读“ ”一章。 使用哪个版本 各种发行版都带有Paper.js的两个不同的预构建版本，分别为精简版和普通版： paper-full.js –浏览器的完整版本，包括PaperScript支
paper-select-tool:基于Paper.js的选择工具
05-02
选纸工具 基于的选择工具。 将基于Paper.js的工具添加到画布。 当前，套索，矩形和圆形选择工具已实现。 安装 纸张选择工具库在npm上可用。 npm i @jmatt/paper-select-tool 用法 要使用它，请导入它并使用选择工具之一​​。 import * as pst from 'paper-select-tool' ; var core = document . getElementById ( 'core' ) , settings ; window . onload = function ( ) { settings = Settings ( ) ; pst . lasso ( settings , core ) ; } // ... var things = [ { point : new paper . Point ( 100 , 1
在vue项目中使用pdf.js渲染base64编码的pdf（假装屏蔽打印和下载）
weixin_43369521的博客
10-09 5951
在vue项目中使用pdf.js渲染base64编码的pdf（稍微屏蔽打印和下载）重点最后 先说一下业务场景吧，项目要求查看的pdf只能在网页上查看，不能下载或者打印，开始直接使用pdf的格式预览，然后网上找的一些前端代码屏蔽下载和打印等功能（找度娘，很多），但并不能阻止有心的用户找到源文件。所以考虑使用base64的方式，避免用户简单的找到源文件。 首先，下载pdf.js,下载下来之后，直接解压放...
图形编辑器基于Paper.js教程04： Paper.js中的基础知识
知无涯
06-26 7542
paper.js 提供了两种编写方式，一种是纯粹的JavaScript编写，还有一种是使用官方提供的PaperScript。两者能实现同样的效果，但zoom是依据最原始的缩放比例，scale是依据当前的缩放比例。如果你先缩放0.5。区别就是在于，调用paper下的字对象是否需要加paper，以及向量的加减乘除。了解paper.js的基础知识，在往后的开发过程中会让你如履平地。导入svg有一些问题，特别是高精度的，小尺寸的复杂svg。说一下不擅长的东西，2d渲染，位图的处理有限。向量的除法，缩小向量的距离。
vue 学习笔记
paper_crane的博客
10-18 416
vue生命周期 1. beforeCreate 实例化之前。在此阶段是没办法调用methods里面的方法。 2. created 3. beforeMounted 4. mounted 5. beforeUpdate 6. updated 7. beforeDestroy 8. destroyed beforeRouteEnter 这个状态是路由进入之前
Vue Paper Dashboard：一款创新且高效的前端开发框架
gitblog_00076的博客
03-24 436
Vue Paper Dashboard：一款创新且高效的前端开发框架 vue-paper-dashboardCreative Tim Paper Dashboard made for Vue项目地址:https://gitcode.com/gh_mirrors/vu/vue-paper-dashboard Vue Paper Dashboard是一款基于Vue.js和Paper UI设计的管理面...
Paper.js入门：路径和几何
代码教主
06-13 879
在之前的教程中 ，我介绍了Paper.js中的安装过程和项目层次结构。 这次，我将教您有关路径，线段及其操作的知识。 这将使您能够使用库创建复杂的形状。 之后，我想介绍Paper.js所基于的一些基本几何原理。 使用路径 Paper.js中的路径由一系列由曲线连接的线段表示。 线段基本上是一个point及其两个控point ，它们定义了曲线的位置和方向。 不定义线段手柄将导致直线而不是曲线...
vue中使用mammoth.js后样式错乱
08-31
在Vue中使用mammoth.js转换Word文档时，可能会出现样式错乱的问题。这是因为Word文档的样式和Vue的样式系统之间存在差异。 要解决这个问题，你可以尝试以下方法： 1. 使用内联样式：在Vue模板中，使用`style`属性...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值