canvas操作插件fabric.js使用方法详解

fabric.js是一个很好用的 canvas 操作插件,下面整理了一些平时项目中用到的知识点:

//1: 获得画布上的所有对象:
var items = canvas.getObjects();

//2: 设置画布上的某个对象为活动对象。
canvas.setActiveObject(items[i]);

//3:获得画布上的活动对象
canvas.getActiveObject()

//4:取消画布中的所有对象的选中状态。
canvas.discardActiveObject();

//5: 设置画布中的对象的某个属性值,比如第 0 个对象的 id
var items = canvas.getObjects();
tems[0].id ="items_id0" 或 items[0].set("id","items_id0")

//6:获得画布中对象的某个属性,比如 第0 个对象的 id
var items = canvas.getObjects();
items[0].id;
//或
items[0].get("id");

//7: 重新渲染一遍画布,当画布中的对象有变更,在最后显示的时候,需要执行一次该操作
canvas.renderAll()

//8: 清除画布中所有对象:
canvas.clear();

//9:清除画布中的活动对象:
 var t = canvas.getActiveObject();
 t && canvas.remove(t);

//10: 设置活动对象在画布中的层级
var t = canvas.getActiveObject();
canvas.sendBackwards(t) //向下跳一层
canvas.sendToBack(t)  //向下跳底层:
canvas.bringForward(t) //向上跳一层:
canvas.bringToFront(t) //向上跳顶层:
//或者:
t.sendBackwards();
t.sendToBack();
t.bringForward();
t.bringToFront();

//10:加载图片时图片缩放到指定的大小。
fabric.Image.fromURL(image_src, function(oImg) {
  oImg.set({
    left:tmp_left,
    top:tmp_top,
    centeredScaling:true,
    cornerSize: 7,
    cornerColor: "#9cb8ee",
    transparentCorners: false,
  });
  oImg.scaleToWidth(image_width);
  oImg.scaleToHeight(image_height);
  canvas.add(oImg).setActiveObject(oImg);
 });

//11:当选择画布中的对象时,该对象不出现在顶层。
canvas.preserveObjectStacking = true;

// 12:为画布通过URL方式添加背景图片
var bg_url = "http://www.xxxx.com/...../bg.png"
fabric.Image.fromURL( bg_url , function(oImg) {
  oImg.set({
  width: canvas_obj.width,
  height: canvas_obj.height,
  originX: 'left',
  originY: 'top'
  });
  canvas_obj.setBackgroundImage(oImg, canvas_obj.renderAll.bind(canvas_obj));
});

//13: originx: originy:代表坐标系。

//14: 画布对象居中设置:
var t = canvas.getActiveObject();
t.center();  //全部居中
t.centerH();  //水平居中
t.centerV();  //垂直居中
t.setCoords(); //注:必须设coords以上设置才会有效。

//15: 当对象移动时 限制对象的 不超出画布
// canvas moving limit
function objectMoving(e){
  var obj = e.target;
  if(obj.currentHeight > obj.canvas.height || obj.currentWidth > obj.canvas.width){
      return;
   }
   obj.setCoords();
    // top-left corner
    if(obj.getBoundingRect().top < 0 || obj.getBoundingRect().left < 0){
      obj.top = Math.max(obj.top, obj.top-obj.getBoundingRect().top);
      obj.left = Math.max(obj.left, obj.left-obj.getBoundingRect().left);
     }
     // bot-right corner
     if(obj.getBoundingRect().top+obj.getBoundingRect().height > obj.canvas.height
     || obj.getBoundingRect().left+obj.getBoundingRect().width > obj.canvas.width){
      obj.top = Math.min(obj.top, obj.canvas.height-obj.getBoundingRect().height+obj.top-obj.getBoundingRect().top);
         obj.left = Math.min(obj.left, obj.canvas.width-obj.getBoundingRect().width+obj.left-obj.getBoundingRect().left);
      }
}

//16:当画布对象放大时限制其操出边界:
//注意当创建对象到画布上时必须先加上:
 obj.saveState();
 //在对象修改时方法里就可以调用了。
 function objectModified (e) {
  let obj = e.target;
  let boundingRect = obj.getBoundingRect(true);
  if (boundingRect.left < 0
    || boundingRect.top < 0
    || boundingRect.left + boundingRect.width > obj.canvas.getWidth()
    || boundingRect.top + boundingRect.height > obj.canvas.getHeight()) {
    obj.top = obj._stateProperties.top;
    obj.left = obj._stateProperties.left;
    obj.angle = obj._stateProperties.angle;
    obj.scaleX = obj._stateProperties.scaleX;
    obj.scaleY = obj._stateProperties.scaleY;
    obj.setCoords();
    obj.saveState();
  }else{
  obj.saveState();
}
  }
