uniapp前端画矩形

可以使用canvas来绘制矩形，uniapp也支持canvas的使用。

示例代码：

<template>
  <view>
    <canvas canvas-id="myCanvas" style="width:100%;height:300rpx;"></canvas>
  </view>
</template>

<script>
export default {
  onReady() {
    const ctx = uni.createCanvasContext('myCanvas', this);
    ctx.setStrokeStyle('#000000');
    ctx.strokeRect(20, 20, 100, 100);
    ctx.draw();
  }
}
</script>

在onReady钩子函数中，使用uni.createCanvasContext方法创建canvas上下文，然后使用ctx.strokeRect方法绘制矩形。参数分别是左上角坐标x、y，矩形宽度和高度。最后使用ctx.draw方法将绘制结果显示在canvas上。

相关问题

uniapp前端自封装的优惠卷样式组件

UniApp是一款基于Vue.js的跨平台应用开发框架，它支持快速构建一次编写、多端运行的应用。关于自封装的优惠券样式组件，你可以创建一个模块化的UI组件，主要包括以下几个部分：

1. **结构设计**：通常包含基础元素如矩形背景、可点击区域、优惠券面额、过期日期等。可以使用`<view>`、`<image>`等基本标签。

<template>
  <view class="coupon">
    <image src="券面背景图" :class="{ 'coupon-bg': isBgImage }"></image>
    <view class="coupon-content">
      <text v-if="title">{{ title }}</text>
      <text class="amount">{{ amount }}</text>
      <text class="expiration" v-if="expirationDate">{{ expirationDate }}</text>
    </view>
    <button @click="redeemCoupon">立即使用</button>
  </view>
</template>

2. **样式定制**：通过CSS或者全局样式文件定义组件的样式，比如颜色、字体、布局等。

.coupon {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10rpx;
}

_coupon-bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

3. **状态管理**：通过props传入券的信息（如面额、过期时间），通过事件（如`@click`）触发操作，如领取或查看详细信息。

4. **功能扩展**：可能添加一些额外的功能，如判断是否已过期、限制每日领券次数等。

uniapp获取胶囊高度和状态栏高度

### 获取 UniApp 中胶囊按钮和状态栏的高度

在 UniApp 开发过程中，为了实现更灵活的页面布局设计，了解并获取设备的状态栏高度以及导航胶囊（右上角菜单按钮）的位置信息是非常重要的。

对于获取 **状态栏高度** ，可以利用 `uni.getSystemInfo` 或者同步方法 `uni.getSystemInfoSync()` 来取得当前系统的状态栏高度。通过调用这些 API 接口可以直接返回包含 statusBarHeight 属性的对象，该属性即代表了状态栏的实际像素高度[^1]。

// 异步方式获取状态栏高度
uni.getSystemInfo({
    success: function (res) {
        console.log(res.statusBarHeight); // 输出状态栏高度
    }
});

// 同步方式获取状态栏高度
const systemInfo = uni.getSystemInfoSync();
console.log(systemInfo.statusBarHeight); // 输出状态栏高度

至于 **胶囊按钮的信息** （包括其宽度、高度及其相对于视窗左边缘的距离），则可以通过调用 `wx.getMenuButtonBoundingClientRect()` 方法来获得。此函数会返回一个矩形对象描述胶囊按钮的具体位置尺寸数据[^2]。

let menuButtonRect = wx.getMenuButtonBoundingClientRect();
console.log(menuButtonRect.top, menuButtonRect.left, menuButtonRect.width, menuButtonRect.height);
// 分别输出胶囊按钮距离顶部距离、左侧距离、宽度、高度

上述代码片段展示了如何分别获取状态栏高度与胶囊按钮的相关几何参数，在实际项目开发中可以根据需求进一步处理这些数值以适应不同屏幕大小下的界面适配问题[^3]。