是否有可能从使用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>