uniapp canvas 获取缩放比并缩放

要获取当前 canvas 的缩放比，可以使用 `wx.getSystemInfo` 获取屏幕宽度和 canvas 宽度，然后用屏幕宽度除以 canvas 宽度即可得到缩放比。具体代码如下：

// 获取系统信息
const sysInfo = wx.getSystemInfoSync();
// 获取屏幕宽度和 canvas 宽度
const screenWidth = sysInfo.screenWidth;
const canvasWidth = canvas.width;
// 计算缩放比
const scale = screenWidth / canvasWidth;
// 缩放 canvas
context.scale(scale, scale);

注意，如果想要保持 canvas 的宽高比不变，需要同时缩放横向和纵向。如果只缩放横向或纵向，会导致图片变形。

相关问题

uniapp canvas 手势缩放

在uniapp中使用canvas实现手势缩放可以通过以下步骤实现：

1. 在canvas的绘制方法中获取手势事件的信息，包括手势类型、起始点、移动距离等信息。

2. 在手势的处理方法中计算缩放比例，并根据缩放比例对canvas进行缩放。

下面是一个简单的示例代码：

<template>
  <canvas
    @touchstart="touchStart"
    @touchmove="touchMove"
    @touchend="touchEnd"
    style="width: 100%; height: 100%;"
  ></canvas>
</template>

<script>
export default {
  methods: {
    touchStart(event) {
      if (event.touches.length === 2) {
        // 计算两个手指之间的距离
        this.distance = Math.sqrt(
          (event.touches[0].clientX - event.touches[1].clientX) ** 2 +
            (event.touches[0].clientY - event.touches[1].clientY) ** 2
        );
      }
    },

    touchMove(event) {
      if (event.touches.length === 2) {
        // 计算当前两个手指之间的距离
        const currentDistance = Math.sqrt(
          (event.touches[0].clientX - event.touches[1].clientX) ** 2 +
            (event.touches[0].clientY - event.touches[1].clientY) ** 2
        );
        // 计算缩放比例
        const scale = currentDistance / this.distance;
        // 更新缩放比例
        this.scale *= scale;
        // 更新起始点
        this.startX = (this.startX + event.touches[0].clientX) / 2;
        this.startY = (this.startY + event.touches[0].clientY) / 2;
        // 重新绘制canvas
        this.draw();
      }
    },

    touchEnd() {
      // 清空手势信息
      this.distance = 0;
    },

    draw() {
      // 获取canvas对象
      const ctx = uni.createCanvasContext("myCanvas", this);
      // 缩放canvas
      ctx.scale(this.scale, this.scale);
      // 绘制图形
      ctx.fillRect(this.startX, this.startY, 100, 100);
      // 显示canvas
      ctx.draw();
    },
  },

  data() {
    return {
      startX: 0, // 起始点的x坐标
      startY: 0, // 起始点的y坐标
      scale: 1, // 缩放比例
      distance: 0, // 两个手指之间的距离
    };
  },

  mounted() {
    // 绘制canvas
    this.draw();
  },
};
</script>

在上面的示例代码中，我们使用了uniapp提供的canvas API，通过scale方法实现缩放。在touchMove方法中，根据当前两个手指之间的距离计算缩放比例，并更新缩放比例和起始点的坐标。最后，在draw方法中调用scale方法对canvas进行缩放，然后绘制图形并显示canvas。

uniapp canvas 缩放

### UniApp 中 Canvas 缩放功能实现

在 UniApp 中实现 Canvas 的缩放功能可以通过监听触摸事件来完成。具体来说，通过捕捉用户的双指捏合手势来进行缩放操作。下面是一个完整的示例代码展示如何在一个简单的页面中集成此特性。

#### HTML 部分

<template>
  <view class="container">
    <!-- 使用 canvas 组件 -->
    <canvas type="2d" id="myCanvas" style="width:100%; height:100%;" @touchstart="handleTouchStart"
      @touchmove="handleTouchMove" @touchend="handleTouchEnd"></canvas>
  </view>
</template>

#### JavaScript (Vue) 部分

<script>
export default {
  data() {
    return {
      scale: 1, // 初始缩放比例
      startX: 0,
      startY: 0,
      lastDistance: null,
      ctx: null
    };
  },
  mounted() {
    const query = uni.createSelectorQuery().in(this);
    query.select('#myCanvas').fields({ node: true, size: true }).exec((res) => {
      this.ctx = res[0].getContext('2d');
      this.draw();
    });
  },
  methods: {
    draw() {
      if (!this.ctx) return;
      
      // 清除画布
      this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);

      // 设置变换矩阵进行缩放和平移
      this.ctx.save();
      this.ctx.translate(this.startX * (this.scale - 1), this.startY * (this.scale - 1));
      this.ctx.scale(this.scale, this.scale);

      // 进行绘图逻辑...
      this.ctx.fillStyle = 'blue';
      this.ctx.fillRect(50 / this.scale, 50 / this.scale, 200 / this.scale, 200 / this.scale); 

      this.ctx.restore();
    },

    handleTouchStart(e) {
      if (e.touches.length === 2) { // 只有当有两个触点时才处理缩放
        let touch1 = e.touches[0];
        let touch2 = e.touches[1];

        this.lastDistance = Math.sqrt(
          Math.pow(touch2.clientX - touch1.clientX, 2) +
          Math.pow(touch2.clientY - touch1.clientY, 2)
        );
        
        this.startX = (touch1.clientX + touch2.clientX) / 2;
        this.startY = (touch1.clientY + touch2.clientY) / 2;
      }
    },

    handleTouchMove(e) {
      if (e.touches.length !== 2 || !this.lastDistance) return;

      let touch1 = e.touches[0];
      let touch2 = e.touches[1];

      let currentDistance = Math.sqrt(
        Math.pow(touch2.clientX - touch1.clientX, 2) +
        Math.pow(touch2.clientY - touch1.clientY, 2)
      );

      this.scale *= currentDistance / this.lastDistance; // 更新缩放因子
      
      this.lastDistance = currentDistance;
      this.$nextTick(() => {
        this.draw(); // 重新绘制以反映新的缩放状态
      });
    },

    handleTouchEnd() {
      this.lastDistance = null; // 结束后重置距离变量
    }
  }
};
</script>

上述代码展示了如何利用 `touchstart`, `touchmove` 和 `touchend` 三个事件处理器来检测用户的手势动作，并据此调整 Canvas 上显示的内容大小[^1]。此外，为了使项目更易于维护和发展，可以考虑引入 Fabric.js 库作为辅助工具，它能够简化许多复杂的图形操作过程[^2]。