收藏
回答

canvals转盘在手机上不转,开发工具一切正常

问题模块 框架类型 操作系统 操作系统版本 手机型号 微信版本
客户端 小程序 Android 8.0.0 华为荣耀9 6.6.1

你想反馈一个 Bug


* Bug 表现是什么?预期表现是什么?

写了一个转盘的canvals  开发工具上正常旋转,在手机上预览的时候就不转不知道什么问题。


* 如何复现?


* 提供一个最简复现 Demo



最后一次编辑于  2018-01-31
回答关注问题邀请回答
收藏

9 个回答

  • 生态农产品15735996044
    生态农产品15735996044
    2018-02-03

    用一个这种的办法解决了问题,虽然笨点,还是实现了。


    2018-02-03
    赞同
    回复
  • 生态农产品15735996044
    生态农产品15735996044
    2018-02-03

    审核过了?


    2018-02-03
    赞同
    回复
  • Jyaane
    Jyaane
    2018-02-03

    大兄弟, 如果审核过了麻烦说一声..

    2018-02-03
    赞同
    回复
  • Holyhulk
    Holyhulk
    2018-02-01

    没办法这样子做,canvas在手机上的实现方式和网页不同,是native层,不能在上边应用动画

    2018-02-01
    赞同
    回复
  • 生态农产品15735996044
    生态农产品15735996044
    2018-01-31

    有人恢复吗


    2018-01-31
    赞同
    回复
  • 生态农产品15735996044
    生态农产品15735996044
    2018-01-31

    是canvas  写错了,不好意思   代目如下


    wxml代码如下

    <canvas animation="{{animationData}}" style="width: 300px; height: 300px;"  canvas-id="lotteryCanvas"></canvas>

    <view bindtap="getLottery" class="canvas-btn">抽奖</view>


    wxss代码如下

    .canvas-btn{

    position: relative;

    left: 110px;

    top: 110px;

    z-index: 100;

    width: 80px;

    height: 80px;

    border-radius: 50%;

    color: #F4E9CC;

    background-color: #E44025;

    line-height: 80px;

    text-align: center;

    font-size: 20px;

    text-shadow: 0 -1px 1px rgba(0,0,0,.6);

    box-shadow: 0 3px 5px rgba(0,0,0,.6);

    text-decoration: none;

    }


    js代码如下

    Page({

    data: {

    animationData: {},

    },


    getLottery: function () {

    var that = this;

    // 初始化 rotate

    var animationInit = wx.createAnimation({

    duration: 1

    })

    this.animationInit = animationInit;

    animationInit.rotate(0).step();

    this.setData({

    animationData: animationInit.export(),

    })


    // 旋转抽奖

    setTimeout(function() {

    var animationRun = wx.createAnimation({

    duration: 4000,

    timingFunction: 'ease'

    });

    //that.animationRun = animationRun

    animationRun.rotate(360 * 8).step();

    that.setData({

    animationData: animationRun.export()

    })

    }.bind(this), 100)

    },


    onShow: function (e) {


    var that = this;


    // getAwardsConfig

    var awardsConfig =  [{ index: 0, name: "红包一个", id: 5 },

    { index: 1, name: "下次努力", id: 0 },

    { index: 2, name: "3元券", id: 4 },

    { index: 3, name: "下次努力", id: 0 },

    { index: 4, name: "5元券", id: 3 },

    { index: 5, name: "下次努力", id: 0 },

    { index: 6, name: "半价苹果", id: 2 },

    { index: 7, name: "下次努力", id: 0 },

    { index: 8, name: "免费苹果", id: 1 },

    { index: 9, name: "下次努力", id: 0 }];


    // wx.setStorageSync('awardsConfig', JSON.stringify(awardsConfig))



    // 绘制转盘

    var len = awardsConfig.length,

    rotateDeg = 360 / len / 2 + 90,

    turnNum = 1 / len  // 文字旋转 turn 值



    var ctx = wx.createCanvasContext('lotteryCanvas', this);//生成一个绘图的canvals对象

    for (var i = 0; i < len; i++) {

    // 保存当前状态

    ctx.save();

    // 开始一条新路径

    ctx.beginPath();

    // 位移到圆心,下面需要围绕圆心旋转//150  150 是300长宽正方形的中心点

    ctx.translate(150, 150);

    // 从(0, 0)坐标开始定义一条新的子路径

    ctx.moveTo(0, 0);

    // 旋转弧度,需将角度转换为弧度,使用 degrees * Math.PI/180 公式进行计算。

    ctx.rotate((360 / len * i - rotateDeg) * Math.PI / 180);

    // 绘制圆弧

    ctx.arc(0, 0, 150, 0, 2 * Math.PI / len, false);


    // 颜色间隔

    if (i % 2 == 0) {

    ctx.setFillStyle('#ffb820');

    } else {

    ctx.setFillStyle('#ffcb3f');

    }


    // 填充扇形

    ctx.fill();

    // 绘制边框

    ctx.setLineWidth(0.5);

    ctx.setStrokeStyle('#e4370e');

    ctx.stroke();


    ctx.setFontSize(20);

    ctx.setFillStyle('black');

    ctx.fillText(awardsConfig[i].name, 60, 30);



    // 恢复前一个状态

    ctx.restore();

    }

    ctx.draw();

    }


    })



    2018-01-31
    赞同
    回复
  • Holyhulk
    Holyhulk
    2018-01-31

    请提供关键代码,可以自己尝试一下用最小的代码复现你所描述的问题,不然我们也无法知道你的问题

    还有,你说的canvals是canvas么?

    2018-01-31
    赞同
    回复
  • 生态农产品15735996044
    生态农产品15735996044
    2018-01-31

    直接上代码?


    2018-01-31
    赞同
    回复
  • Holyhulk
    Holyhulk
    2018-01-31

    提供一个最简复现 Demo

    2018-01-31
    赞同
    回复