controls.render.js
3.69 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
(function(global) {
'use strict';
var fabric = global.fabric || (global.fabric = { }),
degreesToRadians = fabric.util.degreesToRadians,
controls = fabric.controlsUtils;
/**
* Render a round control, as per fabric features.
* This function is written to respect object properties like transparentCorners, cornerSize
* cornerColor, cornerStrokeColor
* plus the addition of offsetY and offsetX.
* @param {CanvasRenderingContext2D} ctx context to render on
* @param {Number} left x coordinate where the control center should be
* @param {Number} top y coordinate where the control center should be
* @param {Object} styleOverride override for fabric.Object controls style
* @param {fabric.Object} fabricObject the fabric object for which we are rendering controls
*/
function renderCircleControl (ctx, left, top, styleOverride, fabricObject) {
styleOverride = styleOverride || {};
var size = styleOverride.cornerSize || fabricObject.cornerSize,
transparentCorners = typeof styleOverride.transparentCorners !== 'undefined' ?
styleOverride.transparentCorners : this.transparentCorners,
methodName = transparentCorners ? 'stroke' : 'fill',
stroke = !transparentCorners && (styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor);
ctx.save();
ctx.fillStyle = styleOverride.cornerColor || fabricObject.cornerColor;
ctx.strokeStyle = styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor;
// this is still wrong
ctx.lineWidth = 1;
ctx.beginPath();
ctx.arc(left, top, size / 2, 0, 2 * Math.PI, false);
ctx[methodName]();
if (stroke) {
ctx.stroke();
}
ctx.restore();
}
/**
* Render a square control, as per fabric features.
* This function is written to respect object properties like transparentCorners, cornerSize
* cornerColor, cornerStrokeColor
* plus the addition of offsetY and offsetX.
* @param {CanvasRenderingContext2D} ctx context to render on
* @param {Number} left x coordinate where the control center should be
* @param {Number} top y coordinate where the control center should be
* @param {Object} styleOverride override for fabric.Object controls style
* @param {fabric.Object} fabricObject the fabric object for which we are rendering controls
*/
function renderSquareControl(ctx, left, top, styleOverride, fabricObject) {
styleOverride = styleOverride || {};
var size = styleOverride.cornerSize || fabricObject.cornerSize,
transparentCorners = typeof styleOverride.transparentCorners !== 'undefined' ?
styleOverride.transparentCorners : fabricObject.transparentCorners,
methodName = transparentCorners ? 'stroke' : 'fill',
stroke = !transparentCorners && (
styleOverride.cornerStrokeColor || fabricObject.cornerStrokeColor
), sizeBy2 = size / 2;
ctx.save();
ctx.fillStyle = styleOverride.cornerColor || fabricObject.cornerColor;
ctx.strokeStyle = styleOverride.strokeCornerColor || fabricObject.strokeCornerColor;
// this is still wrong
ctx.lineWidth = 1;
ctx.translate(left, top);
ctx.rotate(degreesToRadians(fabricObject.angle));
// this does not work, and fixed with ( && ) does not make sense.
// to have real transparent corners we need the controls on upperCanvas
// transparentCorners || ctx.clearRect(-sizeBy2, -sizeBy2, size, size);
ctx[methodName + 'Rect'](-sizeBy2, -sizeBy2, size, size);
if (stroke) {
ctx.strokeRect(-sizeBy2, -sizeBy2, size, size);
}
ctx.restore();
}
controls.renderCircleControl = renderCircleControl;
controls.renderSquareControl = renderSquareControl;
})(typeof exports !== 'undefined' ? exports : this);