是否有可能從使用Javascript的畫布獲取筆畫？

Question

我使用這個圖紙應用：http://intridea.github.io/sketch.js/

我試圖獲得與中風「內容」：var ctx = colors_sketch.getContext("2d");

我要找的東西，使我能夠捕捉並重新繪製畫布背景。就像這樣：

var ctx=c.getContext("2d"); 
ctx.beginPath(); 
ctx.moveTo(20,20); 
// ... lots of lineTo's etc ... 
ctx.lineTo(70,100); 
ctx.strokeStyle="red"; 
ctx.stroke(); 

Answer 1

您可以創建一個定製的包裝，並調用其API來存儲陣列中的繪圖操作，當你完成後，使用其API中風在畫布上。

如果您還打算包裝其他繪圖操作，如arcTo, bezierCurveTo, rect ...等，包裝將變得複雜得多。但想法仍然相同：將操作保存到具有特定格式的商店，然後在您即將繪製時他們在畫布上，使用ctx操作來重放這些操作。

var StokeStore = function() { 
 
    this.store = []; 
 
    this.current = []; 
 
} 
 

 
StokeStore.prototype.moveTo = function(x, y) { 
 
    if (this.current.length !== 0) { 
 
    this.store.push(this.current); 
 
    this.current = []; 
 
    } 
 
    this.current.push({x: x, y: y}); 
 
}; 
 

 
StokeStore.prototype.lineTo = function(x, y) { 
 
    this.current.push({x: x, y: y}); 
 
}; 
 

 
StokeStore.prototype.stroke = function(ctx, style) { 
 
    
 
    ctx.beginPath(); 
 
    ctx.strokeStyle = style ? style : 'black'; 
 
    this.store.forEach(function(line) { 
 
    this._stroke(line); 
 
    }, this); 
 
    this._stroke(this.current); 
 
    ctx.stroke(); 
 
}; 
 

 
StokeStore.prototype._stroke = function(line) { 
 
    var length = line.length; 
 
    if (length < 2) { 
 
     return; 
 
    } 
 
    ctx.moveTo(line[0].x, line[0].y); 
 
    var index, pt; 
 
    for (index = 1; index < length; ++index) { 
 
     pt = line[index]; 
 
     ctx.lineTo(pt.x, pt.y); 
 
    } 
 
}; 
 

 
var canvas = document.getElementById('test'); 
 
var ctx = canvas.getContext('2d'); 
 

 
var print = document.getElementById('print'); 
 
var clear = document.getElementById('clear'); 
 

 
var exampleStroke = new StokeStore(); 
 
exampleStroke.moveTo(50, 50); 
 
exampleStroke.lineTo(70, 70); 
 
exampleStroke.lineTo(200, 50); 
 
exampleStroke.lineTo(200, 190); 
 
exampleStroke.moveTo(30, 90); 
 
exampleStroke.lineTo(0, 290); 
 
exampleStroke.lineTo(290, 40); 
 
exampleStroke.lineTo(150, 150); 
 

 
var randomColor = ['red', 'cyan', 'black', 'purple']; 
 

 
print.addEventListener('click', function() { 
 
    var rnd = Math.floor(Math.random() * randomColor.length); 
 
    var style = randomColor[rnd]; 
 
    exampleStroke.stroke(ctx, style); 
 
}); 
 

 
clear.addEventListener('click', function() { 
 
canvas.width = canvas.width; 
 
});

<canvas id="test" width="300" height="300"></canvas> 
 
<button id="print">print</button> 
 
<button id="clear">clear</button>

更新到markE的評論：

我不擅長修改jQuery插件，但它似乎sketch.js確實提供了存儲本身，當你調用其API，它設置data-sketch屬性來存儲其創建的實例，因此您可以嘗試與該實例交互，如重繪或其他。

此外，它使用類似的格式存儲素描歷史，如果我們使用var sketch = $(CANVAS).data('sketch')來獲得實例，我們可以用sketch.actions讓所有行程，每個行程有一個array稱爲events，它存儲的對象與屬性x, y, eventType ，所以如果你願意，你可以從中檢索筆畫，或者將自己的筆畫放入歷史中。喜歡：

sketch.actions.push({ 
    color: //stroke color, 
    size: // stroke size, 
    tool: // marker will draw, while eraser will erase to white, 
    events: [ 
     {x:xval, y:yval, event:evType},.... 
    ] 
}); 

jsfiddle或下面的代碼片段。

$(function() { 
 
    var $cv = $('#test'); 
 
    var cv = $cv.get(0); 
 
    $('#test').sketch(); 
 
    var sketch = $cv.data('sketch'); 
 
    
 
    $('#clear').click(function() { 
 
     cv.width = cv.width; 
 
    }); 
 
    
 
    $('#redraw').click(function() { 
 
     sketch.redraw(); 
 
    }); 
 
    
 
    $('#strokes').click(function() { 
 
     var $display = $('#display').empty(); 
 
\t \t sketch.actions.forEach(function(strk, idx) { 
 
      if (!strk.events) { 
 
      \t return; 
 
      } 
 
     \t var $div = $('<div>').addClass('stroke'); 
 
      $('<div>').text('Stroke #' + idx).appendTo($div); 
 
      strk.events.forEach(function(pt, idx) { 
 
       $("<p>").text(idx + ': (' + pt.x + ',' + pt.y + ')' ).appendTo($div); 
 
      }); 
 
      $div.appendTo($display); 
 
     }); 
 
    }); 
 
    });

#test { 
 
    border: solid 1px gray; 
 
} 
 

 
.stroke { 
 
    border: solid 1px blue; 
 
    float : left; 
 
    padding: 10px; 
 
    margin: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://rawgit.com/intridea/sketch.js/master/lib/sketch.min.js"></script> 
 

 
<canvas id="test" width="500" height="500;"></canvas> 
 
    
 
<button id="clear">clear</button> 
 
<button id="redraw">redraw</button> 
 
<button id="strokes">print strokes</button> 
 
<div id="display"></div>