uniapp 如何横屏显示图片呢？

### UniApp 实现横屏手写板功能 为了实现在 UniApp 中创建一个可以用于横向模式的手写板，下面提供了一个简单的示例代码来展示如何构建这样的组件。此代码允许用户通过触摸屏幕绘制线条，并能够保存所绘图形为图片形式。 #### 创建画布容器 首先，在页面布局文件 `index.vue` 中定义 HTML 结构： ```html <template> <view class="container"> <!-- 设置 canvas 宽高自适应 --> <canvas type="2d" id="signatureCanvas"></canvas> <button @click="clear">清除</button> <button @click="saveImage">保存图片</button> </view> </template> <style scoped> .container { display: flex; justify-content: center; align-items: center; height: 100vh; /* 占满整个视窗高度 */ } /* 配置 Canvas 的样式使其适合于全屏显示 */ #signatureCanvas { border: 1px solid black; width: 80%; max-width: 90vw; /* 控制最大宽度不超过设备宽 */ } </style> ``` #### 编写 JavaScript 功能逻辑 接着在 `<script>` 标签内编写交互逻辑，处理用户的触控事件以及图像导出操作： ```javascript <script> export default { data() { return { ctx: null, isDrawing: false, // 是否正在绘画状态 lastX: 0, lastY: 0 }; }, onLoad() { const query = uni.createSelectorQuery().in(this); query.select('#signatureCanvas').fields({ node: true }).exec((res) => { this.ctx = res[0].getContext('2d'); // 初始化画布大小适配当前窗口尺寸 this.resizeCanvas(); window.addEventListener('resize', () => {this.resizeCanvas()}); // 绑定手势监听器 let canvasElm = document.getElementById('signatureCanvas'); canvasElm.addEventListener('touchstart', (e) => this.startDraw(e)); canvasElm.addEventListener('touchmove', (e) => this.draw(e)); canvasElm.addEventListener('touchend', () => this.endDraw()); }); }, methods: { resizeCanvas() { var canvas = document.querySelector("#signatureCanvas"); if (!canvas || !this.ctx) return; // 获取父级元素的实际宽度和高度 let parentWidth = canvas.parentElement.offsetWidth; let parentHeight = canvas.offsetHeight / canvas.clientWidth * parentWidth; // 更新 Canvas 尺寸属性 canvas.width = parentWidth; canvas.height = parentHeight; // 调整上下文缩放比例保持内容不失真 this.ctx.scale(parentWidth / canvas.clientWidth, parentHeight / canvas.clientHeight); }, startDraw(event){ event.preventDefault(); this.isDrawing=true; [this.lastX,this.lastY]=getTouchPos(event.touches[0]); }, draw(event){ if(!this.isDrawing){return;} let pos=getTouchPos(event.touches[0]); this.ctx.beginPath(); this.ctx.moveTo(this.lastX, this.lastY); this.ctx.lineTo(pos.x, pos.y); this.ctx.stroke(); [this.lastX, this.lastY]=[pos.x,pos.y]; }, endDraw(){ this.isDrawing=false; }, clear(){ this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height); }, saveImage(){ try{ wx.canvasToTempFilePath({ x: 0, y: 0, width: this.ctx.canvas.width, height: this.ctx.canvas.height, destWidth: this.ctx.canvas.width*2, destHeight: this.ctx.canvas.height*2, canvasId:'signatureCanvas', success:(res)=>{ console.log(res.tempFilePath); // 图片路径可用于上传至服务器或其他用途 } }) }catch(error){ console.error("Failed to convert canvas content into image", error); } } } }; function getTouchPos(touchEvent){ let rect=touchEvent.target.getBoundingClientRect(), scaleX=touchEvent.target.width/rect.width,// important for high dpi screens scaleY=touchEvent.target.height/rect.height; return { 'x':(touchEvent.clientX-rect.left)*scaleX, 'y':(touchEvent.clientY-rect.top)*scaleY }; } </script> ``` 上述代码实现了基本的手写板功能[^1]，包括初始化画布、响应手指移动以记录轨迹、清空画布以及将画布上的图案转换成图片等功能。对于不同平台的支持情况，请参照官方文档了解具体 API 使用差异。

### 实现 UniApp 应用启动时显示横屏动画效果 #### 创建开机动画资源文件 为了实现开机动画，在 `static` 文件夹下创建所需的图片或视频资源。这些资源将用于构建动画序列。 #### 配置页面方向为横向 在项目的根目录下的 `manifest.json` 文件中配置应用的方向属性，确保其设置为全屏横屏模式[^1]: ```json { "app-plus": { "orientation": "landscape" } } ``` #### 使用 Vue 生命周期钩子加载动画 通过修改首页组件 (`pages/index/index.vue`) 的生命周期方法来控制动画播放逻辑： ```vue <template> <view class="splash-screen"> <!-- 动画内容 --> <image :src="require('@/static/splash.png')" mode="widthFix"></image> </view> </template> <script> export default { mounted() { setTimeout(() => { this.$router.replace('/home'); }, 3000); // 延迟三秒跳转到主页 }, }; </script> <style scoped> .splash-screen { display: flex; justify-content: center; align-items: center; width: 100vw; height: 100vh; } </style> ``` 上述代码展示了如何利用定时器模拟简单的开机动画延迟，并最终重定向至应用程序的主要界面[^2]。 #### 添加 CSS 动画样式 如果希望增加更复杂的视觉过渡效果，则可以在 `<style>` 标签内定义相应的CSS动画规则: ```css @keyframes fadeInOut { from { opacity: 0; transform: scale(0.8);} to { opacity: 1;transform: scale(1);} } .splash-image { animation-name: fadeInOut; animation-duration: 2s; animation-fill-mode: forwards; } ``` 此部分实现了淡入淡出加缩放的效果，使启动画面更加生动[^3]。