//17:当生成json对象时,背景图片显示出来。
fabric.Image.fromURL( bgImg, function(oImg) {
   oImg.set({
     width: 400,
     height:400,
     left:0,
     top:0,
     originX: 'left',
     originY: 'top',
     opacity:0
   });
   //当toObject方法时显示背景图片。
   oImg.toObject = (function(toObject) {
     return function() {
      return fabric.util.object.extend(toObject.call(this), {
        opacity:1
      });
     };
  })(oImg.toObject); 

 canvas_obj.setBackgroundImage(oImg, canvas_obj.renderAll.bind(canvas_obj));
}, { crossOrigin: 'Anonymous' });

//18:创建蒙版层
//获取蒙版位置属性(非必要):
var maskLayerTop  = parseInt($(this).attr("data-top"));
var maskLayerLeft  = parseInt($(this).attr("data-left"));
var maskLayerWidth = parseInt($(this).attr("data-width"));
var maskLayerHeight = parseInt($(this).attr("data-height"));
//创建蒙版
var clipMask = new fabric.Rect({
  originX: 'left',
  originY: 'top',
  left: maskLayerLeft,
  top: maskLayerTop,
  width: maskLayerWidth,
  height: maskLayerHeight,
  fill: 'rgba(0,0,0,0)',
  strokeWidth:0,
  selectable: false
});  

clipMask.set({
  clipFor: 'pug'
});

canvas_obj.add(clipMask);
function degToRad(degrees) {
  return degrees * (Math.PI / 180);
}   

function findByClipName(name){
  return _(canvas_obj.getObjects()).where({
    clipFor: name
  }).first()
}  

canvas_obj.clipByName = function(ctx) {
  this.setCoords();
  var clipObj = findByClipName(this.clipName);
  var scaleXTo1 = (1 / this.scaleX);
  var scaleYTo1 = (1 / this.scaleY);
  var skewXReverse = - this.skewX;
  var skewYReverse = - this.skewY;
  ctx.save();
  var ctxLeft = -( this.width / 2 ) + clipObj.strokeWidth;
    var ctxTop = -( this.height / 2 ) + clipObj.strokeWidth;
    var ctxWidth = clipObj.width - clipObj.strokeWidth;
    var ctxHeight = clipObj.height - clipObj.strokeWidth;
  ctx.translate( ctxLeft, ctxTop );
  ctx.scale(scaleXTo1, scaleYTo1);
  ctx.transform(1, skewXReverse, skewYReverse, 1, 0, 0);
  ctx.rotate(degToRad(this.angle * -1));
  ctx.beginPath();
  ctx.rect(
    clipObj.left - this.oCoords.tl.x,
    clipObj.top - this.oCoords.tl.y,
    clipObj.width,
    clipObj.height
  );
  ctx.closePath();
  ctx.restore();
}
//调用的地方:
//文字层设置蒙版
 var t = new fabric.Text("Your Text", {
      id: first_level+"-text-input"+unique_id,
      cornerSize: 7,
      cornerColor: "#9cb8ee",
      transparentCorners: false,
      textAlign:"center",
      clipName: 'pug',
      clipTo: function(ctx) {
      return _.bind(tmp_canvas_obj.clipByName, t)(ctx)
      }
});
// 图片层设置蒙版:
// add the forntimage to the canvas
fabric.Image.fromURL(image_src, function(oImg) {
  oImg.set({
    id:first_level+"-image-input"+unique_id,
    left:tmp_left,
    top:tmp_top,
    centeredScaling:true,
    cornerSize: 7,
    cornerColor: "#9cb8ee",
    transparentCorners: false,
    clipName: 'pug',
    clipTo: function(ctx) {
      return _.bind(tmp_canvas_obj.clipByName, oImg)(ctx)
    }

  });

//19:生成的图片缩放到指定的尺寸。
  oImg.scaleToWidth(image_width);
  oImg.scaleToHeight(image_height);

//20:to object 时添加 id属性。
  oImg.toObject = (function(toObject) {
       return function() {
        return fabric.util.object.extend(toObject.call(this), {
         id: this.id,
        });
       };
  })(oImg.toObject);
  oImg.id = first_level+"-image-input"+unique_id;
  oImg.saveState();
  tmp_canvas_obj.add(oImg).setActiveObject(oImg);
}, { crossOrigin: 'Anonymous' });
tmp_canvas_obj.renderAll(); 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2021-03-17

fabric.js实现diy明信片功能

本文实例为大家分享了fabricjs实现diy明信片功能的具体代码,供大家参考,具体内容如下 前言 要求需要添加,拷贝,删除,双指放大缩小. 提示:以下是本篇文章正文内容,下面案例可供参考 一.fabric.js是一个很好用的 canvas 操作插件 示例:pandas 是基于NumPy 的一种工具,该工具是为了解决数据分析任务而创建的. 二.代码示例 代码如下(示例): <!DOCTYPE html> <html lang="en"> <head>

