アプレットサウンドトラック - タブレット

参考：https://www.jianshu.com/p/a1341c0d12e8

同社の小さなプログラムエンジニアは、クライアントが、単機能の売上高は、タブレットが必要です

インターネットは非常に成熟した文言となっています

wxml

< ビュークラス= "ラッパー" > 
  < ビュークラス= "handBtn" > 
    < ボタンcatchtap = "clearClick" クラス= "delBtn" >重写</ ボタン> 
    < ボタンcatchtap = "saveClick" クラス= "subBtn" >完成< / ボタン>  
  </ ビュー> 
  < ビュークラス= "handCenter" > 
    < キャンバスクラス= "サイン"キャンバス-ID = "記号" bindtouchmove= "移動" bindtouchstart = "開始" bindtouchend = "終了" bindtouchcancel = "キャンセル" bindlongtap = "タップ" 無効-スクロール= "true"をbinderror = "エラー" > 
    </ キャンバス> 
  </ ビュー> 
  < ビュークラス=」 handRight」> 
    < ビュークラス= "handTitle" >手写签名</ ビュー> 
  </ ビュー> 
</ ビュー>

コードの表示

 

JS

アプリgetApp =一定（）; 
CONST = qiniuUploader（ "../../ utilsの/ qiniuUploader"）が必要; 
CONST =必要ネットワーク（ '../../ utilsの/ネットワーク'）; 

//初期化署名可変放電前ページに
VARコンテンツ= NULL; 
VARのtouchs = []; 
ページ（{ 
  データ：{ 
    imgList：[]、
    signImage： ''、
        upToken： '' 
  } 
  //筆跡開始
  タッチの移動に応じて//キャンバス開始ジェスチャーを
    開始：関数（イベント）{ 
        //はconsole.log（event.changedTouches [0] .X + "タッチ開始"）; 
        //はconsole.log（ "タッチスタート" + event.changedTouches [0] .Y）; 
        //開始タッチXを取得し、Y 
        LET =点{X：event.changedTouches [0] .X、Y：event.changedTouches [0] .Y} 
        touchs.push（ポイント）。
    }、
    キャンバスに応答//接触移動ジェスチャー
    移動：機能（E）{ 
        LET =点{X：e.touches [0] .X、Y：e.touches [0] .Y} 
        touchs.push（ポイント）、
        IF（ touchs.length> = 2）{ 
            This.Draw（touchs）; 
        } 
    } 
    //移動終了に応答して、キャンバスタッチジェスチャ
    終了：機能（E）{ 
        にconsole.log（ "タッチ終了" + E）; 
        //クリアトレースアレイ
        のための（I = 0せ; I < touchs .LENGTH; I ++）{ 
            touchs.pop（）; 
        } 
    } 
    //キャンバスタッチレスポンスを取り消す
    取り消し：関数（E）を{ 
        にconsole.log（+ e "をタッチキャンセル" ）; 
    } 
    長押しジェスチャに応答//キャンバス
    タップ：機能（E）{
        console.log（ "長押しジェスチャ" + E）; 
    }、
    エラー：関数（E）{ 
        にconsole.log（ "キャンバスタッチエラー" E +）; 
    } 
    / ** 
    *ライフサイクル機能-モニターページの読み込み
    * / 
    のonLoad：機能（オプション）{ 
        //コンテキストキャンバス得る
        コンテンツ= wx.createCanvasContext（ 'サイン'）;
         //は、ラインカラーセット
        content.setStrokeStyleを（ "＃000"）、
        ワイヤの幅に配置された// 
        content.setLineWidth （3）; 
        //ラインキャップスタイルより丸みを帯びた端部を設定
        content.setLineCap（「ラウンド」）; 
        //セット二行は、より丸みを帯びに接続されている
        content.setLineJoin（「ラウンド」）; 
        this.getQiniuToken（）
    }、 
    / /ドロー
    ドロー：関数（touchs）{
        POINT1せwx.canvasToTempFilePath（{ 
            canvasId： 'サイン'、= touchs [0]。
        ポイント2せ= touchs [1]。
        touchs.shift（）; 
        content.moveTo（point1.x、point1.y）。
        content.lineTo（point2.x、point2.y）。
        content.stroke（）; 
        content.draw（真の）; 
    } 
    //清除操作
    clearClick：関数（）{ 
        //清除画布
        content.clearRect（0、0750、700）。
        content.draw（真の）; 
    } 
    //保存图片
    saveClick：関数（）{ 
        VAR この=。
        
            成功：関数（RES）{ 
                that.uploadImg（res.tempFilePath）
            } 
        }）
    } 
    / ** 
     *获取qiniuToken 
     * / 
    getQiniuToken：関数（）{ 
      CONST この=。
      constのURL = app.config.serverUrl + '/共通/ qiniuToken'; 
      constのURL = '/共通/ qiniuToken';
      CONSTのparams = {};
      constのALLDATA = app.signature（URL、のparams）; 
      
      wx.request（{ 
        URL：URL、
        方法： 'POST'、
        データ：ALLDATA、
        ヘッダ：{
          'コンテンツタイプ'： 'アプリケーション/ JSON' 
        }、 
        成功：関数（RES）{ 
          that.setData（{
            upToken：res.data.uptoken 
          }）。
        } 
      }）
    } 
    / ** 
     *图片上传
     * / 
    uploadImg：機能（URL）{ 
      CONST この=。
    
      CONST PARAM = {
         領域： 'NCN'、
        ドメイン：app.config.qiniuUrl、
        shouldUseQiniuFileName：偽、
        uploadURL：app.config.qiniuUrl、
        uptoken：that.data.upToken 
      }。
        qiniuUploader.upload（URL、機能（情報）{ 
            that.setData（{ 
                signImage：info.key
            }）; 
        }、関数（誤差）{  
            app.errorLog（エラー）; 
        }、PARAM）。
    } 
}）

