html 5 canvas実現の携帯電話端末サインボード

22574 ワード
機能の表示:
ここには画像が表示されないので、やめましょう...
 
機能の具体的な実現:
パラメータの設定:
var DEFAULT_BRUSH_SIZE = 3;//ブラシの太さを設定するvar DEFAULT_BRUSH_COLOR = "#000000";//ブラシの色を設定するvar BACKGROUND_COLOR = "#FFFFFF";//キャンバスの背景色var cut=0を設定する//ブレークポイントvar point={};//ブラシの位置を記録するvar next_point = {};//次のブラシの位置を記録するvar context;//contextコンテキスト
ここでcontextコンテキストの役割を説明する:html 5のcanvas自体は絵画機能を持たず、Javaのpanelに似たキャンバスであり、contextはキャンバスで絵画する方法と属性を提供することができ、canvas.getContext()取得
 
補足点:署名機能を実現するため、実は2点の間に直線を描くことを実現して、1つの開始点と1つの終点を必要として、つまり上のパラメータの設定の:pointとnext_point
 
ここではpointとnextを絶えず監視する必要があります.ポイントの変化:
まずxとyの座標を設定します.
function setPoint(x, y) {
     //    
     var n_point = {};
     n_point.x = x;
     n_point.y = y;
     return n_point;
 }

  
function upDate(up_point) {
     //    
     if (!next_point) {
         next_point = setPoint(0, 0);
     } else {
         next_point = setPoint(up_point.x, up_point.y);
     }
 }

 
座標の変化を絶えず監視するため、ここでは別のメソッドをカプセル化し、一度呼び出します(実は後で考えていますが、なぜ別のメソッドをカプセル化し、直接呼び出すことができないのでしょうか?(^o^)/)
次のように呼び出されます.
  
function loop(e) {
     upDate(point);
 }

 
キャンバスとブラシを初期化する手順は、次のとおりです.
function init() {
     var canvas = document.getElementById("canvas");
     var canvasWidth = canvas.width = window.innerWidth;//       
     var canvasHeight = canvas.height = window.innerHeight;//       
     context = canvas.getContext('2d');//       
 
     context.fillStyle = BACKGROUND_COLOR;//        
     context.fillRect(0, 0, canvasWidth, canvasHeight);//      
 
     point.x = 0;
     point.y = 0;
 
 
     canvas.addEventListener('touchmove', touchMove, false);
     canvas.addEventListener('touchstart', touchStart, false);
     canvas.addEventListener('touchend', touchEnd, false);
     document.getElementById("chonghua").addEventListener('click', chonghua, false);
     document.getElementById('backButton').addEventListener('click', backAction, false);
     setInterval(loop, 1);
 }

 
デフォルトの最初のポイントは(0,0)です.ここで説明する必要があるのはsetInterval()メソッドです.これは絶えず呼び出され、起動すると呼び出され続けます.
clearInterval(setInterval(function,time))という方法
 
携帯端末なのでtouchmove、touchstart、touchendメソッドを登録
 
次に、図面を描く方法を示します.
function draw(context) {
     if (cut > 1) {
         //context.save;//        
         context.fillStyle = DEFAULT_BRUSH_COLOR;//         
         context.lineWidth = DEFAULT_BRUSH_SIZE;//       
         context.lineCap = "tound";//    ，        
         context.beginPath();
 
         context.moveTo(point.x, point.y);
         context.lineTo(next_point.x, next_point.y);
         console.log("  " + cut);
         context.stroke();
         context.restore();//      
     }
 }

 
次は対応するtouchmove,touchstart,touchendメソッドです
//      
 function touchMove() {
     var e = event.touches[0];
     console.log("touchMove");
     point = setPoint(e.clientX, e.clientY);
     $pos_display.innerHTML = '          (' + point.x + ',' + point.x + ').<br/>         (' + next_point.x + ',' + next_point.x + ')';//           
     draw(context);
     cut++;
 }

  

 //      
 function touchStart() {
     console.log("touchStart");
     var canvas = document.createElement('canvas');
     var content = document.getElementById('canvasContent');
     content.appendChild(canvas);
     canvas.width = window.innerWidth;
     canvas.height = window.innerHeight;
     canvas.addEventListener('touchmove', touchMove, false);
     canvas.addEventListener('touchstart', touchStart, false);
     canvas.addEventListener('touchend', touchEnd, false);
     context = canvas.getContext('2d');
     draw(context);
     cut = 1;
 }