JS实现在线ps功能详解

前言 本系统是基于fabric.js实现的canvas版图片,文本编辑器,支持对图片的放大,缩小,旋转,镜面翻转,拖动,显示/隐藏图层,删除图层,替换图层等操作,对文本支持修改文本内容,颜色,字体,加粗,斜体,下划线,背景色等,同时支持图片已有的操作,拖动图层有辅助线功能,可对画布做放大缩小功能,多操作可撤销/回退功能,可直接导出图片,ps基本操作都已支持,欢迎star. 项目地址https://github.com/Jeff-Bee/onLinePS fabric.js相关 fabric 文档

利用Node.JS实现邮件发送功能

第一步.配置篇 首先需要安装nodemailer库 npm install nodemailer//默认会安装最新的版本. 关于这个库的文档参见nodemailer 第二步.库的一些使用介绍 这个库使用方法很简单的.首先是要创建一个用于发送邮件的实例 var transporter = nodemailer.createTransport(transport[, defaults]) transport参数属性 属性太多了就只写一些关键的属性 port:连接的端口号,一般就是465 host:你

Vue.js实现价格计算器功能

本文实例为大家分享了Vue.js实现价格计算器功能的具体代码,供大家参考,具体内容如下 实现效果: 实现代码及注释: <!DOCTYPE html> <html> <head> <title>价格计算器</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial

JS实现简单路由器功能的方法

本文实例讲述了JS实现简单路由器功能的方法.分享给大家供大家参考.具体实现方法如下: var wawa = {}; wawa.Router = function(){ function Router(){ } Router.prototype.setup = function(routemap, defaultFunc){ var that = this, rule, func; this.routemap = []; this.defaultFunc = defaultFunc; for (v

prototype.js简单实现ajax功能示例

本文实例讲述了prototype.js简单实现ajax功能.分享给大家供大家参考,具体如下: 原本不知道prototype.js是一个框架,只当其是一个再普通不过的JS文件.随手拿着用了用,写了一个JSP页面,单纯的用prototype.js来实现AJAX效果.用了之后发现超好用,自己再也不用写那么大一堆代码了,哦耶.言归正传,还是把今天写的那个小代码发上来. 一.JSP部分 这部分的代码,最为关键的是JS部分的改变.没有采用prototype.js的时候,生成一个AJAX效果,起码得有四大段.

纯JS实现图片验证码功能并兼容IE6-8(推荐)

最近要搞一个图片验证码功能,但是又不想自己写后台代码.于是自己准备搞一个纯前端的验证码功能,于是网上搜索了一下,找到一个插件gVerify.js,简单好用,实现完美.不过后面接到说要兼容IE8,想想也是醉了.万恶的IE,不过也还好,也没有想着在去找插件,准备自己搞一搞,顺便拿来学习一下并加强自己的知识.下面看我是如何搞定它的,虽然花了一点时间,不过也值得. 使用方法 使用特别简单,定义一个DIV一验证码输入框,引入下载的js插件,创建一个GVerify对象,参数可以自定义一些或者传入DIV的ID

基于代数方程库Algebra.js解二元一次方程功能示例

本文实例讲述了基于代数方程库Algebra.js解二元一次方程功能.分享给大家供大家参考,具体如下: 假设二元一次方程如下: x + y = 11 x - y = 5 解方程如下: <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" cont

JS实现具备延时功能的滑动门菜单效果

本文实例讲述了JS实现具备延时功能的滑动门菜单效果.分享给大家供大家参考.具体如下: 这是一款鼠标感应时间延迟的滑动门菜单,其实也就是一滑动门,只不过鼠标在移上后不是立即反应,而是稍微迟缓了一下,这样用也是有好处的,这个时间根据你的喜好是可以调整的,本滑动门你可轻易修改外观,把它变成一个内容扩展的菜单. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-delay-style-show-menu-codes/ 具体代码如下: <!DOCTYP

js实现弹窗插件功能实例代码分享

目前测试下:支持IE6+ 火狐 谷歌游览器等. 先来看看此组件的基本配置项:如下: 复制代码 代码如下: this.config = { targetCls   :   '.clickElem',   // 点击元素 title:  '我是龙恩',      // 窗口标题 content     :  'text:<p style="width:100px;height:100px">我是龙</p>', //content            :  'img

js实现文字截断功能

先前用jq做了一个文字截断功能,但是不用jq的项目要实现此功能还要引如jq显得过于麻烦.这里写了一个js的文字截断功能.直接上代码. HTML(测试用的):  <div>我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox我是pox</div> <div limit="10" >我是pox我是pox我是pox我是pox我是p