FabricJs:动态海报营销方案

时间: 2019-10-11阅读: 937标签: 海报

简介

Fabric.js是一个可以简化Canvas程序编写的库。 Fabric.js为Canvas提供所缺少的对象模型, svg parser, 交互和一整套其他不可或缺的工具。Fabric.js可以做很多事情,如下:

  • 在Canvas上创建、填充图形(包括图片、文字、规则图形和复杂路径组成图形)。
  • 给图形填充渐变颜色。
  • 组合图形(包括组合图形、图形文字、图片等)。
  • 设置图形动画集用户交互。
  • 生成jsON, SVG数据等。
  • 生成Canvas对象自带拖拉拽功能。


使用教程

安装

npm 安装

npm install fabric --save

cdn引用

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.6/fabric.min.js"></script>// 貌似国外相对较慢

可以在https://www.bootcdn.cn/找到更快的CDN来源,在使用前,先看下我做的总体效果如下:



初始化

创建了一个基本的画布

<canvas id="canvas" width="350" height="200"></canvas>
const card = new fabric.Canvas('canvas') 

// ...这里可以写canvas对象的一些配置,后面将会介绍

// 如果<canvas>标签没设置宽高,可以通过js动态设置
card.setWidth(350)
card.setHeight(200)


对画布的交互

常用监听事件如下:

  • mouse:down:鼠标按下时
  • mouse:move:鼠标移动时
  • mouse:up:鼠标抬起时
    var canvas = new fabric.Canvas('canvas');
    canvas.on('mouse:down', function(options) {
        console.log(options.e.clientX, options.e.clientY)
    })


监听画布对象事件以便“上下一步”的神操作

以下为常用的事件:

  • object:added 添加图层
  • object:modified 编辑图层
  • object:removed 移除图层
  • selection:created 初次选中图层
  • selection:updated 图层选择变化
  • selection:cleared 清空图层选中

下面是原文,更多参考__fabricjs官网事件__:

So which other events are available in Fabric? Well, from mouse-level ones there are "mouse:down", "mouse:move", and "mouse:up". From generic ones, there are "after:render". Then there are selection-related events: "before:selection:cleared", "selection:created", "selection:cleared". And finally, object ones: "object:modified", "object:selected", "object:moving", "object:scaling", "object:rotating", "object:added", and "object:removed"


设置画布背景

// 读取图片地址,设置画布背景
fabric.Image.fromURL('xx/xx/bg.jpg', (img) => {
  img.set({
   // 通过scale来设置图片大小,这里设置和画布一样大
    scaleX: card.width / img.width,
    scaleY: card.height / img.height,
  });
  // 设置背景
  card.setBackgroundImage(img, card.renderAll.bind(card));
  card.renderAll();
});


向画布添加图层对象

fabric.js提供了很多对象,除了基本的 Rect,Circle,Line,Ellipse,Polygon,Polyline,Triangle对象外,还有如 Image,Textbox,Group等更高级的对象,这些都是继承自Fabric的Object对象。

/**
* 如何向画布添加一个Image对象?
*/

// 方式一(通过img元素添加)
const imgElement = document.getElementById('my-image');
const imgInstance = new fabric.Image(imgElement, {
  left: 100, // 图片相对画布的左侧距离
  top: 100, // 图片相对画布的顶部距离
  angle: 30, // 图片旋转角度
  opacity: 0.85, // 图片透明度
  // 这里可以通过scaleX和scaleY来设置图片绘制后的大小,这里为原来大小的一半
  scaleX: 0.5, 
  scaleY: 0.5
});
// 添加对象后, 如下图
card.add(imgInstance);
/**
* 如何向画布添加一个Textbox对象?
*/

const textbox = new fabric.Textbox('这是一段文字', {
    left: 50,
    top: 50,
    width: 150,
    fontSize: 20, // 字体大小
    fontWeight: 800, // 字体粗细
    // fill: 'red', // 字体颜色
    // fontStyle: 'italic',  // 斜体
    // fontFamily: 'Delicious', // 设置字体
    // stroke: 'green', // 描边颜色
    // strokeWidth: 3, // 描边宽度
    hasControls: false,
    borderColor: 'orange',
    editingBorderColor: 'blue' // 点击文字进入编辑状态时的边框颜色
});
// 添加文字后,如下图
card.add(textbox);


获取当前选中的图层对象

// 方式一
this.selectedObj = card.getActiveObject(); // 返回当前画布中被选中的图层 

// 方式二
card.on('selection:created', (e) => {
    // 选中图层事件触发时,动态更新赋值
    this.selectedObj = e.target
})


常规操作

this.selectedObj.rotate(angle); //旋转图层
this.selectedObj.set({

scaleX: -this.selectedObj.scaleX, // 水平翻转
})
card.remove(this.selectedObj) // 传入需要移除的object
this.selectedObj.bringForward();// 上移图层
this.selectedObj.sendBackwards();// 下移图层
card.moveTo(object, index);// 也可以使用canvas对象的moveTo方法,移至图层到指定位置

