问题:小程序中echarts因为小程序原生的canvas层级太高,而导致弹窗这类dom元素无法遮挡住canvas,如下图: 解决方案1:(wx:if控制dom显隐,显示canvas就重新渲染echarts,简单粗暴,但是耗费性能): 第一步:wxml <!-- echarts饼图--用wx:if控制dom显隐,hidden没办法隐藏 --> <ec-canvas id="storeChart" canvas-id="storeChart" ec=&

一.前言 相信做过微信小程序开发的人应该都碰到过这个问题,因为这个需求实在太常见了 由于textarea是属于原生组件,层级最高,不管在页面中我们设置z-index值多少都会被textarea组件遮挡住,很影响用户体验, 目前官方对该问题还没有修复,当然官方也给出了解决该问题的其他方案,使用cover-view和 cover-image替代,但个人感觉并不是很好,有一些限制 二.使用场景及解决方案 1.弹窗显示 2.底部fixed定位的按钮,页面滚动时,例如添加购物车,显示价格 针对以上两种业务

<view class='remark'> <view class='title'> 备注说明 </view> <textarea class='mark_textarea' placeholder='请说明人员调用具体原因' bindinput="input_remark" value='' /> </view> <cover-view class='fix_bottom bar bottomfix shadow ju

项目中因为需求,底部的tab导航栏是自己写的,在开发者工具中一切正常:但是在真机上页面滑动时,echarts的层级比tab高,调过两者的z-index后仍然如此. 经过查找后发现cover-view和cover-image替换tab的view后,可以解决以上的问题. <!--底部公共tabBar--> <cover-view class="tabbar-con"> <cover-view class="{{villageIs?'nav-btn-h

