仅在缩放或缩放时渲染 select 个对象？

Question

我有一个canvas，我在canvas上加了一个矩形。每个矩形都有一个唯一的 ID，我正在相应地进行处理。当我想更改我选择的矩形的颜色时，它不会直接渲染。当我增加或减少尺寸或缩放时它有效果。

如何让它直接行动？我猜rendering有问题。

var canvas = new fabric.Canvas('c');

canvas.setBackgroundImage('https://i.hizliresim.com/iBHC0t.jpg', canvas.renderAll.bind(canvas));
canvas.selection = false;
//var uniqid = "0";
var uniqids = 0;
$("#door").on("click", function(e) {
  var uniqid = uniqids.toString();
  rect = new fabric.Rect({
    id: uniqid,
    left: 40,
    top: 40,
    width: 35,
    height: 50,
    fill: 'blue',
    stroke: 'blue',
    strokeWidth: 5,
    strokeUniform: false,
    hasControls: true,
  });

  canvas.add(rect);
  uniqids++;


});
//*****************************
canvas.on('mouse:wheel', function(opt) {
  var delta = opt.e.deltaY;
  var zoom = canvas.getZoom();
  zoom *= 0.999 ** delta;
  if (zoom > 20) zoom = 20;
  if (zoom < 0.01) zoom = 0.01;
  canvas.setZoom(zoom);
  opt.e.preventDefault();
  opt.e.stopPropagation();

})




//***************************************

$("#save").on("click", function(e) {
  $(".save").html(canvas.toSVG());
});

$('#delete').click(function() {
  var activeObject = canvas.getActiveObjects();
  canvas.discardActiveObject();
  canvas.remove(...activeObject);
});

$("#btnResetZoom").on("click", function(e) {
  canvas.setViewportTransform([1, 0, 0, 1, 0, 0]);
});


canvas.on('mouse:wheel', function(opt) {
  var delta = opt.e.deltaY;
  var zoom = canvas.getZoom();
  zoom *= 0.999 ** delta;
  if (zoom > 20) zoom = 20;
  if (zoom < 0.01) zoom = 0.01;
  canvas.zoomToPoint({
    x: opt.e.offsetX,
    y: opt.e.offsetY
  }, zoom);
  opt.e.preventDefault();
  opt.e.stopPropagation();
});
var shiftKeyDown = true;
var mouseDownPoint = null;
canvas.on('mouse:move', function(options) {
  if (shiftKeyDown && mouseDownPoint) {
    var pointer = canvas.getPointer(options.e, true);
    var mouseMovePoint = new fabric.Point(pointer.x, pointer.y);
    canvas.relativePan(mouseMovePoint.subtract(mouseDownPoint));
    mouseDownPoint = mouseMovePoint;
    keepPositionInBounds(canvas);
  }
});


$('#getid').click(function() {
  var activeObject = canvas.getActiveObjects();
  alert(canvas.getActiveObject().id);
});

$("#changeColor").on("click", function(e) {
  document.getElementById("c").fabric = canvas;
  var tmpId = canvas.getActiveObject().id;
  var activeObject = canvas.getActiveObject();

  canvas.getObjects().forEach(function(o) {
    if (o.id == tmpId) {
      canvas.setActiveObject(o);
      activeObject.fill = '#fcba03';
      canvas.requestRenderAll();
    }

  })
});

#c {
  background-color: grey;
  margin-top: 10px;
}

button {
  padding: 10px 20px;
}

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


<button id="door">Add Rect</button>
<button id="delete">Delete Rect</button>
<button id="save">Save</button>
<button id="changeColor">ChangeColor</button>
<button id="getid">GET ID</button>

<p>Save bastıktan sonra altta SVG dosyası oluşur</p>
<br>
<canvas id="c" width="800" height="800"></canvas>
<br>
<p class="save">
</p>

Answer 1

objectCaching 机制 (more info) 感受到了这种变化。

If you want fabricJS to know that something changed and that a particular object needs to be redrawn, use the set method
rect.set('fill', 'red');
canvas.requestRenderAll();

所以，对于你来说

var canvas = new fabric.Canvas('c');

canvas.setBackgroundImage('https://i.hizliresim.com/iBHC0t.jpg', canvas.renderAll.bind(canvas));
canvas.selection = false;
//var uniqid = "0";
var uniqids = 0;
$("#door").on("click", function(e) {
  var uniqid = uniqids.toString();
  rect = new fabric.Rect({
    id: uniqid,
    left: 40,
    top: 40,
    width: 35,
    height: 50,
    fill: 'blue',
    stroke: 'blue',
    strokeWidth: 5,
    strokeUniform: false,
    hasControls: true,
  });

  canvas.add(rect);
  uniqids++;
});
//*****************************
canvas.on('mouse:wheel', function(opt) {
  var delta = opt.e.deltaY;
  var zoom = canvas.getZoom();
  zoom *= 0.999 ** delta;
  if (zoom > 20) zoom = 20;
  if (zoom < 0.01) zoom = 0.01;
  canvas.setZoom(zoom);
  opt.e.preventDefault();
  opt.e.stopPropagation();
})

//***************************************

$("#save").on("click", function(e) {
  $(".save").html(canvas.toSVG());
});

$('#delete').click(function() {
  var activeObject = canvas.getActiveObjects();
  canvas.discardActiveObject();
  canvas.remove(...activeObject);
});

$("#btnResetZoom").on("click", function(e) {
  canvas.setViewportTransform([1, 0, 0, 1, 0, 0]);
});

canvas.on('mouse:wheel', function(opt) {
  var delta = opt.e.deltaY;
  var zoom = canvas.getZoom();
  zoom *= 0.999 ** delta;
  if (zoom > 20) zoom = 20;
  if (zoom < 0.01) zoom = 0.01;
  canvas.zoomToPoint({
    x: opt.e.offsetX,
    y: opt.e.offsetY
  }, zoom);
  opt.e.preventDefault();
  opt.e.stopPropagation();
});
var shiftKeyDown = true;
var mouseDownPoint = null;
canvas.on('mouse:move', function(options) {
  if (shiftKeyDown && mouseDownPoint) {
    var pointer = canvas.getPointer(options.e, true);
    var mouseMovePoint = new fabric.Point(pointer.x, pointer.y);
    canvas.relativePan(mouseMovePoint.subtract(mouseDownPoint));
    mouseDownPoint = mouseMovePoint;
    keepPositionInBounds(canvas);
  }
});

$('#getid').click(function() {
  var activeObject = canvas.getActiveObjects();
  alert(canvas.getActiveObject().id);
});

$("#changeColor").on("click", function(e) {
  canvas.getActiveObject().set('fill', '#fcba03');
  canvas.requestRenderAll();
});

#c {
  background-color: grey;
  margin-top: 10px;
}

button {
  padding: 10px 20px;
}

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

<button id="door">Add Rect</button>
<button id="delete">Delete Rect</button>
<button id="save">Save</button>
<button id="changeColor">ChangeColor</button>
<button id="getid">GET ID</button>

<p>Save bastıktan sonra altta SVG dosyası oluşur</p>
<br>
<canvas id="c" width="800" height="800"></canvas>
<br>
<p class="save">
</p>

仅在缩放或缩放时渲染 select 个对象？

Render select object only while scaling or zoom?

javascript

html

css

fabricjs