小程序中经常会遇到要生成图片的需求,图片一般会加上用户的头像和昵称之类的,头像只需要把腾讯域名添加到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. 在小程序Canvas中使用measureText

    有时候我们在使用Canvas绘制一段文本时,会需要通过measureText()方法获取文本的宽度,例如: 创建canvas标签 <canvas id="canvas"> ...

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

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

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

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

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

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

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

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

  8. [技术博客]海报图片生成——小程序canvas画布

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

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

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

随机推荐

  1. TextBlock 重写,当文本过长时,自动截断文本并出现Tooltip

    如下: using System; using System.Collections.Generic; using System.Linq; using System.Text; using Syst ...

  2. python学习笔记之——range()函数

    range函数的三种用法:>>> range(1,5) # 代表从1到5(不包含5) [1, 2, 3, 4] >>> range(1,5,2) # 代表从1到5, ...

  3. Play-with-chrome之环境搭建

    前言 浏览器漏洞在 APT 攻击中用的比较多,而且这基本上是用户上网的标配了,所以研究浏览器的漏洞是十分有前景的,我认为.我选择 chrome 浏览器 ( chromium和 chrome之间的关系请 ...

  4. Pycharm Html CSS JS 快捷方式创建元素

    div#div1>ol>li.id*4 tab键 <div id="div1"> <ol> <li id="id"&g ...

  5. LeetCode 之Find Minimum in Rotated Sorted Array

    1.题目描述 2.题目分析 对该问题,要找最小元,可以从后向前遍历,只要前一个元素大于当前元素,说明当前元素就是最小元. 3.代码 int findMin(vector<int>& ...

  6. redis集群热扩展(基于4.0.9)

    1:环境说明,首先说一下要做的事情,我们要迁移redis集群槽位,现有redis集群环境如下 我们看一下集群的基本信息: > cluster nodes 8ea64a0049e0b193296a ...

  7. C# 实现水印

    直接上源码 public class WaterTextBox : TextBox { //private const int EM_SETCUEBANNER = 0x1501; //[DllImpo ...

  8. 转:spring 的控制反转

    文章一,原文地址:http://blog.sina.com.cn/s/blog_63804f6f0100kfx0.html 控制反转:       IoC(Inversion of Control,控 ...

  9. 水晶报表自定义纸张大小打印 (Crystal Report Print with custom paper size)

    System.Drawing.Printing.PrintDocument doc = new PrintDocument(); doc.PrinterSettings.PrinterName = & ...

  10. asp.net core中DockerFile文件中的COPY

    今天在ubuntu系统中使用docker部署asp.net core时遇到了一个问题,docker build 的时候总会在最后一步提示 lstat obj/Docker/publish: no su ...