2017-09-27 517 views
0

我正在使用Fabric.js库的项目。我想要的是知道如何更改当您想要选择一个或多个对象时出现的方形/矩形。Fabric.js:更改一个或多个选择方形/矩形的颜色

是下图中的蓝色矩形:

enter image description here

我已经改变了一些造型就像对象选择的角落颜色,边框颜色等一个这样的:

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; 
+0

你想做什么?改变盒子的颜色? – Durga

+0

我们有几个应用程序布局,每个布局都需要更改选择颜色。 –

回答

1

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>

您可以覆盖这些选择属性。

相关问题