CODEWITHSUNDEEP
fabricjs
HungryAlmond
HungryAlmond

Reputation: 21

How to hide all controls in fabric JS, and it should be look like svg

I need to hide all controls of fabric js when we click on fabric canvas ie: no move object or scale or anything , that canvas should be feel like a static webpage. your help will be apricated :) thank you.

Upvotes: 0

Views: 2312

Answers (2)

ruckie
ruckie

Reputation: 149

All you need is actually set property

hasControls: false

More here.

Upvotes: 1

A.D
A.D

Reputation: 374

I think there are two ways to do it

  1. Using class with pointer-events none to canvas element or canvas container and adding/removing that class when you want to enable or disable the events.
.disable-pointer-events{  pointer-events:none;}
  1. Using Object/Canvas class methods/properties to control selectable and cursor properties.
function enableStatic(){
   fabric.Object.prototype.selectable = false;
   fabric.Object.prototype.hoverCursor = "default";
}

or

 canvas.forEachObject((ob) => {
    ob.selectable = false;
    ob.hoverCursor="default";
 });

Here is the working demo for option 2 https://codepen.io/ad121/pen/MWGgXbX

Upvotes: 0

Related Questions