I have a canvas window and there is an element that i want to programmatically add to it. If a user adds a background image, i want to be able to toggle a semi transparent overlay that makes the text above stand out more clearer and is the main focus instead of it being the image. I have gotten this to work but the problem is that the user can easily click on the overlay (which is just a rectangle) and move it. Is there a way to make is so that this rectangle or any object with fabricJS is completely disabled to the end users mouse and can only be controlled with JS code?
1 Answer
There are a few ways to make it work. I got it working before and turns out that a select all invalidates it. It was a bit tricky to make it so that you could not select a single shape. The following code is what I used to make it work.
var rect = new fabric.Rect({
top: 0,
left: 0,
fill: 'rgba(0,0,0,0.8)',
opacity: 0.6,
lockMovementX: true,
lockMovementY: true,
lockRotation: true,
lockUniScaling: true,
lockScalingY: true,
lockScalingX: true,
evented:false,
selectable: false
});
Related Questions
Set Wordpress Featured Image Using Javascript
How To Fix PHP Random Being The Same
Why no WebP Support with Wordpress
Replace Wordpress Cron With Linux Cron
Customize Yoast Canonical URL Programmatically
[Centos] Delete All Files And Folders That Contain a String