学习整理fabric.js更换画布文字元素字体样式

徊忆羽菲

已于 2022-10-12 11:59:24 修改

阅读量1.1k

点赞数

分类专栏： Fabric.js Jquery Html 文章标签： javascript 学习 fabric

于 2022-10-12 11:54:37 首次发布

本文链接：https://blog.csdn.net/guo_qiangqiang/article/details/127279982

版权

Html 同时被 3 个专栏收录

247 篇文章 7 订阅

订阅专栏

Jquery

187 篇文章 1 订阅

订阅专栏

Fabric.js

17 篇文章 5 订阅

订阅专栏

学习整理fabric.js更换画布文字元素字体样式

原图

在这里插入图片描述

效果图

在这里插入图片描述

实现代码

index.html

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">

    <title>Fabric.js 下拉选择文字更换字体</title>

    <script src="../fabric5.2.1.js"></script>
    <script src="../jquery-2.1.4.min.js"></script>

    <style>
        div#container {
            padding: 30px;
            font-family: 'verdana', lucida;
        }

        a {
            color: #777;
            display: block;
            background-color: #ccc;
            width: 300px;
            padding: 0;
            margin-top: 2px;
            text-decoration: none;
        }

        /*思源黑体CN-Medium*/
        @font-face {
            font-family: 'SourceHanSansCN-Medium';
            src: url("https://www.qipa250.com/fonts/SourceHanSansCN-Medium.otf");
        }

        /*汉仪雅酷黑-85W*/
        @font-face {
            font-family: 'HanYiYaKuHei85w';
            src: url("https://www.qipa250.com/fonts/HanYiYaKuHei-85W.ttf");
        }

        /*思源宋体CN-Medium*/
        @font-face {
            font-family: 'SourceHanSansSongTiCN-Medium';
            src: url("https://www.qipa250.com/fonts/SourceHanSansSongTiCN-Medium.otf");
        }


        /*优设标题黑*/
        @font-face {
            font-family: 'YouSheBiaoTiHei-2';
            src: url("https://www.qipa250.com/fonts/YouSheBiaoTiHei-2.ttf");
        }
        

    </style>

</head>
<body>

<div id="container">

    <select style="font-family:'SourceHanSansCN-Medium';" name="certificate_title_font" onchange="getfontlib(this,0)">
        <option value="SourceHanSansCN-Medium" style="font-family:'SourceHanSansCN-Medium'; ">思源黑体</option>
        <option value="HanYiYaKuHei85w" style="font-family:'HanYiYaKuHei85w'; ">汉仪雅酷黑-85W</option>
        <option value="SourceHanSansSongTiCN-Medium" style="font-family:'SourceHanSansSongTiCN-Medium'; ">
            思源宋体
        </option>
        <option value="YouSheBiaoTiHei-2" style="font-family:'YouSheBiaoTiHei-2'; ">优设标题黑</option>
    </select>

    <canvas id="imageCanvas" width="300" height="300"></canvas>
    <a id="lnkDownload" href="#">Save image</a>
</div>

<script src="script.js"></script>

</body>
</html>

script.js

var canvas = new fabric.Canvas('imageCanvas', {
    backgroundColor: 'rgb(240,240,240)',
    includeDefaultValues: false,// 指示toObject/toDatalessObject是否应该包含默认值，如果设置为false，则优先于对象值
    perPixelTargetFind: true, //这一句说明选中的时候以图形的实际大小来选择而不是以边框来选择
    hasBorders: false,
});

canvas.setWidth(500);
canvas.setHeight(500);


// 使用 IText，可编辑文本
var text = new fabric.IText(
    '奇葩呀，www.qipa250.com',
    {
        left: 10,
        top: 10,
        fontSize: 20,
        fontFamily: 'Comic Sans',
    }
)
canvas.add(text);


//更换字体
function getfontlib(that) {

    var index = that.selectedIndex;
    var font_val = that.options[index].value;
    var text = that.options[index].text;

    console.log('index==', index);
    console.log('font_val==', font_val);
    console.log('text==', text);


    $(that).attr("style", "font-family:'" + font_val + "';");


    let activeTxt = canvas.getActiveObject();

    if (!activeTxt) return;

    if (activeTxt.isEditing) {
        // 编辑状态
        activeTxt.setSelectionStyles({'fontFamily': font_val});
    } else {
        activeTxt.fontFamily = font_val;
        let s = activeTxt.styles;
        for (let i in s) {
            for (let j in s[i]) {
                s[i][j].fontFamily = font_val;
            }
        }
        activeTxt.dirty = true;
    }
    canvas.renderAll();
}


var imageSaver = document.getElementById('lnkDownload');
imageSaver.addEventListener('click', saveImage, false);

function saveImage(e) {

    console.log('toJSON==', canvas.toJSON());

    console.log('toObject==', canvas.toObject()); // 输出序列化的内容

    this.href = canvas.toDataURL({
        format: 'png',
        quality: 0.8
    });
    this.download = 'canvas.png';

}