学习整理fabric.js实现翻转、复制粘贴、隐藏、显示的解决方案_fabric customisecornericons 隐藏指定-优快云博客

本文链接：https://blog.youkuaiyun.com/guo_qiangqiang/article/details/127249754

本文介绍如何使用Fabric.js实现图片和文本的克隆、显示、隐藏及翻转等功能，并提供了完整的HTML和JavaScript代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原图

在这里插入图片描述

代码

index.html

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

    <title>Fabric.js 文字、图片翻转、克隆、显示、隐藏功能</title>

    <script src="../fabric5.2.1.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>
        <button onclick="clonecopy()">克隆</button>
    </p>
    <p>
        <button onclick="hide()">隐藏</button>
    </p>
    <p>
        <button onclick="display()">显示</button>
    </p>
    <p>
        <button onclick="flip()">翻转</button>
    </p>

    <canvas id="imageCanvas" width="300" height="300"></canvas>
    <a id="lnkDownload" href="#">点我保存图片</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(800);
canvas.setHeight(900);


//加一张图片
fabric.Image.fromURL('../img/qipa250.jpeg', function (img) {
    img.scale(0.2);//缩小0.4倍

    canvas.add(img);
}, {
    left: 100,
});

//加一张图片
fabric.Image.fromURL('../img/qipa250.jpeg', function (img) {
    img.scale(0.2).set('flipX', true);//缩小0.4倍

    canvas.add(img);
}, {
    left: 100,
    top: 330,
});


// 使用 IText，可编辑文本
var text_1 = new fabric.IText(
    '《天净沙·秋思》\n枯藤老树昏鸦，\n小桥流水人家，\n古道西风瘦马。\n夕阳西下，\n断肠人在天涯。',
    {
        width: 300,
        fontSize: 14,
        fontFamily: 'Comic Sans',
        left: 100,
        top: 200,
        fill: 'blue',
        splitByGrapheme: true, // 自动换行
    }
);
canvas.add(text_1);


//隐藏
function hide() {
    canvas.getActiveObject().set('opacity', 0).setCoords();
    canvas.renderAll();
}


//展示
function display() {
    canvas.getActiveObject().set('opacity', 1).setCoords();
    canvas.renderAll();
}

//翻转
function flip() {
    canvas.getActiveObject().set('scaleX', -1).setCoords();
    canvas.renderAll();
}

function paste(_clipboard) {
    // clone again, so you can do multiple copies.
    let canvas = this.canvas;
    _clipboard.clone(function (clonedObj) {
        canvas.discardActiveObject();
        clonedObj.set({
            left: clonedObj.left + 20,
            top: clonedObj.top + 20,
            evented: true,
        });
        if (clonedObj.type === 'activeSelection') {
            // active selection needs a reference to the canvas.
            clonedObj.canvas = canvas;
            clonedObj.forEachObject(function (obj) {
                canvas.add(obj);
            });
            // this should solve the unselectability
            clonedObj.setCoords();
        } else {
            canvas.add(clonedObj);
        }
        _clipboard.top += 20;
        _clipboard.left += 20;
        canvas.setActiveObject(clonedObj);
        // canvas.requestRenderAll();
    });
}


//克隆 复制
function clonecopy() {
    let canvas = this.canvas;
    var _self = this;
    canvas.getActiveObject().clone(function (cloned) {
        paste(cloned);
    });
    canvas.renderAll();
}


//得到按键的信息
function showkey() {
    key = event.keyCode;
    switch (key) {
        case 37://"按了←键！"
            alert("按了←键！");
            break;
        case 38://"按了↑键！"
            alert("按了↑键！");
            break;
        case 39://"按了→键！"
            alert("按了→键！");
            break;
        case 40://"按了↓键！"
            alert("按了↓键！");
            break;
        case 46://"按了delete键！"
            alert("按了delete键！");
            canvas.remove(canvas.getActiveObject());
            break;
    }
}

document.onkeydown = showkey;


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';

}