是否有可能从使用Javascript的画布获取笔画?
我使用这个图纸应用:http://intridea.github.io/sketch.js/是否有可能从使用Javascript的画布获取笔画?
我试图获得与中风“内容”: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();
您可以创建一个定制的包装,并调用其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>
您的解决方案记录笔画供以后重播是很好的 - upvote。另外,我认为提问者也希望将你的能力集成到SketchJS框架中(http://intridea.github.io/sketch.js/)。 – markE
@markE Thx对于这个建议,不知何故,我对修改jQuery插件没有太多经验,但是在阅读了它的源代码之后,我得到了一些可以用这个lib检索/插入笔划的方法,但不确定这是OP所需要的。 – fuyushimoya
不知道是否存在。但是你可以将这些'moveTo','lineTo'包装到你的自定义函数中,并将它们存储在数组或其他东西中,并且当你调用自定义'stroke()'时只调用实际的'moveTo','lineTo'。 – fuyushimoya