收藏
回答

canvas位置漂移

API/组件名称 终端类型 微信版本 基础库版本
canvas 工具 6.5.6 1.7.4



如上图,这是在一个自定义组件内的canvas左图是它的位置,但是实际绘制图片以后却在右边,而且好像又是另外一个canvas,如下图


绘图代码如下,都是从原点开始,

// 绘制白色背景

console.info('分享参数', data);

that.context.setFillStyle('#000000');

that.context.fillRect(0, 0, data.width , data.height);

// 绘制封面图

that.context.drawImage(data.cover_img, 0, 0,data.width, 200);

that.context.draw();

wx.hideLoading()





求解????

回答关注问题邀请回答
收藏

2 个回答

  • 小程序技术专员-LastLeaf
    小程序技术专员-LastLeaf
    2018-01-15

    你好,麻烦提供一下相关的 wxml 和 wxss 代码。

    2018-01-15
    有用
    回复
  • 金城的妖精见过米
    金城的妖精见过米
    2018-01-16

    //.wxml

    <view class="share-modal {{shareModal?'fade-in':fade-out}}"  catchtap="closeHandle">

            <view class="share-head" hidden="{{!showCanvas}}" catchtap="onTap" style="opacity:{{draw_status?1:0}}">

                <view class="share-title">

                    <text>分享到朋友圈</text>

                </view>

                <view class="share-canvas">

                    <canvas canvas-id="myCanvas" id="friend"></canvas>

                </view>

                <view class="shre-tips">

                    <text>图片已经保存到相册,快去微信朋友圈分享吧~</text>

                </view>

                <view class="share-title share-ok" catchtap="closeHandle">

                    <text>马上去朋友圈</text>

                </view>

            </view>

            <view class="share-sheet {{showSheet?'up':'down'}}" catchtap="onTap">

                <view class="share-img">

                    <button open-type="share">

                        <view class="share-icon">

                            <image src="../../assets/img/weixin.png"></image>

                        </view>

                        <view class="icon-title">好友</view>

                    </button>

                    <button catchtap="shareHandle">

                        <view class="share-icon">

                            <image src="../../assets/img/pengyouquan.png"></image>

                        </view>

                        <view class="icon-title">朋友圈</view>

                    </button>

                </view>

                <view class="cancel-btn" catchtap="closeHandle" hover-class="navigator-hover">

                    取消

                </view>

            </view>

        </view>

        <slot></slot>



    //.scss(使用了scss,编译后为wxss)

    $share-modal-animation-time: .3s !default;



    .share-modal {

    width: 100vw;

    height: 0px;

    position: fixed;

    top: 0px;

    left: 0px;

    background: rgba(0, 0, 0, 0);

    z-index: 9999;


    .share-sheet {

    position: fixed;

    bottom: -139px;

    width: 100vw;

    border-top: 1px solid #828282;

    background: #fff;



    .share-img {

    display: flex;

    flex-direction: row;

    justify-content: flex-start;

    button {

    padding-bottom: 8px;

    padding-top: 8px;

    padding-right: 0px;

    padding-left: 0px;

    margin-left: 16px;

    margin-right: 0px;

    background: transparent;

    .icon-title {

    color: #cccccc;

    font-size: 12px;

    line-height: 25px;

    }

    .share-icon,

    image {

    width: 34px;

    height: 34px;

    }

    .share-icon {

    padding: 8px 8px 0px;

    }

    &:after,

    &:before {

    border: 0px;

    }

    }

    }

    .cancel-btn {

    border-top: 5px solid #cccccc;

    line-height: 50px;

    height: 50px;

    color: #000;

    text-align: center;

    }

    }

    .share-head {

    position: fixed;

    top: 20px;

    width: 80vw;

    left: 10vw;

    border-radius: 5px;

    background: #fff;

    .share-title{

    height: 40px;

    color:#000;

    line-height: 40px;

    }

    .share-canvas {

    margin: 0px auto;

    border: 1px solid #ccc;

    width: 75vw;

    height: 65vh;

    canvas {

    width: 75vw;

    height: 65vh;

    }

    }

    .shre-tips {

    padding: 0px 2.5vw 10px;

    line-height: 1.2em;

    font-size: 0.9em;

    text-align: left;

    color: #666666

    }

    .share-ok {

    border-top: 1px solid #cccccc;

    height: 40px;

    line-height: 40px;

    color: #000;

    }

    }

    }


    .fade-in {

    animation: fade-in $share-modal-animation-time forwards;

    }


    .fade-out {

    animation: fade-out $share-modal-animation-time;

    }


    .down {

    animation: fade-down $share-modal-animation-time forwards;

    }


    .up {

    animation: fade-up $share-modal-animation-time forwards;

    }


    @keyframes fade-in {

    0% {

    height: 100vh;

    background: rgba(0, 0, 0, 0);

    }

    to {

    height: 100vh;

    background: rgba(0, 0, 0, .5);

    }

    }


    @keyframes fade-out {

    from {

    height: 100vh;

    background: rgba(0, 0, 0, .5);

    }

    to {

    height: 100vh;

    background: rgba(0, 0, 0, 0);

    }

    }


    @keyframes fade-up {

    from {

    transform: translateY(0px);

    }

    to {

    transform: translateY(-139px);

    }

    }


    @keyframes fade-down {

    from {

    transform: translateY(-139px);

    }

    to {

    transform: translateY(0px);

    }

    }


    2018-01-16
    有用
    回复
登录 后发表内容