博客

学习整理fabric.js控制元素层级:上移、下移、顶层、底层

  • Post author:
  • Post category:其他

学习整理fabric.js控制元素层级

层级介绍

元素是 Fabric.js 的重要组成部分，如果画布上没有元素，那其实没啥意义。

元素数量多了，难免会产生重叠。又或者某些效果需要几个元素重叠起来。这些情况大概率需要控制元素的层级。

控制层级

原图

在这里插入图片描述

效果图

在这里插入图片描述

index.html

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


    <title>Fabric.js 控制元素层级</title>


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

    <style>

        #container {
            margin-bottom: 10px;
            border: 1px solid #ccc;
        }

        #lnkDownload {
            display: block;

            padding: 0;
            margin-top: 10px;
            text-decoration: none;
        }
    </style>

</head>
<body>


<div id="container">
    <button onclick="bringToFront()">矩形移到顶层</button>
    <button onclick="sendToBack()">矩形移到底层层</button>
    <button onclick="bringForward()">三角形往上走一层</button>
    <button onclick="sendBackwards()">圆形往下走一层</button>
    <button onclick="moveTo()">将三角形移到0层</button>
    <button onclick="moveToUp()">上移图层</button>
    <button onclick="moveToDown()">下移图层</button>
    <canvas id="imageCanvas" width="300" height="300"></canvas>
    <a id="lnkDownload" href="#">
        <button> 保存图片</button>
    </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);


// 矩形
var rect = new fabric.Rect({
    top: 30,
    left: 30,
    fill: 'orange',
    width: 100,
    height: 100,

})
canvas.add(rect);

// 三角形
var triangle = new fabric.Triangle({
    top: 80,
    left: 30,
    width: 80,
    height: 100,
    fill: 'blue'
})
canvas.add(triangle);


// 圆形
var circle = new fabric.Circle({
    radius: 50,
    fill: 'green',
    top: 50,
    left: 60,
    controls: false, // 不可编辑
    hasControls: false, // 控件将不显示，并且不能用于操作对象
});

canvas.add(circle);


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


// 矩形移到顶层
function bringToFront() {
    // 方法1
    canvas.bringToFront(rect);

    // 方法2
    // rect.bringToFront()
}

// 矩形移到底层层
function sendToBack() {
    // 方法1
    canvas.sendToBack(rect);

    // 方法2
    // rect.sendToBack()
}

// 三角形往上走一层
function bringForward() {
    // 方法1
    canvas.bringForward(triangle);

    // 方法2
    // triangle.bringForward()
}

// 圆形往下走一层
function sendBackwards() {
    // 方法1
    canvas.sendBackwards(circle);

    // 方法2
    // circle.sendBackwards()
}

// 三角形移到0层
function moveTo() {
    // 方法1
    // canvas.moveTo(triangle, 0)

    // 方法2
    triangle.moveTo(0);
}


// 往上走一层
function moveToUp() {

    let activeOb = canvas.getActiveObject();

    // 方法1
    canvas.bringForward(activeOb);

    // 方法2
   // activeOb.bringForward();
    card.renderAll();
}


// 往下走一层
function moveToDown() {

    let activeOb = canvas.getActiveObject();

    // 方法1
    canvas.sendBackwards(activeOb);

    // 方法2
   // activeOb.sendBackwards();
    card.renderAll();
}


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

function saveImage() {

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

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

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

}
版权声明：本文为guo_qiangqiang原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。