コードの表示

 

wxss

ページ{ 
  背景：#fbfbfb。
  高さ：自動; 
  オーバーフロー：隠されました; 
} 

{.wrapper 
  幅：100％。
  高さ：100％; 
  マージン：30rpx 0; 
  オーバーフロー：隠されました; 
  表示：フレックス。
  ALIGN-コンテンツ：センター; 
  フレックス方向：行。
  正当化-コンテンツ：センター; 
  フォントサイズ：28rpx。
} 

.sign { 
    表示：ブロック; 
  背景：#FFF; 
  幅：100％; 
  高さ：100％; 
} 

.handRight { 
  表示：インラインフレックス。
  ALIGN-アイテム：センター; 
} 

.handCenter { 
  ボーダー：4rpx破線＃e9e9e9。
  フレックス：5;
  オーバーフロー：隠されました;
  ボックスサイズ：ボーダーボックス; 
} 

.handTitle { 
  変換：回転（90deg）。
  フレックス：1; 
    マージン下：10pxの; 
  色：＃666; 
} 

.handBtnボタン{ 
  フォントサイズ：28rpx。
} 

.handBtn { 
  高さ：95vh。
  表示：インラインフレックス; 
  フレックス方向：カラム; 
  正当化-コンテンツ：スペースの間; 
  ALIGN-内容：スペースの間; 
  フレックス：1; 
} 

.delBtn、.subBtn { 
  位置：絶対。
  下：300rpx。
  左：0rpx。
  変換：回転（90deg）。
  色：＃666; 
} 
.subBtn { 
    底：100rpx。
}

.delBtn画像{ 
  位置：絶対。
  トップ：13rpx。
  左：25rpx。
}

コードの表示

 

、私は7枚の牛の絵に渡す際に、完成し[OK]をクリックすると、それは、自分のビジネスであるため、Pkg_delete軽微な変更は、錠剤は、達成することができます

効果