在Fabric.js中创建谷文本（带曲线的文本） [英] Create valley text (text with curve) in Fabric.js
本文介绍了在Fabric.js中创建谷文本（带曲线的文本）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用Fabric.js在CANVAS上显示文字。
我想达成的目标是文字效果，如下所示
可以这样做吗？ b
这是我的代码..
<！DOCTYPE html&
< head>
< meta charset =utf-8>
< title> fabric.js-simple text display< / title>
<！ - 从CDN获取Fabric.js的版本1.1.0 - >
< script src =https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.1.0/fabric.all.min.js>< / script>
<！ - 从CDN获取最高的1.X版本的jQuery。 ready（）函数需要。 - >
< script src =https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js>< / script>
< body>
<！ - 需要一个canvas标签或
Fabric.js不知道在哪里绘制。 - >
< canvas id =cstyle =border：1px solid black; >< / canvas>
< / body>
< script>
//将脚本标记放在页面底部。
//这样，渐进式页面呈现和
//下载不会被阻止。
//仅当加载HTML时运行，
// DOM正确初始化（由jquery提供）
$（function（）{
从fabric.js获取画布图表面
var canvas = new fabric.Canvas（'c'）;
//创建文本对象
//不显示它 - 画布不
//知道它。
var hi = new fabric.Text（'hello，world。'，{
left：canvas.getWidth（） 2，
top：canvas.getHeight（）/ 2
}）;
//将其附加到canvas对象，然后重新显示
//画布。
canvas.add（hi）;
}）;
< / script>
< / head>
< / html>
解决方案
http://jsfiddle.net/swesh/c7s9x2fh/199/
var canvas = new fabric.Canvas（'c'）
var text =Happy Birthday
var headingText = [];
var startAngle = -58;
var textLength = text.length;
var r = getTranslationDistance（text）;
var j = -1;
var angleInterval = 116 / textLength;
for（var iterator =（ - textLength / 2），i = textLength-1; iterator< textLength / 2; iterator ++，i-）{
var rotation = 90-（startAngle + （i）* angleInterval）;
headingText.push（new fabric.IText（text [i]，{
angle：j *（（startAngle）+（i * angleInterval）），
shadow： rgba（0,0,0,0.5）5px 5px 5px'，
fontSize：28，
left：（r）* Math.cos（（Math.PI / 180）* rotation），
top：（r）* Math.sin（（Math.PI / 180）* rotation）
}））;
}
var group2 = new fabric.Group（headingText，{left：0，top：canvas.height / 2，fontFamily：'Arial'，strokeWidth：
strokeStyle：＃fff}）;
canvas.add（group2）;
function getTranslationDistance（text）{
var boundingRectangle = $（< div id ='tempdiv'style ='display：table-cell; font- family：Arial ; font-size：28px;'>+ text +< / div>）appendTo（＃main）;
var translationDistance = $（boundingRectangle）.width（）;
$（boundingRectangle）.remove（）;
return translationDistance;
}
I am using Fabric.js to display text on CANVAS.. which works great and displays text like below
What I am trying to achieve is Text effect like below below
Instead of plain.. is it possible to do so?
Here is my code..
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>fabric.js-simple text display</title>
<!-- Get version 1.1.0 of Fabric.js from CDN -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.1.0/fabric.all.min.js" ></script>
<!-- Get the highest 1.X version of jQuery from CDN. Required for ready() function. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<body>
<!-- A canvas tag is required or
Fabric.js doesn't know where to draw. -->
<canvas id="c" style="border:1px solid black;" ></canvas>
</body>
<script>
// Place script tags at the bottom of the page.
// That way progressive page rendering and
// downloads are not blocked.
// Run only when HTML is loaded and
// DOM properly initialized (courtesy jquery)
$(function () {
// Obtain a canvas drawing surface from fabric.js
var canvas = new fabric.Canvas('c');
// Create a text object.
// Does not display it-the canvas doesn't
// know about it yet.
var hi = new fabric.Text('hello, world.', {
left: canvas.getWidth() / 2,
top: canvas.getHeight() / 2
});
// Attach it to the canvas object, then (re)display
// the canvas.
canvas.add(hi);
});
</script>
</head>
</html>
解决方案
Also Look at this fiddle. http://jsfiddle.net/swesh/c7s9x2fh/199/
var canvas = new fabric.Canvas('c')
var text= "Happy Birthday"
var headingText = [];
var startAngle = -58;
var textLength = text.length;
var r = getTranslationDistance(text);
var j=-1;
var angleInterval = 116/textLength;
for(var iterator=(-textLength/2), i=textLength-1; iterator<textLength/2;iterator++,i--){
var rotation = 90-(startAngle+(i)*angleInterval) ;
headingText.push(new fabric.IText(text[i], {
angle : j*((startAngle)+(i*angleInterval)),
shadow: 'rgba(0,0,0,0.5) 5px 5px 5px',
fontSize:28,
left: (r)*Math.cos((Math.PI/180)*rotation),
top: (r)*Math.sin((Math.PI/180)*rotation)
}));
}
var group2 = new fabric.Group(headingText, { left: 0, top: canvas.height/2,fontFamily: 'Arial', strokeWidth: 1,
strokeStyle:"#fff"});
canvas.add(group2);
function getTranslationDistance(text){
var boundingRectangle = $("<div id='tempdiv' style='display:table-cell;font- family:Arial; font-size:28px;'>"+text+"</div>").appendTo("#main");
var translationDistance = $(boundingRectangle).width();
$(boundingRectangle).remove();
return translationDistance;
}
这篇关于在Fabric.js中创建谷文本（带曲线的文本）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
