小程序canvas中文字设置居中锚点

时间:2021-12-19 22:20:28

小程序中经常会遇到要生成图片的需求,图片一般会加上用户的头像和昵称之类的,头像只需要把腾讯域名添加到request和download列表中,使用wx.getImageInfo()就可以缓存到本地,成功的回调再添加进canvas中生成图片。

如果要文字在某个位置居中,canvas中文字怎么根据文字长短不一实现锚点在文字中心位置呢?

var txtWidth=canvas.measureText(this.nickName).width能获取到在canvas中文字的宽度,找到文字的居中x位置减去txtWidth/2就可以实现居中如果参数是number类型转换为字符串类型,否则在部分iOS机型上无效,不能获取文字宽度。

小程序canvas中文字设置居中锚点的更多相关文章

  1. 微信小程序-canvas绘制文字实现自动换行

    在使用微信小程序canvas绘制文字时,时常会遇到这样的问题:因为canvasContext.fillText参数为 我们只能设置文本的最大宽度,这就产生一定的了问题.如果我们绘制的文本长度不确定或者 ...

  2. 微信小程序开发中怎么设置转发(分享)的信息

    如果什么都不设置,转发时默认名称是小程序的名称,转发的图片显示的是当前页面的截图,如图一 如何在自定义转发信息呢? 在进行转发的页面中: Page({ onShareAppMessage: funct ...

  3. 小程序 scroll-view 中文字不换行问题

    问题描述:在scroll-view 中scroll-x="true"时控制文字超出显示省略号,要求如图: 但实际中会出现如文字不换行或样式错乱的问题. 横向滚动的实现如下: 超过两 ...

  4. 优化版小程序canvas,增加失败逻辑,及完善文字

    wxml <view class="shareBox" style="backgound:{{isShow ? '#000' : '#fff'}}" wx ...

  5. 微信小程序Canvas添加水印字体,通过setGlobalAlpha设置字体透明度。

    微信小程序自带的设置透明度只有setGlobalAlpha,但是CanvasContext.setGlobalAlpha设置透明度,是全局透明,整张图片都透明了.所以直接使用是不行的. 换种思路实现: ...

  6. 小程序Canvas性能优化实战

    以下内容转载自totoro的文章<小程序Canvas性能优化实战!> 作者:totoro 链接:https://blog.totoroxiao.com/canvas-perf-mini/ ...

  7. &lbrack;技术博客&rsqb;海报图片生成——小程序canvas画布

    目录 背景介绍 canvas简介 代码实现 难点讲解 圆角矩形裁剪失败之PS的妙用 编码不要过硬 对过长的文字进行截取 真机首次生成时字体不对 drawImage只能使用本地图片 背景介绍 目标:利用 ...

  8. 技术博客--微信小程序canvas实现图片编辑

    技术博客--微信小程序canvas实现图片编辑 我们的这个小程序不仅仅是想给用户提供一个保存和查找的平台,还希望能给用户一个展示自己创意的舞台,因此我们实现了图片的编辑部分.我们对对图片的编辑集成了很 ...

  9. 全栈开发工程师微信小程序-上&lpar;中&rpar;

    全栈开发工程师微信小程序-上(中) width: 750rpx; 750rpx代表与屏幕等宽,rpx的缩写responsive pixel,这个单位是可以根据屏幕大小进行自适应调整的像素单位. 小程序 ...

随机推荐

  1. 装饰器模式&lpar;Decorator&rpar;

    转自http://blog.csdn.net/hust_is_lcd/article/details/7884320 1.认识装饰器模式 装饰模式能够实现动态的为对象添加功能,是从一个对象外部来给对象 ...

  2. explain 用法详解

    explain显示了mysql如何使用索引来处理select语句以及连接表.可以帮助选择更好的索引和写出更优化的查询语句. 使用方法,在select语句前加上explain就可以了: 如: expla ...

  3. wxPython 对话框关闭后进程无法退出的原因

    wxPython中不要用对话框作为主程序wx.Dialog,这会导致程序关闭后进程无法退出.一种可行的做法是用wx.Frame代替

  4. win7重装系统的配置步骤

    0. 关闭休眠功能,在开始菜单的运行里输入powercfg -h off 指令,关闭休眠,此文件实际大小和物理内存是一样的,大约可以为C盘释放1-3G的空间. 1. 在Win7桌面上显示“我的电脑” ...

  5. mybatis根据property获取column

    mybatis根据property获取column mybatis根据类的属性获取xml文件中对应的column mybatis获取xml文件中property对应的column >>&g ...

  6. 使用Sublime Text 2编辑和运行node-webkit应用程序

    开发工具目录结构 --E:\develop\ ----node-webkit-v0.9.2-win-ia32 ----Sublime Text 2.0.2 x64 为Sublime text2构建Bu ...

  7. linux内核——进程,轻量级进程,线程,线程组

    1.进程.轻量级进程.线程.线程组之间的关系 2.及它们的标识相关说明 一.进程.轻量级进程.线程.线程组之间的关系 借助上图说明: 进程P0有四条执行流,即线程, 主线程t0是它的第一个线程,且与进 ...

  8. Redis-安装、启动

    安装Redis 下载redis安装包http://download.redis.io/redis-stable.tar.gz 解压安装包tar xzf redis-stable.tar.gz 安装cd ...

  9. python中的张量运算(tensor)

    1,首先比较二者的参数部分:这就是处理0阶张量和1阶张量的区别 np.max:(a, axis=None, out=None, keepdims=False) 求序列的最值 最少接收一个参数 axis ...

  10. Divide the Sequence &lpar;贪心&rpar;

    题意:求将一串数据尽可能多分成所有前缀和大于0的连续子串. 思路:由于是要求所有前缀和大于0,那么只要从后往前推就好了. #include<bits/stdc++.h> using nam ...