删除fabric.js中选定的对象开发者社区

link管理

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

狂野的松树 · 连接器发布阶段和时间线 - Azure ...· 2 月前 ·

朝气蓬勃的春卷 · Gerhard Brueckl – ...· 2 周前 ·

老实的充值卡 · 启辰D60冷车启动困难 - 买车网· 2 年前 ·

跑龙套的红烧肉 · 故宫鼓浪屿外国文物馆开设清凉市集 - 文体 ...· 2 年前 ·

好帅的冲锋衣 · 大叔我最爱这种。TV ...· 2 年前 ·

心软的茄子 · MySQL8.0 安装踩坑指南 - 掘金· 2 年前 ·

温暖的键盘 · psql error column of ...· 2 年前 ·

function Copy()
    canvas.getActiveObject().clone(function(cloned)
        _clipboard = cloned;
  function Delete() 
    canvas.getActiveObject().remove();
        function Paste() {
            _clipboard.clone(function(clonedObj) {
                canvas.discardActiveObject();
                clonedObj.set({
                    left: clonedObj.left + 10,
                    top: clonedObj.top + 10,
                    evented: true,
                if (clonedObj.type === 'activeSelection') {
                    clonedObj.canvas = canvas;
                    clonedObj.forEachObject(function(obj) {
                        canvas.add(obj);
                    clonedObj.setCoords();
                } else {
                    canvas.add(clonedObj);
                _clipboard.top += 10;
                _clipboard.left += 10;
                canvas.setActiveObject(clonedObj);
                canvas.requestRenderAll();
var canvas = this.__canvas = new fabric.Canvas('c');
var rect = new fabric.Rect({
    left: 100,
    top: 50,
    fill: '#D81B60',
    width: 100,
    height: 100,
    strokeWidth: 2,
    stroke: "#880E4F",
    rx: 10,
    ry: 10,
    angle: 45,
    hasControls: true
canvas.add(rect);

<div>
    <button type="button" onclick="Copy()">copy</button>
    <button type="button" onclick="Paste()">paste</button>
    <button type="button" onclick="Delete()">delete</button>
  <div style="display:flex;flex-direction:row;">
      <canvas id="c" width="1300" height="1300"></canvas>
  <script src="https://unpkg.com/[email protected]/dist/fabric.js"></script>

function Delete() {
  var active = canvas.getActiveObject()
  if (active) {
    canvas.remove(active)
    if (active.type == "activeSelection") {
      active.getObjects().forEach(x => canvas.remove(x))
      canvas.discardActiveObject().renderAll()
var canvas = this.__canvas = new fabric.Canvas('c');
var rect = new fabric.Rect({
  left: 100,
  top: 50,
  fill: '#D81B60',
  width: 100,
  height: 100,
  strokeWidth: 2,
  stroke: "#880E4F",
  rx: 10,
  ry: 10,
  angle: 45,
  hasControls: true
canvas.add(rect);
var rect2 = new fabric.Rect({
  left: 160,
  top: 10,
  fill: '#D81B60',
  width: 60,
  height: 60,
  strokeWidth: 2,
  stroke: "#880E4F",
  hasControls: true
canvas.add(rect2);

<div>
  <button type="button" onclick="Delete()">delete</button>
<div style="display:flex;flex-direction:row;">

问 删除fabric.js中选定的对象

回答 1

Stack Overflow用户