时间: 2019-10-11阅读: 318标签: 海报简介

jquery插件select2事件不起作用

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

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

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

蕃薯耀 2015年10月8日 09:01:53 星期四

npm 安装

npminstallfabric--save

 

cdn引用

一、官网的说明:Version 4.0.0

scriptsrc=""/script// 貌似国外相对较慢

 

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

change is fired whenever an option is selected or removed.

初始化

select2:open is fired whenever the dropdown is
opened. select2:opening is fired before this and can be prevented.

创建了一个基本的画布

select2:close is fired whenever the dropdown is
closed. select2:closing is fired before this and can be prevented.

canvas width="350" height="200"/canvasconst card = new fabric.Canvas('canvas') // ...这里可以写canvas对象的一些配置,后面将会介绍// 如果canvas标签没设置宽高,可以通过js动态设置card.setWidth(350)card.setHeight(200)

select2:select is fired whenever a result is
selected. select2:selecting is fired before this and can be prevented.

对画布的交互

select2:unselect is fired whenever a result is
unselected. select2:unselecting is fired before this and can be
prevented.

常用监听事件如下:

 

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) })

 

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

  1. var
    $eventLog = $(“.js-event-log”);
  2. var
    $eventSelect = $(“.js-example-events”);
  3.  
  4. $eventSelect.on(“select2:open”,function(e){
    log(“select2:open”,
    e);});
  5. $eventSelect.on(“select2:close”,function(e){
    log(“select2:close”,
    e);});
  6. $eventSelect.on(“select2:select”,function(e){
    log(“select2:select”,
    e);});
  7. js9905com金沙网站 ,$eventSelect.on(“select2:unselect”,function(e){
    log(“select2:unselect”,
    e);});
  8.  
  9. $eventSelect.on(“change”,function(e){
    log(“change”);});

以下为常用的事件:

 

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

但是在实际应用中select2:close不起作用。

下面是原文,更多参考__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();});

这个原因找了很久都没有找到,昨天终于发现原因了:

向画布添加图层对象

$("#xxx").on("select2-close", function (e) {

});