问题描述
我正在尝试使用Fabric JS创建一种效果,其中字母似乎在这样的毛衣上被“绣了”:
我可以使用this action在Photoshop中实现这种效果。
我将其放入<canvas>
中的想法是从Photoshop中为每个绣花字母渲染出png。然后,我将接受每个字母并将其根据用户键入的内容放置在画布上。
但是这种方法没有正确的字距调整。
要解决此问题,我尝试使用相同的字体在Fabric中写出文本,然后将每个绣好的png覆盖在要替换的字母上(然后隐藏文本本身)。
这是我呈现文本的方式:
window.chest_text = new fabric.IText("NYC",{
fill: '#000',fontSize: 12,left: 210,top: 100,fontFamily: 'Graphik',fontWeight: 500,lineHeight: 1,originX: 'center',});
然后是我渲染刺绣字母的方法:
var n_url = 'https://res.cloudinary.com/tricot/image/upload/v1598820746/tmp/n-embroidery-test.png'
var y_url = 'https://res.cloudinary.com/tricot/image/upload/v1598820745/tmp/y-embroidery-test.png'
var c_url = 'https://res.cloudinary.com/tricot/image/upload/v1598820745/tmp/c-embroidery-test.png'
fabric.Image.fromURL(n_url,function(img) {
img.set({
left: Math.round(window.chest_text.aCoords.bl.x),top: window.chest_text.top
})
img.scaletoHeight(Math.floor(window.chest_text.__charBounds[0][0].height / 1.13),true)
canvas.add(img);
})
fabric.Image.fromURL(y_url,function(img) {
img.set({
left: Math.round(window.chest_text.aCoords.bl.x + window.chest_text.__charBounds[0][1].left),top: window.chest_text.top
})
img.scaletoHeight(Math.floor(window.chest_text.__charBounds[0][1].height / 1.13),true)
canvas.add(img);
})
fabric.Image.fromURL(c_url,function(img) {
img.set({
left: Math.round(window.chest_text.aCoords.bl.x + window.chest_text.__charBounds[0][2].left),top: window.chest_text.top
})
img.scaletoHeight(Math.floor(window.chest_text.__charBounds[0][2].height / 1.13),true)
canvas.add(img);
})
window.chest_text.opacity = 0.5
window.canvas.renderAll()
但是我无法让绣花字母准确地覆盖普通文本(即使它是相同的字体):
我该如何实现?有更好的方法使字距调整正常工作吗?
解决方法
使用破折号作为针迹和ctx.globalCompositeOperation = "source-atop"
仅在文本内部绘制。改变笔触宽度以从字体的内部构造针迹。
不幸的是,行划线间距仅对于笔划中心有效,因此该方法适用于某些字符,但不适用于所有字符。
可以改进,因为没有努力使针迹变圆(每针的高光和阴影颜色),但是由于无法控制线连接处针迹的位置,所以我看不到进一步改进针尖的目的。
可以使用任何字体。
有关示例和代码,请参见代码段。
function stitchIt(text,stitchLen,stitchOffset,threadThickness,size,font,col1,col2,shadowColor,offset,blur) {
const can = document.createElement("canvas");
const ctx = can.getContext("2d");
ctx.font = size + "px "+font;
const width = ctx.measureText(text).width;
can.width = width;
can.height = size;
ctx.font = size + "px "+font;
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.globalCompositeOperation = "source-over";
ctx.lineCap = "butt";
ctx.lineJoin = "bevel";
ctx.fillStyle = col2;
ctx.setTransform(1,1,width / 2,size / 2);
ctx.fillText(text,0);
ctx.setLineDash([stitchLen,stitchLen]);
var w = size,off = 0;
ctx.globalCompositeOperation = "source-atop"
while (w > 0) {
ctx.lineWidth = w;
ctx.strokeStyle = col1;
ctx.lineDashOffset = off;
ctx.strokeText(text,0);
if (w > threadThickness) {
w -= threadThickness / 2;
ctx.lineWidth = w;
ctx.lineDashOffset = off + stitchLen;
ctx.strokeStyle = col2;
ctx.strokeText(text,0);
off += stitchLen * stitchOffset;
w -= threadThickness / 2;
} else {
break;
}
}
ctx.globalCompositeOperation = "destination-out";
ctx.globalAlpha = 0.5;
ctx.strokeStyle = col2;
ctx.lineWidth = threadThickness / 2;
ctx.lineDashOffset = off + stitchLen;
ctx.strokeText(text,0);
ctx.globalCompositeOperation = "destination-over";
ctx.save();
ctx.shadowColor = "#000";
ctx.shadowOffsetX = offset;
ctx.shadowOffsetY = offset;
ctx.shadowBlur = blur;
ctx.fillText(text,0);
ctx.restore();
ctx.globalCompositeOperation = "source-over";
return can;
}
ctx = canvas.getContext("2d");
textEl.addEventListener("input",update);
sLenEl.addEventListener("change",update);
sOffEl.addEventListener("change",update);
sThreadEl.addEventListener("change",update);
sFontEl.addEventListener("change",update);
colEl.addEventListener("click",() => {
color = colors[colIdx++ % colors.length];
update();
});
// update debounces render
var tHdl;
function update() {
clearTimeout(tHdl);
tHdl = setTimeout(draw,200);
}
const colors=[["#DDD","#888"],["#FFF","#666"],["#F88","#338"],["#8D8","#333"]];
var colIdx = 0;
var color = colors[colIdx++];
stitchIt("STITCH",5,1.4,4,160,"Arial Black","#DDD","#888","#0004",5);
function draw() {
ctx.clearRect(0,1500,180);
if (textEl.value) {
const image = stitchIt(
textEl.value,Number(sLenEl.value),sOffEl.value / 100 + 0.8,Number(sThreadEl.value),Number(sFontEl.value),color[0],color[1],5
);
ctx.drawImage(image,90-image.height / 2);
}
}
draw();
canvas {
background: #49b;
border: 2px solid #258;
position: absolute;
top: 0px;
left: 230px;
}
<div>
<input id="textEl" type="text" value="STITCH"></input><br>
<button id="colEl">change Color</button><br>
<input id="sLenEl" type="range" min="2" max="16" value="5"><label for="sLenEl">Stitch length</label><br>
<input id="sOffEl" type="range" min="0" max="100" value="50"><label for="sOffEl">Stitch offset</label><br>
<input id="sThreadEl" type="range" min="2" max="10" value="4"><label for="sThreadEl">Thread size</label><br>
<input id="sFontEl" type="range" min="20" max="180" value="140"><label for="sFontEl">Font size</label><br>
</div>
<canvas id="canvas" width="1500" height="180"></canvas>
,
如果您设法找到字体,则可以使用字体。
NCD Embroidery的字体可能更接近您的需要,但是您必须联系设计者以获得许可证。
您甚至可以在其中一个Photoshop库中找到字体(我对Photoshop不太熟悉,所以这只是一个猜测)
在.css文件中注册了字体。
@font-face {
font-family:'stitchfont';
src:url('./fonts/fs-mom.ttf') format('truetype');
}
@font-face {
font-family:'pencilfont';
src:url('./fonts/fs-ariapenciroman.ttf') format('truetype');
}
@font-face {
font-family:'fabricon';
src:url('./fonts/stf-fabricon-cross-section.ttf') format('truetype');
}
.stitch{
font-family: 'stitchfont';
}
.pencil {
font-family: 'pencilfont';
}
.fabri {
font-family: 'fabricon';
}
和代码:
<body>
<canvas id="stitchText" width="400" height="200"></canvas>
<canvas id="pencilText" width="400" height="200"></canvas>
<canvas id="fabricText" width="400" height="200"></canvas>
<div class="stitch" style="visibility: hidden;">if the font is not used it doesn't seem to load consistently</div>
<div class="pencil" style="visibility: hidden;">so assign the font to any element</div>
<div class="fabri" style="visibility: hidden;">set the style visibility to hidden,dont use the html hidden tag</div>
<script src="./lib/fabric.js/fabric.js"></script>
<script>
let stitchCanvas = new fabric.Canvas("stitchText")
let stitchText = new fabric.Text("NYC",{
fill: '#EEE',fontFamily: 'stitchfont',fontSize: 60,left: 190,top: 90,originX: 'center',originY: 'center'
});
stitchCanvas.add(stitchText);
stitchCanvas.setBackgroundImage("images/embroid.png",stitchCanvas.renderAll.bind(stitchCanvas),{ opacity: 0.8,scaleX: 0.28,scaleY: 0.28 });
let pencilCanvas = new fabric.Canvas("pencilText")
let pencilText = new fabric.Text("NYC",fontFamily: 'pencilfont',fontSize: 80,top: 85,originY: 'center'
});
pencilCanvas.add(pencilText);
pencilCanvas.setBackgroundImage("images/embroid.png",pencilCanvas.renderAll.bind(pencilCanvas),scaleY: 0.28 });
let fabricCanvas = new fabric.Canvas("fabricText")
let fabricText = new fabric.Text("NYC",fontFamily: 'fabricon',fontSize: 40,left: 195,originY: 'center'
});
fabricCanvas.add(fabricText);
fabricCanvas.setBackgroundImage("images/embroid.png",fabricCanvas.renderAll.bind(fabricCanvas),scaleY: 0.28 });
</script>
</body>
字体的结果: