数学

闫增涛

2024-10-25 d6cc07d3e9c19a4f97f770581bc85ee3550a22ba

 src/components/paint/index.vue

@@ -13,8 +13,7 @@
        </button>
        <button @click="saveImgData">保存</button>
      </li>
      <li>
      </li>
      <li></li>
      <li>
        <label>画笔：</label>
        <select name="" id="" @change="changeBrush" v-model="brush">
@@ -121,10 +120,10 @@
      type: Number,
      default: 1,
    },
    canvasHeight:{
      type:Number,
      default:380
    }
    canvasHeight: {
      type: Number,
      default: 380,
    },
  },
  mounted() {
    this.init();
@@ -132,14 +131,17 @@
  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() {
@@ -147,7 +149,10 @@
        // 画笔样式
        this.vLinePatternBrush = new fabric.PatternBrush(this.canvas);
        this.vLinePatternBrush.getPatternSrc = () => {
          let patternCanvas = fabric.document.createElement("canvas");
          let patternCanvas =
            fabric[this.container ? this.container : document].createElement(
              "canvas"
            );
          patternCanvas.width = patternCanvas.height = 10;
          let ctx = patternCanvas.getContext("2d");
          ctx.strokeStyle = this.lineColor;
@@ -161,7 +166,10 @@
        };
        this.hLinePatternBrush = new fabric.PatternBrush(this.canvas);
        this.hLinePatternBrush.getPatternSrc = function () {
          let patternCanvas = fabric.document.createElement("canvas");
          let patternCanvas =
            fabric[this.container ? this.container : document].createElement(
              "canvas"
            );
          patternCanvas.width = patternCanvas.height = 10;
          let ctx = patternCanvas.getContext("2d");
          ctx.strokeStyle = this.lineColor;
@@ -177,7 +185,10 @@
        this.squarePatternBrush.getPatternSrc = function () {
          const squareWidth = 10;
          const squareDistance = 2;
          const patternCanvas = fabric.document.createElement("canvas");
          const patternCanvas =
            fabric[this.container ? this.container : document].createElement(
              "canvas"
            );
          patternCanvas.width = patternCanvas.height =
            squareWidth + squareDistance;
          const ctx = patternCanvas.getContext("2d");
@@ -189,7 +200,10 @@
        this.diamondPatternBrush.getPatternSrc = function () {
          const squareWidth = 10;
          const squareDistance = 5;
          const patternCanvas = fabric.document.createElement("canvas");
          const patternCanvas =
            fabric[this.container ? this.container : document].createElement(
              "canvas"
            );
          const rect = new fabric.Rect({
            width: squareWidth,
            height: squareWidth,
@@ -257,7 +271,7 @@
    // 清空画布
    clearCanvas() {
      this.canvas.clear();
      this.setBackgroundImage()
      this.setBackgroundImage();
    },
    // 修改画笔颜色
    changeLineColor(e) {
@@ -367,15 +381,15 @@
}
.paint-btn {
  width: 96%;
  margin-top:40px;
  padding:20px;
  border:1px solid #ededed;
  margin-top: 40px;
  padding: 20px;
  border: 1px solid #ededed;
  li {
    margin-bottom:6px;
    margin-bottom: 6px;
  }
}
.paint-btn-box {
  display:flex;
  justify-content:space-evenly;
  display: flex;
  justify-content: space-evenly;
}
</style>