个人中心
gpt4 book ai didi

javascript - 在 Fabric.js 中创建山谷文本(带曲线的文本)

转载 作者：行者123 更新时间：2023-11-30 10:25:33 25 4
gpt4 key购买 nike

我正在使用 Fabric.js 在 CANVAS 上显示文本。效果很好，显示的文本如下所示

enter image description here

我想要实现的是如下图所示的文字效果

enter image description here

而不是普通的..是否可以这样做？

这是我的代码..

<!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>

最佳答案

另请参阅此 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;
}

关于javascript - 在 Fabric.js 中创建山谷文本(带曲线的文本)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19726778/

25 4 0
文章推荐： swift - Firebase AuthUI 对于“使用 Apple 登录”中的显示名称和电子邮件返回 nil
文章推荐： java - 为什么我在这个例子中得到了 java.util.ConcurrentModificationException？
文章推荐： ios - 将 XCFramework 嵌入到具有项目框架依赖项的应用程序中
文章推荐： javascript - jQuery 等待直到第一个间隔
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com