//      
 function touchEnd() {
     console.log("touchEnd");
     document.getElementById("canvas").getContext('2d').save();
 }

 
 
 
ブレークポイントが連続していることに注意してください.
この筆画が終わり、次の筆画が始まると、首尾がリンクされていった
ここで私の対処法は
cutブレークポイントを設定し、トリガを開始すると、ブレークポイントを1に設定します.drawメソッドでブレークポイントを判断し、ブレークポイントが1の場合は何も実行せず、touchmoveメソッドでブレークポイントを加算
 
基本的なサイン機能を実現しました
 
取り消し機能:
Canvasにはsave操作の状態に戻るrestoreメソッドがありますが、私が使っている間は卵用ではありません(*̄＾̄)
ソリューション:
canvasは透明だから!!!これはpsのレイヤーの効果を連想し、最終的には各レイヤーの重ね合わせで、
touchstartのたびに新しいレイヤーを作成します()
 
実装:
//       
 function backAction() {
 console.log(document.getElementsByTagName("canvas").length);
     if (document.getElementsByTagName("canvas").length == 1) {
         chonghua();
     }else{
         document.getElementById('canvasContent').removeChild(document.getElementsByTagName("canvas")[document.getElementsByTagName("canvas").length - 1]);
     }
 }

 
注意新しいはhtmlでスタック管理されているので、削除は一番上のレイヤーを削除する必要があります.
 
再描画も簡単です.取り消し操作を繰り返し呼び出します.
//  
 function chonghua() {
     var max = document.getElementsByTagName("canvas").length-1;
     for(var i = max;i>0;i--){
         document.getElementById('canvasContent').removeChild(document.getElementsByTagName("canvas")[document.getElementsByTagName("canvas").length - 1]);
     }
     if(document.getElementsByTagName("canvas").length == 1){
         var context = document.getElementById('canvas').getContext('2d');
         context.fillStyle = "#ffffff";
         context.fillRect(0,0,window.innerWidth,window.innerHeight);
     };
 }

ここで私が书いたのは少し复雑なようで、取り消しに再描画の方法を呼び出すことができて、実はコードは下のo(一＾一+)oを简単にすることができます
 
 
保存するときに面倒です.各レイヤー(canvasの代わりにレイヤーを使用します)を1つのレイヤーにマージする必要があります.psのレイヤーのマージに似ています.
アイデアはcontextのdrawImageメソッドを呼び出すことです.レイヤーはレイヤーを描きますが、後に絵遊びを発見すると、下のレイヤーと上のレイヤーが多く重なって、取り消しと再描画の機能が機能しなくなりました.具体的な解決手順は以下の通りです.
function drawImg(img){
     var canvas = document.getElementById("canvas");
     return canvas.getContext('2d').drawImage(img,0,0);
 }

  
$scope.saveImg = function () {
     var canvas = document.getElementById("canvas");
     var canvasLength = document.getElementsByTagName("canvas").length-1;
     for(var i = canvasLength;i>0;i--){
         drawImg(document.getElementsByTagName("canvas")[i]);
         document.getElementById("canvasContent").removeChild(document.getElementsByTagName("canvas")[i])
     }
     var dataUrl = canvas.toDataURL();
     $scope.globalNavigator.pushPage('main/crm/img.html', {
         animation: "fade",
         src: dataUrl
     })
 }

 
ここで説明する必要があるのはcontextのtoDataURL()である.デフォルトでpng形式になっている場合は、もちろん自分で指定してtoDataURLにパラメータを付ければいいです
 
ネット上ではbase 64が必要だと言われています.jsとcanvas 2 image.js、やっとピクチャーに変えて保存することができて、もちろん私もダウンロードして、その时私は2つを注釈に導入して落として、機能は影響を受けていないようですO(∩∩)Oハハ~
imagecropperを採用する.jss+canvasトリミング後のマルチサイズの画像プレビューを実現
Springboot+websocketチャットルーム(複数人チャット、シングルチャット)