根据官方文档,textarea 是原生组件 (https://developers.weixin.qq.com/miniprogram/dev/component/textarea.html),所谓原生组件就是 “脱离在 WebView 渲染流程外” 文档中的原话是: 原生组件的层级是最高的,所以页面中的其他组件无论设置 z-index 为多少,都无法盖在原生组件上. 页面中有弹窗弹出层时,点击弹出层时,底层的textarea也会显示出来,设置z-index没作用. 注意:请在真机中测试.微信开

建立一个新的textarea 组件代替原生textarea ,废话不多说,上代码 <template> <view class="ui-textarea"> <textarea class="textarea {{ hide? 'hidden':''}}" auto-height maxlength="{{maxlength}}" name="{{ name }}" value="{{

1.新的尺寸单位 rpx rpx(responsive pixel): 可以根据屏幕宽度进行自适应. 规定屏幕宽为750rpx.如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素. 设备 rpx换算px (屏幕宽度/750): px换算rpx (750/屏幕宽度) 2.小程序canvas总结 小程序绘制的单位是px, 基础知识点请参考文档 : canvas中存在一个坐标系,二维的,左上

微信小程序 canvas 自动适配 自动换行,保存图片分享到朋友圈  https://github.com/richard1015/News 微信IDE演示代码https://developers.weixin.qq.com/s/WCkpsTm97M7p function findBreakPoint(text, width, context) { var min = 0; var max = text.length - 1; while (min <= max) { var middle =

---恢复内容开始--- 微信小程序canvas生成并保存图片,具体实现效果如下图     实现效果需要做以下几步工作 一.先获取用户屏幕大小,然后才能根据屏幕大小来定义canvas的大小 二.获取图片(二维码)的宽高,并对图片进行等比例缩放在canvas绘制 三.文字的布局 四.将canvas内容生成图片并保存到本地 五.并图片保存到相册 具体实现代码如下 主逻辑 代码量比较多,分段来展示 /*页面data定义所需参数*/ data{ // canvas _width: 0, //手机屏宽 _

WeZRender是一个微信小程序Canvas增强组件,基于HTML5 Canvas类库ZRender. 使用 WXML: <canvas style="width: 375px; height: 600px;" canvas-id="line-canvas-1">canvas> JS: var wezrender = require('../../lib/wezrender'); zr = wezrender.zrender.init("

在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvasContext.fillText参数为 我们只能设置文本的最大宽度,这就产生一定的了问题.如果我们绘制的文本长度不确定或者我们希望文本超出自动换行或者用 ...我们只能设置文本的最大宽度,这就产生一定的了问题.如果我们绘制的文本长度不确定或者我们希望文本超出自动换行或者用省略号表示,光靠这个API是无法完成的.下面本人就讲下我在开发中是如何解决这个问题的.. 1 wxml代码. <canvas canvas-id=&quo

技术:微信小程序   概述 上传图片,编辑图片大小,添加文字,改变文字颜色等 详细 代码下载:http://www.demodashi.com/demo/14789.html 概述 微信小程序--canvas画布实现图片的编辑 详细 一.前期准备工作 软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html 1.基本需求. 实现上传图片 实现图片编辑 实现添加文字 实现导出图片 2.案例

技术博客--微信小程序canvas实现图片编辑 我们的这个小程序不仅仅是想给用户提供一个保存和查找的平台,还希望能给用户一个展示自己创意的舞台,因此我们实现了图片的编辑部分.我们对对图片的编辑集成了很多个不同的模块.根据用户的需求,我们主要实现了6个不同的功能,包括添加文字,图片涂鸦,添加滤镜,拼接图片,宣传图片,裁切图片. 虽然这些都是比较基础的图片的编辑能力,但是通过我们的优化,我们能够比较方便直观的修改我们的表情.通过结合多个不同的编辑操作,我们可以比较方便的实现出很多酷炫的效果.我们实现

测试手机为IPHONE6,开发者工具版本0.10.102800.开发者工具0.11.112301版本也一样 微信小程序里的canvas 非 h5 canvas有很多不一样的地方,以下把微信小程序的canvas叫做wxcanvas 下面全是我一点点测试出的干货,耐心看: 1.wxcanvas,不像h5canvas那样有width和height属性和width和height的style样式.他只有style样式,可以理解为他就是个框吧: 2.wxcanvas不要当成真的H5canvas,就当它是个d

工作中公司业务需要的微信小程序用户签字功能 先看效果图: wxml: <view class="wrapper"> <view class="handBtn"> <image catchtap="selectColorEvent" src="{{ selectColor === 'black' ? '../../images/color_black_selected.png' : '../../images

业务中碰到微信小程序需要生成海报进行朋友圈分享,这个是非常常见的功能,没想到实际操作的时候花了整整一天一夜才搞好,微信的 canvas 绘图实在是太难用了,官方快点优化一下吧. 业务非常简单,只需要将用到的图片,文案素材拼装到一张图片,保存到本地就可以了. 首先创建画布,将一张网上的图片画到画布上. const ctx = wx.createCanvasContext('shareCanvas'); ctx.drawImage("https://img3.doubanio.com/view/ph

先在HTML中创建 img和canvas并设置id属性 <canvas id="canvas" width="500" height="500" style="border: 1px solid red;"></canvas> <img src="./dialog.png" id="img" /> js中 微信小程序也可以使用. 当然获取canvas会

网络图片缓存 在uni中wx可以用uni代替 无区别: 先把要插入的网络图片缓存(getImageInfo); let context = uni.createCanvasContext('firstCanvas'); //canvas-id='firstCanvas' uni.getImageInfo({ src:https://xxxxxxxx, success:res=>{ console.log(`缓存地址:${res.path}`); context.drawImage(res.pat

微信小程序自带的设置透明度只有setGlobalAlpha,但是CanvasContext.setGlobalAlpha设置透明度,是全局透明,整张图片都透明了.所以直接使用是不行的. 换种思路实现:就是把需要加水印的图片弄成拷贝成两张(大小尺寸一样),然后一张图片加水印字体并通过CanvasContext.setGlobalAlpha设置字体透明度,然后把两张图片合并就能实现照片不透明,字体透明. 微信扫一下小程序码可以查看实现的效果: 主要js代码逻辑: 1 var ctx= wx.crea

此功能并没有做所有机型测试,后面会一个一个做一下,如需使用请先自作测试! canvas在小程序中设定的尺寸默认是px 并不是rpx的 所以需要转换一下 PS:设计稿是750像素 wx.getSystemInfo({ success: function (res) { var v =750 / res.windowWidth;//设计稿尺寸除以 当前手机屏幕宽度 function shiftSize(w) { return w / v; } //例子 //绘制文字 function fillFon

小程序制作证件照过程 利用canvas制作生活中常用的证件照,压缩图片,修改图片dpi.希望给大家带来方便. 证件照小程序制作要点 上传合适的图片,方便制作证件照 调用AI接口,将图像进行人像分割.这里我用的是百度AI 调用人体关键点为分析图片中头部和肩部的位置信息.为后满裁剪图片提供依据 利用canvas 将头部和肩部位置制作为新的证件照尺寸照片 改变图片的背景颜色,生成不同要求的背景证件照 导出图品前将图片修改为符合打印要求的dpi. 下载最终生成好的证件照 上传合适的图片,方便制作证件照