CODEWITHSUNDEEP
javascripthtmlfabricjs
Ricardo Rocha
Ricardo Rocha

Reputation: 16216

Fabric.js : Change one or multiple selection square/rectangle color

I'm working on a project that is using Fabric.js library. What I want is to know how can I change the square/rectangle that appears when you want to select one or multiple object.

Is the blue rectangle in the image below:

enter image description here

I'm already changing some styling like corners color of object selection, the borders colors and so one like this:

fabric.Object.prototype.selection = !HelperJSViewBag.getValue("isMobile") && true;
fabric.Object.prototype.selectionColor = HelperJSViewBag.getValue("selectionColor").length > 0 ? HelperJSViewBag.getValue("selectionColor") : 'rgba(255,119,0,0.3)';
fabric.Object.prototype.rotationCursor = HelperJSViewBag.getValue('cursor_rotacao').length > 0 ? HelperJSViewBag.getValue('cursor_rotacao') : "crosshair";
fabric.Object.prototype.cornerSize = HelperJSViewBag.getValue("isMobile") ? (HelperJSViewBag.getValue("containerCornerSizeMobile") > 0 ? HelperJSViewBag.getValue("containerCornerSizeMobile") : 14) : (HelperJSViewBag.getValue("containerCornerSize") > 0 ? HelperJSViewBag.getValue("containerCornerSize") : 10);
fabric.Object.prototype.cornerColor = HelperJSViewBag.getValue("containerCornerColor").length > 0 ? HelperJSViewBag.getValue("containerCornerColor") : '#eee';
fabric.Object.prototype.borderColor = fabric.Object.prototype.cornerColor;
fabric.Object.prototype.transparentCorners = false;
fabric.Object.prototype.borderScaleFactor = HelperJSViewBag.getValue("borderScaleFactor") > 0 ? HelperJSViewBag.getValue("borderScaleFactor") : 1;
fabric.Object.prototype.hasRotatingPoint = !HelperJSViewBag.getValue("isMobile") && true;
fabric.Object.prototype.rotatingPointOffset = HelperJSViewBag.getValue("isMobile") ? 20 : 35;

Upvotes: 3

Views: 1760

Answers (1)

Durga
Durga

Reputation: 15604

var canvas = new fabric.Canvas('canvas');
fabric.Canvas.prototype.set({
 selectionColor : 'rgba(255,0,0,0.3)',
 selectionBorderColor :  'rgba(0, 255, 0, 0.3)',
 selectionLineWidth : 10,
 selectionDashArray : [3,3]
});
canvas {
    border: 2px dotted green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.16/fabric.min.js"></script>
<canvas id="canvas" width="400" height="400"></canvas>

You can override those selection properties.

Upvotes: 5

Related Questions