tijiao

litian

4 天以前 c8e4219b7d89dbc14d389520499f86e86f699fa5

 src/components/paint/index.vue

@@ -55,7 +55,7 @@
export default {
  data() {
    return {
      canvasWidth:400,
      canvasWidth: window.innerWidth > 450 ? 400 : window.innerWidth - 30,
      backgroundImgUrl: "", // 背景
      isDraw: true, // 绘画、框选模式
      brush: "Pencil", // 画笔类型
@@ -127,15 +127,9 @@
    },
  },
  mounted() {
    this.handleCanvasWidth()
    this.init();
  },
  methods: {
    handleCanvasWidth() {
      if(window.innerWidth < 450) {
        this.canvasWidth = window.innerWidth - 30
      }
    },
    // 初始化画布
    init() {
      this.canvas = new fabric.Canvas(
@@ -146,7 +140,6 @@
      );
      // 设置背景
      this.setBackgroundImage();
      //
      fabric.Object.prototype.transparentCorners = false;
      this.setBrush();
    },
@@ -156,10 +149,7 @@
        // 画笔样式
        this.vLinePatternBrush = new fabric.PatternBrush(this.canvas);
        this.vLinePatternBrush.getPatternSrc = () => {
          let patternCanvas =
            fabric[this.container ? this.container : document].createElement(
              "canvas"
            );
          let patternCanvas = document.createElement("canvas");
          patternCanvas.width = patternCanvas.height = 10;
          let ctx = patternCanvas.getContext("2d");
          ctx.strokeStyle = this.lineColor;
@@ -173,10 +163,7 @@
        };
        this.hLinePatternBrush = new fabric.PatternBrush(this.canvas);
        this.hLinePatternBrush.getPatternSrc = function () {
          let patternCanvas =
            fabric[this.container ? this.container : document].createElement(
              "canvas"
            );
          let patternCanvas = document.createElement("canvas");
          patternCanvas.width = patternCanvas.height = 10;
          let ctx = patternCanvas.getContext("2d");
          ctx.strokeStyle = this.lineColor;
@@ -192,10 +179,7 @@
        this.squarePatternBrush.getPatternSrc = function () {
          const squareWidth = 10;
          const squareDistance = 2;
          const patternCanvas =
            fabric[this.container ? this.container : document].createElement(
              "canvas"
            );
          const patternCanvas = document.createElement("canvas");
          patternCanvas.width = patternCanvas.height =
            squareWidth + squareDistance;
          const ctx = patternCanvas.getContext("2d");
@@ -207,10 +191,7 @@
        this.diamondPatternBrush.getPatternSrc = function () {
          const squareWidth = 10;
          const squareDistance = 5;
          const patternCanvas =
            fabric[this.container ? this.container : document].createElement(
              "canvas"
            );
          const patternCanvas = document.createElement("canvas");
          const rect = new fabric.Rect({
            width: squareWidth,
            height: squareWidth,
@@ -236,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,
@@ -378,11 +360,15 @@

<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;
}