Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout

zhongshujie

2024-11-20 0ac4e192d2d2c28eb95e118eb381c04330b07953

 src/components/paint/index.vue

@@ -1,9 +1,9 @@
<template>
  <div class="paint">
    <canvas width="600" height="800" id="canvas"></canvas>
    <canvas id="canvas" :width="canvasWidth" :height="canvasHeight"></canvas>
    <!-- 操作按钮 -->
    <ul class="paint-btn">
      <li class="btn-box">
      <li class="paint-btn-box">
        <button @click="changeDrawMode">
          {{ isDraw ? "框选模式" : "绘图模式" }}
        </button>
@@ -13,9 +13,7 @@
        </button>
        <button @click="saveImgData">保存</button>
      </li>
      <li>

      </li>
      <li></li>
      <li>
        <label>画笔：</label>
        <select name="" id="" @change="changeBrush" v-model="brush">
@@ -57,6 +55,7 @@
export default {
  data() {
    return {
      canvasWidth: window.innerWidth > 450 ? 400 : window.innerWidth - 30,
      backgroundImgUrl: "", // 背景
      isDraw: true, // 绘画、框选模式
      brush: "Pencil", // 画笔类型
@@ -122,6 +121,10 @@
      type: Number,
      default: 1,
    },
    canvasHeight: {
      type: Number,
      default: 380,
    },
  },
  mounted() {
    this.init();
@@ -129,14 +132,16 @@
  methods: {
    // 初始化画布
    init() {
      this.canvas = new fabric.Canvas("canvas", {
        isDrawingMode: true,
      });
      this.canvas = new fabric.Canvas(
        (this.container ? this.container : document).querySelector("#canvas"),
        {
          isDrawingMode: true,
        }
      );
      // 设置背景
      this.setBackgroundImage()
      //
      this.setBackgroundImage();
      fabric.Object.prototype.transparentCorners = false;
      this.setBrush()
      this.setBrush();
    },
    // 创建各种笔刷
    setBrush() {
@@ -144,7 +149,7 @@
        // 画笔样式
        this.vLinePatternBrush = new fabric.PatternBrush(this.canvas);
        this.vLinePatternBrush.getPatternSrc = () => {
          let patternCanvas = fabric.document.createElement("canvas");
          let patternCanvas = document.createElement("canvas");
          patternCanvas.width = patternCanvas.height = 10;
          let ctx = patternCanvas.getContext("2d");
          ctx.strokeStyle = this.lineColor;
@@ -158,7 +163,7 @@
        };
        this.hLinePatternBrush = new fabric.PatternBrush(this.canvas);
        this.hLinePatternBrush.getPatternSrc = function () {
          let patternCanvas = fabric.document.createElement("canvas");
          let patternCanvas = document.createElement("canvas");
          patternCanvas.width = patternCanvas.height = 10;
          let ctx = patternCanvas.getContext("2d");
          ctx.strokeStyle = this.lineColor;
@@ -174,7 +179,7 @@
        this.squarePatternBrush.getPatternSrc = function () {
          const squareWidth = 10;
          const squareDistance = 2;
          const patternCanvas = fabric.document.createElement("canvas");
          const patternCanvas = document.createElement("canvas");
          patternCanvas.width = patternCanvas.height =
            squareWidth + squareDistance;
          const ctx = patternCanvas.getContext("2d");
@@ -186,7 +191,7 @@
        this.diamondPatternBrush.getPatternSrc = function () {
          const squareWidth = 10;
          const squareDistance = 5;
          const patternCanvas = fabric.document.createElement("canvas");
          const patternCanvas = document.createElement("canvas");
          const rect = new fabric.Rect({
            width: squareWidth,
            height: squareWidth,
@@ -201,9 +206,7 @@
          rect.render(ctx);
          return patternCanvas;
        };

        const img = new Image();
        // img.src = "../assets/images/drop.jpg";
        this.texturePatternBrush = new fabric.PatternBrush(this.canvas);
        this.texturePatternBrush.source = img;
      }
@@ -214,6 +217,7 @@
      const oldData = localStorage.getItem(
        this.config.activeBook.name + "-paint-" + this.page
      );
      this.oldImg = oldData;
      this.backgroundImgUrl = oldData || this.imgUrl;
      fabric.Image.fromURL(
        this.backgroundImgUrl,
@@ -237,7 +241,7 @@
            this.canvas.renderAll.bind(this.canvas),
            {
              // 可以设置图像的样式，比如不透明度
              opacity: 0.5,
              // opacity: 0.5,
            }
          );
          // 渲染画布
@@ -256,7 +260,7 @@
    // 清空画布
    clearCanvas() {
      this.canvas.clear();
      this.setBackgroundImage()
      this.setBackgroundImage();
    },
    // 修改画笔颜色
    changeLineColor(e) {
@@ -265,11 +269,9 @@
      if (brush.getPatternSrc) {
        brush.source = brush.getPatternSrc.call(brush);
      }
      console.log(e.srcElement.value);
    },
    // 修改画笔粗细
    changeLineWidth(e) {
      console.log(e);
      this.canvas.freeDrawingBrush.width =
        parseInt(e.srcElement.value, 10) || 1;
    },
@@ -322,7 +324,6 @@
    changeShowColor(e) {
      this.canvas.contextContainer.shadowColor = e.srcElement.value;
    },

    // 阴影宽度
    changeShowWidth(e) {
      console.log(this.canvas);
@@ -336,7 +337,7 @@
      this.canvas.contextContainer.shadowOffsetY =
        parseInt(e.srcElement.value, 10) || 0;
    },
    // 保存图书
    // 保存图片
    saveImgData() {
      const imgData = this.canvas.toDataURL({
        format: "png", // 指定输出格式，通常是'png'或'jpeg'
@@ -358,20 +359,30 @@
</script>

<style lang="less" scoped>
.paint {
  position: relative;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.bcImg {
  position: absolute;
}
#canvas {
  border: 1px solid #ccc;
}
.paint-btn {
  margin-top:40px;
  padding:20px;
  border:1px solid #ededed;
  width:max-content;
  width: 96%;
  margin-top: 40px;
  padding: 20px;
  border: 1px solid #ededed;
  li {
    margin-bottom:6px;
    margin-bottom: 6px;
  }
}
.btn-box {
  display:flex;
  justify-content:space-between;
.paint-btn-box {
  display: flex;
  justify-content: space-evenly;
}
</style>