CameraMachine/frontend/src/views/components/PictureEditor/mixin/view/index.js

//第一版是用来计算 上传图片的宽高和父容器宽高，计算后的一个canvas宽高
//后面改成了 正方形，估计算方式失效，本文件保留，
const viewMixins = {
  data() {
    return {
      view: {
        width: 500,
        height: 500,
        aspect: 1 // 宽高比  >1 横屏  ===1 正方形  小于1  竖屏
      },
      canvas: {
        width: 500,
        height: 500
      },
      viewStatus: false,
      minimap: null,
    }
  },
  props:{
    canvasStyle:{
      type:Object,
      default:()=>{
        return {
          width:0,
          height:0,
        }
      }
    },
    maxZoom:{
      type:Number,
      default:5,
    },
    minZoom:{
      type:Number,
      default:0.1,
    },
    showZoom:{
      type:Boolean,
      default:true,
    },
    isEmpty:{
      type:Boolean,
      default:false,
    },
    resize:{
      type:Boolean,
      default:true,
    },
    //x y
    proportion:{
      type:[Object,Number],
      default:()=>{
        return {}
      }
    },
    //xy
    padding:{
      type:Object,
      default:()=>{
        return {
          x:160,
          y:0
        }
      }

    }

  },
  computed: {
  },
  watch: {
    proportion(){
      this.proportionResize();
    }
  },
  created() {
  },
  activated(){
    if(this.resize) window.addEventListener('resize', this.handleResize);
  },
  deactivated() {
    if(this.resize) window.removeEventListener('resize', this.handleResize)
  },
  mounted() {
  },

  methods: {
    //自适应
    handleResize(){
      let width = this.$refs.wrap?.clientWidth - this.padding.x;
      let height = this.$refs.wrap?.clientHeight - this.padding.y
      let min = Math.max(Math.min(width,height),100)
      let width_old = this.canvas.width
      this.canvas.width = min
      this.canvas.height = min
      let scaleRatio = (min/width_old).toFixed(4)
      let objects = this.fcanvas.getObjects();

      objects.forEach(function(object) {
        // 调整对象的位置
        object.left *= scaleRatio;
        object.top *= scaleRatio;

        // 调整对象的大小
        object.scaleX *= scaleRatio;
        object.scaleY *= scaleRatio;
      });

      // 调整画布的大小
      var newWidth = this.fcanvas.getWidth() * scaleRatio;
      var newHeight = this.fcanvas.getHeight() * scaleRatio;
      this.fcanvas.setDimensions({ width: newWidth, height: newHeight });
      this.fcanvas.requestRenderAll();
    },
    async proportionResize(){
       await this.setMax()

      this.fcanvas.setDimensions({ width:   this.canvas.width , height:   this.canvas.height });
      this.fcanvas.requestRenderAll();
    },
    async viewInit() {
        // 没有传值进来 默认基准宽度为基准算最大高度
       await this.setMax()
        if(this.resize) window.addEventListener('resize', this.handleResize);
    },
    // 获取容器的宽高最大值
   async setMax() {
      if(this.canvasStyle.width && this.canvasStyle.height){
        this.view.width = this.canvasStyle.width
        this.view.height = this.canvasStyle.height
        this.canvas.width = this.canvasStyle.width
        this.canvas.height = this.canvasStyle.height
        this.viewStatus = true;
        return;
      }
      this.view.width = this.$refs.wrap?.clientWidth
      this.view.height = this.$refs.wrap?.clientHeight
      let width = this.$refs.wrap?.clientWidth - this.padding.x;
      let height = this.$refs.wrap?.clientHeight - this.padding.y;
      let min = Math.min(width,height)
      let widthn = min
      let heightn = min
      if(this.proportion?.x > 1 && this.proportion?.y > 1){
        let size = this.proportion.x/this.proportion.y
        if(size>1){
          widthn = min
          heightn = min/this.proportion.x*this.proportion.y
        }else{
          widthn = min/this.proportion.y*this.proportion.x
          heightn = min
        }
      }

      if(this.proportion === 1 && this.image){
        const image = await this.$appfun.loadingImg(this.image)
        const imgObj = this.$appfun.getImageSize({width:image.width,height:image.height,    MAXWIDTH:width,MAXHEIGHT:height})
        widthn = imgObj.width
        heightn = imgObj.height
      }
      this.canvas.width = widthn
      this.canvas.height = heightn
      this.viewStatus = true;
    },
    updateMiniMap() {
      var canvas = this.createCanvasEl();
      this.minimap.backgroundImage._element = canvas;
      this.minimap.requestRenderAll();
    },
    setZoom(type){
      //吸管模式下，不让放大缩小
      if(this.showStraw) return;
      let zoom = this.fcanvas.getZoom();
      switch (type){
        case 'in':
          zoom+=0.1
          break;
        case 'out':
          zoom-=0.1
          break;
        case 1:
          zoom=1
          break;
      }
      if (zoom > this.maxZoom) zoom = this.maxZoom;
      if (zoom < this.minZoom) zoom = this.minZoom;
      var myCenterCoordinates = fabric.util.transformPoint({
        x: parseInt(this.fcanvas.width / 2),
        y: parseInt(this.fcanvas.height / 2),
      }, fabric.util.invertTransform(this.fcanvas.viewportTransform));
      this.fcanvas.zoomToPoint(myCenterCoordinates, zoom);
      if(zoom = 1){
        this.fcanvas.viewportTransform[4] = 0
        this.fcanvas.viewportTransform[5] = 0
      }
      this.setCursor()
    },
    minimapInit(){
      var self = this
      this.fcanvas.on('mouse:wheel', function (e){

        this.zoom = (event.deltaY > 0 ? -0.1 : 0.1) + self.fcanvas.getZoom();
        this.zoom = Math.max(self.minZoom, this.zoom); //最小为原来的1/10
        this.zoom = Math.min(self.maxZoom, this.zoom); //最大是原来的10倍
        this.zoomPoint = new fabric.Point(e.pointer.x,e.pointer.y);
        self.fcanvas.zoomToPoint(this.zoomPoint, this.zoom);
        self.setCursor()
      });



      this.fcanvas.on('mouse:down', function(opt) {

        //吸管模式下，不让放大缩小
        if(self.showStraw) return;
        var evt = opt.e;
        if (evt.altKey === true || self.action === 'drag') {
          this.isDragging = true;
          this.selection = false;
          this.lastPosX = evt.clientX;
          this.lastPosY = evt.clientY;
        }
      });
      this.fcanvas.on('mouse:move', function(opt) {
        if (this.isDragging) {
          var e = opt.e;
          var vpt = this.viewportTransform;
          vpt[4] += e.clientX - this.lastPosX;
          vpt[5] += e.clientY - this.lastPosY;
          this.requestRenderAll();
          this.lastPosX = e.clientX;
          this.lastPosY = e.clientY;
        }
      });
      this.fcanvas.on('mouse:up', function(opt) {
        this.isDragging = false;
        this.selection = true;
      });

    },
    updateMiniMapVP() {
      var designSize = { width: this.canvas.width, height: this.canvas.height };
      var rect = this.minimap.getObjects()[0];
      var designRatio = fabric.util.findScaleToFit(designSize, this.fcanvas);
      var totalRatio = fabric.util.findScaleToFit(designSize, this.minimap);
      var finalRatio = designRatio / this.fcanvas.getZoom();
      rect.scaleX = finalRatio;
      rect.scaleY = finalRatio;
      rect.top = this.minimap.backgroundImage.top - this.fcanvas.viewportTransform[5] * totalRatio / this.fcanvas.getZoom();
      rect.left = this.minimap.backgroundImage.left - this.fcanvas.viewportTransform[4] * totalRatio / this.fcanvas.getZoom();
      this.minimap.requestRenderAll();
    },
    createCanvasEl() {
      var designSize = { width: this.canvas.width, height: this.canvas.height };
      var originalVPT = this.fcanvas.viewportTransform;
      // zoom to fit the design in the display canvas

      var designRatio = fabric.util.findScaleToFit(designSize, this.fcanvas);

      // zoom to fit the display the design in the minimap.
      var minimapRatio = fabric.util.findScaleToFit(this.fcanvas, this.minimap);

      var scaling = this.minimap.getRetinaScaling();

      var finalWidth =  designSize.width * designRatio;
      var finalHeight =  designSize.height * designRatio;

      this.fcanvas.viewportTransform = [
        designRatio, 0, 0, designRatio,
        (this.fcanvas.getWidth() - finalWidth) / 2,
        (this.fcanvas.getHeight() - finalHeight) / 2
      ];
      var canvas = this.fcanvas.toCanvasElement(minimapRatio * scaling);
      this.fcanvas.viewportTransform = originalVPT;
      return canvas;
    },
    initMinimap() {
      var canvas = this.createCanvasEl();
      var backgroundImage = new fabric.Image(canvas);
      backgroundImage.scaleX = 1 / this.fcanvas.getRetinaScaling();
      backgroundImage.scaleY = 1 / this.fcanvas.getRetinaScaling();
      this.minimap.centerObject(backgroundImage);
      this.minimap.backgroundColor = 'white';
      this.minimap.backgroundImage = backgroundImage;
      this.minimap.requestRenderAll();
      var minimapView = new fabric.Rect({
        top: backgroundImage.top,
        left: backgroundImage.left,
        width: backgroundImage.width / this.fcanvas.getRetinaScaling(),
        height: backgroundImage.height/ this.fcanvas.getRetinaScaling(),
        fill: 'rgba(0, 0, 255, 0.3)',
        cornerSize: 6,
        transparentCorners: false,
        cornerColor: 'blue',
        strokeWidth: 0,
      });
      minimapView.controls = {
        br: fabric.Object.prototype.controls.br,
      };
      this.minimap.add(minimapView);
    }

  }

}
export default viewMixins