// 所有图层的操作之后,都需要调用这个方法
card.renderAll()


手机相册拍照图片尺寸太大导致拖动麻烦

主要是在添加图片对象的时候,有两个参数可以应用起来,分别是scaleX,scaleY参数,通过这两个参数,可以对应地缩放图片大小,方便图片能完整地在canvas画布体现出来。

先将手机图片加载完毕,算出宽和高,根据自己的画布纵横对比重新算出 图片的缩放参数即可。

          new Promise(function(res,rej){
              let img = new Image();
              img.onload = function(){
                 console.log(img.width,img.height);
                 res([img.width,img.height]);
              }
              img.src = file.content;
          }).then(function(response){
              let width = response[0];
              let height = response[1];
              let xYRet = 0.61;    //300/490  纵横对比
              let targetRepix = 1;

              if(height > 490)
              {
                targetRepix = (490/height).toFixed(2);
              }

              if(width > 300)
              {
                targetRepix = (300/width).toFixed(2);
              }


              fabric.Image.fromURL(file.content, (img) => {
                  img.set({
                      top:30,
                      left:30,
                      scaleX: targetRepix, 
                      scaleY: targetRepix,
                      hasControls: true, // 是否开启图层的控件
                      borderColor: 'orange', // 图层控件边框的颜色
                  });
                  // 添加对象后, 如下图
                  card.add(img);
              });
          })

文字粗细和颜色随意设

//其中selectedObj 是当前选中的文字对象

    this.selectedObj.set({
        fontWeight:xxx  //改变粗细
    });

    this.selectedObj.set({
        fill:xxx    //改变颜色
    });


更改选中对象的框样式

        card.on('selection:updated', (e) => {
          console.log('selection:updated', e.target)
          this.setSelectedObj(e.target)

            //通过选中的对象更改样式
            e.target.set({
                transparentCorners: false,
                cornerColor: 'blue',
                cornerStrokeColor: 'red',
                borderColor: 'red',
                cornerSize: 12,
                padding: 10,
                cornerStyle: 'circle',
                borderDashArray: [3, 3]
            });

        })

效果如下图:



画布序列化与反序列化————记录状态记录

框架提供了如 tojsON 和 loadFromJSON 方法,作用分别为导出当前画布的json信息,加载json画布信息来还原画布状态。

// 导出当前画布信息
const currState = card.toJSON(); // 导出的Json如下图
// 加载画布信息
card.loadFromJSON(lastState, () => {
  card.renderAll();
});


将画布导出成图片

const dataURL = card.toDataURL({
  format: 'jpeg', // jpeg或png
  quality: 0.8 // 图片质量,仅jpeg时可用
  // 截取指定位置和大小
  //left: 100, 
  //top: 100,
  //width: 200,
  //height: 200
});
站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/5894

小程序海报最佳实现思路,可视化编辑直接生成代码使用

在做小程序时候,我们经常会有一个需求,需要将小程序分享到朋友圈,但是朋友圈是不允许直接分享小程序,那我们还有其他的办法解决吗?答案肯定是有的,即 canvas 生成个性化海报分享图片到朋友圈

小程序生成海报:通过 json 配置方式轻松制作一张海报图

由于我们无法将小程序直接分享到朋友圈,但分享到朋友圈的需求又很多,业界目前的做法是利用小程序的 Canvas 功能生成一张带有二维码的图片,然后引导用户下载图片到本地后再分享到朋友圈

H5海报制作实践

展示的时候使用html、css,这样用户看到的展示、编辑页面适配起来容易。最后生成图片的时候使用canvas,这个canvas是隐藏的,用户不可见,这样还有一个优点,最终生成的海报大小是固定的,跟手机屏幕大小无关。

小程序海报生成工具,可视化编辑直接生成代码使用

在做小程序时候,我们经常会有一个需求,需要将小程序分享到朋友圈,但是朋友圈是不允许直接分享小程序,那我们还有其他的办法解决吗?答案肯定是有的,即 canvas 生成个性化海报分享图片到朋友圈

Vue中用canvas实现二维码和图片合成海报

在项目中经常会遇到需要将不同的二维码放到一张通用图片上,提供用户下载,简单来说,就是利用canvas将同等比例的二维码在图片上叠加,生成海报

小程序如何生成海报分享朋友圈

项目需求写完有一段时间了,但是还是想回过来总结一下,一是对项目的回顾优化等,二是对坑的地方做个记录,避免以后遇到类似的问题。利用微信强大的社交能力通过小程序达到裂变的目的,拉取新用户。

小程序如何在不同设备上自适应生成海报

小程序canvas的API并没有像其他的一样支持小程序独有的 rpx 自适应尺寸单位,在绘制内容时所应用的单位仍然是 px,那么如何实现不同尺寸屏幕的自适应呢?们的在开发中常用的参考屏幕尺寸(iPhone6)为:375*667;

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广