登录 立即注册
金钱:

Code4App-iOS开发-iOS 开源代码库-iOS代码实例搜索-iOS特效示例-iOS代码例子下载-Code4App.com

查看: 640|回复: 1

装逼生成器

[复制链接]

584

主题

1144

帖子

6928

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
6928

明星会员推广达人分享大神精品牛人活跃会员热心会员优秀版主颜值认证终身成就奖

发表于 2017-1-4 17:42:07 | 显示全部楼层 |阅读模式

小程序玩法很简单,就是输入自己的姓名,金额,会生成一张高额度的信用卡,可以去ZB了,

效果图:

页面布局代码:

<!--pages/main/index.wxml-->
<view class="container-box">
    <view class="img-box">
        <image bindtap="previewImg" mode="scaleToFill" src="{{imagePath}}"></image>
    </view>
    <form bindsubmit="formSubmit">
        <view class="input-row">
            <label>姓名</label>
            <input name='name' type="text" maxlength="20" placeholder="王 思聪"/>
        </view>
        <view class="input-row">
            <label>金额</label>
            <input name="money" type="number" maxlength="7"  placeholder="1000000"/>
        </view>
        <button formType="submit" class="mybtn" type="primary">生成图片</button>
    </form>
</view>
<view hidden="{{maskHidden}}" class="mask"></view>
<view class="canvas-box">
    <canvas hidden="{{canvasHidden}}" style="width: 686px;height: 686px;" canvas-id="mycanvas"/>
</view>

js代码

// pages/main/index.js
var util = require("../../utils/util.js");
var toPinyin = require("../../utils/toPinyin.js");
Page({
  data:{
    imagePath:"/images/bankcard.jpg",
    name:"WANG SICONG",
    money:"1000000",
    maskHidden:true,
    /*
    官网说hidden只是简单的控制显示与隐藏,组件始终会被渲染,
    但是将canvas转化成图片走的居然是fail,hidden为false就是成功的
    所以这里手动控制显示隐藏canvas
    */
    canvasHidden:false//初始时显示canvas
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
     
  },
  onReady:function(){
    // 页面渲染完成
    this.createNewImg();
    //创建初始化图片
     
  },
  onShow:function(){
     
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
 
  onUnload:function(){
    // 页面关闭
 
  },
 //将金额绘制到canvas的固定
  setMoney:function(context){
    var money=util.toThousands(this.data.money);
    console.log(money);
    context.setFontSize(24);
    context.setFillStyle("#484a3d");
    context.fillText(money, 340, 190);
    context.stroke();
  },
  //将姓名绘制到canvas的固定
  setName:function(context){
    var name = toPinyin.Pinyin.getFullChars(this.data.name);
    context.setFontSize(20);
    context.setFillStyle("#67695b");
    context.save();
    context.translate(170, 506);//必须先将旋转原点平移到文字位置
    context.rotate(-5 * Math.PI / 180);
    context.fillText(name, 0, 0);//必须为(0,0)原点
    context.restore();
    context.stroke();
  },
  //将canvas转换为图片保存到本地,然后将图片路径传给image图片的src
  createNewImg:function(){
    var that = this;
    var context = wx.createContext();
    var path = "images/bankcard.jpg";
    //将模板图片绘制到canvas,在开发工具中drawImage()函数有问题,不显示图片
    //不知道是什么原因,手机环境能正常显示
    context.drawImage(path, 0, 0,686,686);
    this.setMoney(context);
    this.setName(context);
    //绘制图片
    wx.drawCanvas({
          canvasId: "mycanvas",
          actions: context.getActions()
    });
    //将生成好的图片保存到本地
    wx.canvasToTempFilePath({
      canvasId: 'mycanvas',
      success: function success(res) {
        wx.saveFile({
          tempFilePath: res.tempFilePath,
          success: function success(res) {
            that.setData({
              imagePath:res.savedFilePath,
              canvasHidden:true//生成完图片后将画布隐藏
            });
          }
        });
      }
    });
  },
  //点击图片进行预览,长按保存分享图片
  previewImg:function(e){
    var img = this.data.imagePath
    wx.previewImage({
      current: img, // 当前显示图片的http链接
      urls: [img] // 需要预览的图片http链接列表
    })
  },
  formSubmit: function(e) {
    var that = this;
    var name = e.detail.value.name;
    var money = e.detail.value.money;
    name = name == ""?"WANG SICONG":name;
    money = money == ""?"1000000":money;
    this.setData({
      name:name,
      money:money,
      maskHidden:false,
      canvasHidden:false
    });
    wx.showToast({
      title: '装逼中...',
      icon: 'loading',
      duration:2000
    });
    setTimeout(function(){
      wx.hideToast()
      that.createNewImg();
      that.setData({
        maskHidden:true
      });
    },2000)
     
  }
 
})

完整项目代码:https://github.com/demi520/wxapp-zb

微信扫一扫\订阅移动开发及APP推广热点资讯\公众号:Code4App

0

主题

10

帖子

262

积分

攻城狮

Rank: 3Rank: 3

积分
262
发表于 2017-1-9 18:36:27 | 显示全部楼层
不会玩,打不开。。。
*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册 新浪微博登陆

本版积分规则

关闭

每日头条

通过邮件订阅最新 Code4App 信息
上一条 /4 下一条

广告投放| Github|申请友链|手机版|Code4App ( 粤ICP备15117877号-1 )

快速回复 返回顶部 返回列表