在jQuery中触发事件并在fabricjs（或js）中监听它

Posted 2023-03-25

【中文标题】在jQuery中触发事件并在fabricjs（或js）中监听它

【英文标题】：trigger event in jQuery and listen to it in fabricjs (or js)

【发布时间】：2021-04-21 08:26:45

【问题描述】：

我需要一些方法来触发事件并在 FabricJs 中监听它。 这个想法是使用jQuery 选择器我得到元素，当有人点击这些元素中的任何一个时，fabricjs 应该改变画布背景。

    $('#background-selector .background-img img').on("click", (el) => 
        // so here I need to trigger event and also pass el.data to the event
        // el.data contains image name that should be used to change canvas background
    );

我是 fabricjs 和 javascript（没有 jquery）的新手，所以需要一些指导，了解它们应该如何相互配合。

【参考方案1】：

我也是 fabric.js 的新手......因为你的问题，所以谢谢;）

花了一段时间才找到如何从画布外部触发事件。我使用 JavaScript new Event and .createEvent() 尝试了所有操作...但这只是失败了，因为“自定义事件”只能应用于 DOM 元素，而织物画布内的对象则不能。

所以.. 浏览 fabric.js 文档，我发现它们 handle some events 是从画布内的一个动作中触发的，但这不是我所需要的......虽然知道如何监听事件很有用。

我终于找到了observable namespace。它包括一个fire() 方法，该方法正是关于触发事件的。

然后，我在画布对象事件处理程序中阻止了如何在画布中进行更改“出现”。似乎画布本身的属性更改，使用像.setBackgroundImage() 这样的方法，需要回调来重新渲染，而画布对象的更改需要将对象重新添加到画布。

所以这是一个简单的演示，其中有两个 DOM 按钮：

一个传递图片网址 另一个改变矩形颜色

// create a wrapper around native canvas element (with id="c")
var canvas = new fabric.Canvas('c')
var render_callback = canvas.renderAll.bind(canvas)

// create a rectangle object
var rect = new fabric.Rect(
  left: 100,
  top: 100,
  fill: 'red',
  width: 20,
  height: 20
);

// "add" rectangle onto canvas
canvas.add(rect);

// ========================================
// Canvas object event handlers

rect.on('btn1_click', function(e) 
  console.log('custom event #1', e.data);
  
  // Change the fill color and re-add the object
  rect.set('fill', e.data)
  canvas.add(rect);
);

canvas.on('btn2_click', function(e) 
  console.log('custom event #2', e.data);
  
  // Set a background image,
  // the callback (2nd argument) is needed to re-render
  canvas.setBackgroundImage(e.data, render_callback)
);


// ========================================
// DOM event handlers for the buttons

$("#change_color").on("click", function()
  console.log($(this).data("color"))
  
  // Fire the canvas event and pass the image url
  rect.fire("btn1_click", data: $(this).data("color"))
)

$("#change_image").on("click", function()
  console.log($(this).data("img"))
  
  // Fire the canvas event and pass the image url
  canvas.fire("btn2_click", data: $(this).data("img"))
)

#c
  border: 1px solid lightgrey;

button
  margin: 2em 0;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.3.0/fabric.min.js"></script>

<canvas id="c" width=220 height=220></canvas>
<button id="change_color" data-color="blue">Click me to change the rect color</button>
<button id="change_image" data-img="https://via.placeholder.com/220x220.png">Click me to add an image</button>