我正在开发一个使用 Fabric.js 的项目图书馆。我想知道如何更改当您想要选择一个或多个对象时出现的正方形/矩形。
就是下图中的蓝色矩形:
我已经更改了一些样式,例如对象选择的 Angular 颜色、边框颜色等等:
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;
最佳答案
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>
您可以覆盖这些选择属性。
关于javascript - Fabric.js : Change one or multiple selection square/rectangle color,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46444412/