仿写设计编辑器第五天

今天完成了图层显示和字体的样式设计

图层设置

图层一共有四种方式，向上一层，向下一层，最上层显示，最底层显示 图层列表显示：设置一个图层对象的相关数据的数组list,给canvas绑定"after:render"事件，t每次渲染画板时触发，每次触发就通过getObjects()拿到所有canvas对象push()到list中

mounted() {
    this.$nextTick(() => {
      // 当选择画布中的对象时，该对象不出现在顶层。
      this.canvas.c.preserveObjectStacking = true;
      // 渲染后拿到所有canvas对象
      this.canvas.c.on("after:render", this.getList);
    });
  },
  
  methods:{
   getList() {
      // 拿到所有canvas对象，将后图层在下的放在后面
      this.list = [...this.canvas.c.getObjects()].reverse().map((item) => {
          //通过解构赋值拿出对象的数据
        const { type, id, name, text } = item;
        return { type, id, name, text };
      });
    },
   }

点击图层列表时根据根据图层对象的id来在画板中选中

// 选中图层
    select(id) {
      let selected = this.canvas.c.getObjects().find((item) => id === item.id);
      this.canvas.c.discardActiveObject();
      this.canvas.c.setActiveObject(selected);
      this.canvas.c.requestRenderAll();
    },

点击按钮来改变图层显示，上一层：canvas.bringForward();下一层：canvas.sendBackwards();最上层：canvas.bringToFront();最底层： sendToBack();

// 向上显示一层
    up() {
      const activeObject = this.canvas.c.getActiveObject();
      activeObject && activeObject.bringForward();
      this.canvas.c.renderAll();
    },
    // 向下显示一层
    down() {
      const activeObject = this.canvas.c.getActiveObject();
      activeObject && activeObject.sendBackwards();
      this.canvas.c.renderAll();
    },
    //最上层显示
    topUp() {
      const activeObject = this.canvas.c.getActiveObject();
      activeObject && activeObject.bringToFront();
      this.canvas.c.renderAll();
    },
    // 最底层显示
    mostDown() {
      const activeObject = this.canvas.c.getActiveObject();
      activeObject && activeObject.sendToBack();
      this.canvas.c.renderAll();
    },

字体样式设置

在组件挂载时，给event绑定"selectOne"事件，触发时拿到字体的相关数据

 mounted() {
    this.$nextTick(() => {
      this.event.on("selectOne", (e) => {
        const activeObject = this.canvas.c.getActiveObject();
        if (activeObject.type === "i-text" || "text" || "textbox") {
          this.fontAttr.fontSize = activeObject.get("fontSize");
          this.fontAttr.fontFamily = activeObject.get("fontFamily");
          this.fontAttr.fontBg = activeObject.get("textBackgroundColor");
          this.fontAttr.fontWight = activeObject.get("fontWight");
          this.fontAttr.fontStyle = activeObject.get("fontStyle");
          this.fontAttr.underline = activeObject.get("underline");
          this.fontAttr.linethrought = activeObject.get("linethrough");
          this.fontAttr.overline = activeObject.get("overline");
          this.fontAttr.lineHeight = activeObject.get("lineHeight");
          this.fontAttr.charSpacing = activeObject.get("charSpacing");
          this.fontAttr.textAlign = activeObject.get("textAlign");
        }
      });
    });
  },

使用一个统一的方法拿到改变的属性名和属性值来对选中的文字对象的属性进行改变， 改变字体使用FontFaceObserver() 来加载字体

  methods: {
    // 改变选中对象的属性
    change(key, value) {
      console.log(key, value);
      const activeObject = this.canvas.c.getActiveObject();
      activeObject && activeObject.set(key, value);
      this.canvas.c.renderAll();
    },
    // 改变字体
    changeFontFamily(fontName) {
      var font = new FontFaceObserver(fontName);
      font
        .load(null, 150000)
        .then(() => {
          const activeObject = this.canvas.c.getActiveObjects()[0];
          activeObject && activeObject.set("fontFamily", fontName);
          this.canvas.c.renderAll();
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },