Question

除了S笔划外，我如何剪裁下图中的所有内容？换句话说，摆脱所有透明空间，只保持黑色S形状...提前感谢！

=== PNG RENDERED CANAVAS图片=== 图片位于 - ＆gt; http://buildasearch.com/ant/s.png

===帆布图的实际坐标===

var x =  '68,67,66,65,64,63,62,61,60,59,57,56,55,54,53,52,51,51,51,51,51,51,51,52,55,56,52,58,60,59,61,62,64,65,66,68,70,71,72,74,75,76,77,78,78,79,79,79,79,79,79,79,79,79,79,79,79,78,76,74,71,67,59,56,54,52,49,47,46,45,43,42,41,40,39';

var y = '11,11,11,11,11,12,12,12,12,12,13,14,14,15,17,18,20,21,23,24,27,30,32,32,34,34,33,34,34,34,34,35,35,35,35,35,35,36,36,37,38,38,39,40,41,42,43,44,45,47,48,49,50,51,52,53,54,55,56,57,58,59,59,59,60,60,60,60,60,60,60,60,60,60,60';

Answer 1

如果x和y的格式为[6, 3, 19]而非'6,3,19'，则会更容易。出于这个答案的目的，我将假设你以这种方式完成它，因为它使代码更容易。

之后计算很有可能，但是获得你想要的位然后调整画布大小会很麻烦。如果可以的话，最终会更容易，更快地计算出来。这样的事情应该有效：

// Data specification
var x = [68,67,66,65,64,63,62,61,60,59,57,56,55,54,53,52,51,51,51,51,51,51,51,52,55,56,52,58,60,59,61,62,64,65,66,68,70,71,72,74,75,76,77,78,78,79,79,79,79,79,79,79,79,79,79,79,79,78,76,74,71,67,59,56,54,52,49,47,46,45,43,42,41,40,39],
    y = [11,11,11,11,11,12,12,12,12,12,13,14,14,15,17,18,20,21,23,24,27,30,32,32,34,34,33,34,34,34,34,35,35,35,35,35,35,36,36,37,38,38,39,40,41,42,43,44,45,47,48,49,50,51,52,53,54,55,56,57,58,59,59,59,60,60,60,60,60,60,60,60,60,60,60];

// Work out the extreme points in both dimensions
var xs = x.slice().sort(),
    ys = y.slice().sort(),
    minX = xs[0],
    maxX = xs[xs.length-1],
    minY = ys[0],
    maxY = ys[ys.length-1];
// Resize the canvas
canvas.width = maxX - minX + 1;
canvas.height = maxY - minY + 1;
// Shift the points to fit on the shrunk canvas
x.forEach(function(v, i) {
    x[i] = v - minX;
});
y.forEach(function(v, i) {
    y[i] = v - minY;
});

HTML5 Canvas剪辑或裁剪除了S形状之外的一切

1 个答案: