微信小程序里自定义组件,canvas组件没有效果
- methods: {
- /**
- * el:画圆的元素
- * r:圆的半径
- * w:圆的宽度
- * 功能:画背景
- */
- drawCircleBg: function (el, r, w) {
- const ctx = wx.createCanvasContext(el);
- ctx.setLineWidth(w);// 设置圆环的宽度
- ctx.setStrokeStyle('#E5E5E5'); // 设置圆环的颜色
- ctx.setLineCap('round') // 设置圆环端点的形状
- ctx.beginPath();//开始一个新的路径
- ctx.arc(r, r, r - w, 0, 2 * Math.PI, false);
- //设置一个原点(110,110),半径为100的圆的路径到当前路径
- ctx.stroke();//对当前路径进行描边
- ctx.draw();
- }
- }
- <view class="circle_box" style="width:{{size}}px;height:{{size}}px">
- <canvas class="circle_draw" canvas-id="{{draw}}" style="width:{{size}}px;height:{{size}}px"></canvas>
- <slot></slot>
- </view>
调用页:
- this.circle = this.selectComponent('#circle1');
- this.circle.drawCircle("circle", 100 ,4, 1);
结果是没有效果,
原因是:
createCanvasContext这个是有两个参数的,在page页面默认传了一个This,组件里面 需要传this
const ctx = wx.createCanvasContext('myCanvas',this);
转 : https://segmentfault.com/q/1010000012854159
微信小程序里自定义组件,canvas组件没有效果的更多相关文章
- 小程序-文章:微信小程序常见的UI框架/组件库总结
ylbtech-小程序-文章:微信小程序常见的UI框架/组件库总结 1.返回顶部 1. 想要开发出一套高质量的小程序,运用框架,组件库是省时省力省心必不可少一部分,随着小程序日渐火爆,各种不同类型的小 ...
- 微信小程序入门与实战 常用组件API开发技巧项目实战*全
第1章 什么是微信小程序? 第2章 小程序环境搭建与开发工具介绍 第3章 从一个简单的“欢迎“页面开始小程序之旅 第4章 第二个页面:新闻阅读列表 第5章 小程序的模板化与模块化 第6章 构建新闻详情 ...
- 微信小程序里使用 Redux 状态管理
微信小程序里使用 Redux 状态管理 前言 前阵子一直在做小程序开发,采用的是官方给的框架 wepy , 如果还不了解的同学可以去他的官网查阅相关资料学习:不得不说的是,这个框架确相比于传统小程序开 ...
- 微信小程序里如何用阿里云上传视频,图片。。
纯手写,踩了半天多的坑干出来了... 网上也有对于阿里云如何在微信小程序里使用,但是很不全,包括阿里云文档的最佳实践里. 话不多说上代码了. upvideo(){ var aliOssParams = ...
- 微信小程序 修改(自定义) 单选/复选按钮样式 checkbox/radio样式自定义
参考文章: 微信小程序 修改(自定义) 单选/复选按钮样式 checkbox/radio样式自定义
- 微信小程序中自定义modal
微信小程序中自定义modal .wxml <modal hidden="{{hidden}}" title="这里是title" confirm-text ...
- 在微信小程序里使用 watch 和 computed
在开发 vue 的时候,我们可以使用 watch 和 computed 很方便的检测数据的变化,从而做出相应的改变,但是在小程序里,只能在数据改变时手动触发 this.setData(),那么如何给小 ...
- 微信小程序里实现跑马灯效果
在微信小程序 里实现跑马灯效果,类似滚动字幕或者滚动广告之类的,使用简单的CSS样式控制,没用到JS wxml: <!-- 复制的跑马灯效果 --> <view class=&quo ...
- 微信小程序之自定义select下拉选项框组件
知识点:组件,animation,获取当前点击元素的索引与内容 微信小程序中没有select下拉选项框,所以只有自定义.自定义的话,可以选择模板的方式,也可以选择组件的方式来创建. 这次我选择了组件, ...
随机推荐
- FAILED: SemanticException Unable to determine if hdfs://tmaster:8020/user/root/words.db/test_t2 is encrypted
使用hive时,建立数据库,建表,写数据: 读数据:select * from test_t2; 报错SemanticException 原因:建表时使用了其他路径,或者在另一个路径的数据库(建立数 ...
- microsoft office 2007 在已经安装pdf maker的情况下另存为没有adobe pdf选项
通常,此类情况是pdf maker 插件被禁用导致,点击office 2007左上角菜单栏,选项,加载项,在管理处选择禁用项目, 找到acrobat pdf maker office com addi ...
- 数据库管理工具-Navicat Premium 12
首先感谢下github上大佬,我才能使用这个软件.也可以直接浏览https://github.com/DoubleLabyrinth/navicat-keygen进行安装,非常详细. 1.https: ...
- dict sorted by value. 字典根据 值排序
d = [('a', 24), ('g', 52), ('i', 12)] print(sorted(d),key = lambda x:x[1]) sorted (字典,排序的依据: 字典[key] ...
- cuda实现向量相加
cuda实现向量相加 博客最后附上整体代码 如果有说的不对的地方还请前辈指出, 因为cuda真的接触没几天 一些总结(建议看) cuda 并不纯GPU在运行程序, 而是 cpu 与 gpu 一起在运行 ...
- SpringCloud2.0 概述 基础教程(一)
1.SpringCloud简介 Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智能路由,微代理,控制总线,一次性令牌,全局锁,领导选举 ...
- golang 时间的比较,time.Time的初始值?
参考: https://golangcode.com/checking-if-date-has-been-set/ https://stackoverflow.com/questions/209243 ...
- mali tbr Forward Pixel Kill
https://community.arm.com/cfs-file/__key/communityserver-blogs-components-weblogfiles/00-00-00-20-66 ...
- SQL:自增主键的获取@@IDENTITY 和 SCOPE_IDENTITY 的区别
@@IDENTITY 返回当前会话所有作用域的最后一个ID SCOPE_IDENTITY() 返回当前作用域的最后一个ID 返回上面语句执行后产生的自增主键,这个是目前最可靠的方式: insert i ...
- MongoDB 建立与删除索引
1.1 在独立服务器上面建立索引 在独立服务器上面创建索引,可以在空闲时间于后台建立索引. 在后台建立索引,可利用background:true参数运行 >db.foo.ensureIndex( ...