分分彩怎么买大小:微信小程序Canvas 绘制文字到固定位置

分分彩技巧 www.kqa8.cn 存在博客里偶尔再看看

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
//.wxml文件
    <view class="input-row">
      <label>装逼文案:</label>
      <input name='neirong' type="text" maxlength="20" placeholder="何止于装逼" />
    </view>
 
//.js文件
Page({
  data:{
    imagePath:"",
    neirong: "何止于装逼",
    maskHidden:true,
    },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
    this.createNewImg();
    //创建初始化图片
  },
//将canvas转换为图片保存到本地,然后将图片路径传给image图片的src
  createNewImg:function(){
    var that = this;
    var context = wx.createCanvasContext('mycanvas');
    var path = "/images/tools/iphone.jpg";
    //将模板图片绘制到canvas,在开发工具中drawImage()函数有问题,不显示图片
    //不知道是什么原因,手机环境能正常显示,官方推荐真机测试,工具端为模拟。
    context.drawImage(path, 0, 0, 686, 1485);
    //context.draw(true);
    //context.draw();
    this.setNeirong(context);
    //绘制图片
    context.draw();
    //将生成好的图片保存到本地,需要延迟一会,绘制期间耗时
    setTimeout(function(){
      wx.canvasToTempFilePath({
        canvasId: 'mycanvas',
        success: function (res) {
          var tempFilePath = res.tempFilePath;
          console.log(tempFilePath);
          that.setData({
            imagePath: tempFilePath,
            // canvasHidden:true
          });
        },
        fail: function (res) {
          console.log(res);
        }
      });
    },200);
  },
//将内容绘制到canvas的固定
  setNeirong: function (context) {
    var neirong = util.toThousands(this.data.neirong);
    context.setFontSize(80);
    context.setFillStyle("#ffffff");
    context.setTextAlign("center");//居中
    context.save();
    context.fillText(neirong, 343, 580);
    context.restore();
    context.stroke();
  },
  //点击图片进行预览,长按保存分享图片
  previewImg:function(e){
    var img = this.data.imagePath
    wx.previewImage({
      current: img, // 当前显示图片的http链接
      urls: [img] // 需要预览的图片http链接列表
    })
  },
  formSubmit: function(e) {
    var that = this;
    var neirong = e.detail.value.neirong;
    neirong = neirong == "" ? "何止于装逼":neirong;//空值填
    this.setData({
      neirong:neirong,
      maskHidden:false
    });
    wx.showToast({
      title: '生成器工作中...',
      icon: 'loading',
      duration:1000
    });
    setTimeout(function(){
      wx.hideToast()
      that.createNewImg();
      that.setData({
        maskHidden:true
      });
    },1000)
 
  }
})

雾中有雾 釉里有釉

发表评论

电子邮件地址不会被公开。 必填项已用*标注

返回主页看更多 分分彩技巧
  • 珠宝互联网创新服务高峰论坛暨尚尚珍宝平台发布会在京召开 2019-03-20
  • 召开江西全面放开养老服务市场提升养老服务质量发布会 2019-03-18
  • 大厂也要有地铁了! 平谷线临铁新盘盘点 ——凤凰网房产北京 2019-03-18
  • 推进新时代中国特色社会主义云南新实践——访云南省委书记陈豪 2019-03-12
  • 坚决打好污染防治攻坚战 2019-03-12
  • 人民日报评论员:中国梦归根到底是人民的梦 2019-02-25
  • 多部门三令五申禁网售彩票,世界杯竞猜APP上仍热卖 2019-02-25
  • 第529期:辅助降压、缓解便秘……薯类食物好处多多,怎样吃更健康? 2019-02-18
  • “一带一路”战略下清真产业国际化发展与投资论坛 2019-02-06
  • 这些在INS上流行的美甲能帮你降温5度! 2019-02-06
  • 金正恩乘机赴新加坡半路突改航班号、目的地?答案来了! 2019-01-28
  • 合肥一专车司机脑溢血晕倒前踩刹车 两乘客实施救援 2019-01-28
  • 2018高考各地查分时间公布,这些信息要知道! 2019-01-28
  • 浙江省网络文明公益宣传创意作品展示 2019-01-18
  • 【両会】第13期全人代専門委員会のメンバー 憲法に宣誓 2019-01-18
  • 973| 297| 574| 887| 373| 335| 624| 775| 758| 523|