学习整理Fabric.js 动态设置文字字号大小的方法

最新推荐文章于 2025-04-08 14:26:38 发布

原创最新推荐文章于 2025-04-08 14:26:38 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #学习 #fabric

Javascript 同时被 3 个专栏收录

243 篇文章

订阅专栏

Jquery

200 篇文章

订阅专栏

Fabric.js

17 篇文章

订阅专栏

需求

文本被选中后才能修改字号
整体修改字号
修改被选中的几个字的字号，没被选中的不进行修改

解决思路

1、获取被选中的文字：canvas.getActiveObject() 。
2、是否只选中一部分文字：
1）、我通过编辑状态来判断是否只选中一部分文字：isEditing 。
2）、修改被选中文字的样式：setSelectionStyles({…}) 。
3、修改 fontSize 属性。
4、如果是全文修改，还要判断是否有些字符在自身设置了 fontSize ，如果文字自己设置了 fontSize ，那全文设置的权重没独立设置的那么高。

代码

index.html 代码

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

    <title>Fabric.js 修改文字大小</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>

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

        input {
            background-color: #ccc;
            padding: 0;
            width: 300px;
            color: #777;
        }

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

</head>
<body>

<div id="container">
    <p>
        拖动控制字体大小
        <input type="range" min="5" max="150" value="40" id="size" onchange="changeSize(value)">
    </p>
    <p>
        下拉控制字体大小
        <select name="" id="" onchange="changeSize(value)">
            <option value="1">1</option>
            <option value="11">11</option>
            <option value="15">15</option>
            <option value="19">19</option>
            <option value="20">20</option>
            <option value="30">30</option>
            <option value="40">40</option>

        </select>
    </p>
    <p>
        手动输入控制字体大小
        <input type="text" min="5" max="150" value="40" oninput="changeSize(value)">
    </p>

    <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_1 = new fabric.IText(
    '奇葩呀',
    {
        fontSize: 20,
        fontFamily: 'Comic Sans',
        left: 10,
        top: 10,
    }
);
canvas.add(text_1);

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


function changeSize(value) {

    let activeTxt = canvas.getActiveObject();

    if (!activeTxt) return;

    if (activeTxt.isEditing) {
        // 编辑状态
        activeTxt.setSelectionStyles({'fontSize': value});
    } else {
        activeTxt.fontSize = value;
        let s = activeTxt.styles;
        for (let i in s) {
            for (let j in s[i]) {
                s[i][j].fontSize = value;
            }
        }
        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';

}

知识点：

使用 isEditing 判断当前是否进入编辑状态，我是根据编辑状态下是否有选中文字来修改字号大小的。

最后有2层循环：

for(let i in s) {
  for (let j in s[i]) {
    s[i][j].fontSize = value
  }
}

第一层循环 i 是行数的遍历；第二层循环 j 是当前行的文字的遍历。

这么做是因为如果只使用 setSelectionStyles 设置字号大小是无法覆盖每个字本身被设置的 fontSize 。所以还是需要循环一遍，保证每个字都修改到位。

最终实现用三种不同的样式，修改已选中的文字字体大小
在这里插入图片描述