Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Give a way to draw controls programmatically #3887

Merged
merged 6 commits into from
Apr 29, 2017
Merged

Give a way to draw controls programmatically #3887

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
74eae9d
changes to control rendering
asturur Apr 25, 2017
242f954
changes
asturur Apr 25, 2017
853892d
moved render all after the events
asturur Apr 26, 2017
1230d5f
Merge branch 'master' into control_test
asturur Apr 29, 2017
96d2ee0
more changes
asturur Apr 29, 2017
c242575
removed console.log
asturur Apr 29, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions src/canvas.class.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1608,11 +1608,13 @@
* @private
*/
_drawObjectsControls: function(ctx) {
var object;
for (var i = 0, len = this._objects.length; i < len; ++i) {
if (!this._objects[i] || !this._objects[i].active) {
object = this._objects[i];
if (!object || !object.active) {
continue;
}
this._objects[i]._renderControls(ctx);
object._renderControls(ctx);
}
},

Expand Down
70 changes: 33 additions & 37 deletions src/mixins/object_interactivity.mixin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,22 +136,20 @@
* Requires public properties: width, height
* Requires public options: padding, borderColor
* @param {CanvasRenderingContext2D} ctx Context to draw on
* @param {Object} bordersStyle object to override the object style
* @return {fabric.Object} thisArg
* @chainable
*/
drawBorders: function(ctx) {
if (!this.hasBorders) {
return this;
}

drawBorders: function(ctx, bordersStyle) {
bordersStyle = bordersStyle || {};
var wh = this._calculateCurrentDimensions(),
strokeWidth = 1 / this.borderScaleFactor,
width = wh.x + strokeWidth,
height = wh.y + strokeWidth;

ctx.save();
ctx.strokeStyle = this.borderColor;
this._setLineDash(ctx, this.borderDashArray, null);
ctx.strokeStyle = bordersStyle.borderColor || this.borderColor;
this._setLineDash(ctx, bordersStyle.borderDashArray || this.borderDashArray, null);

ctx.strokeRect(
-width / 2,
Expand All @@ -160,7 +158,8 @@
height
);

if (this.hasRotatingPoint && this.isControlVisible('mtr') && !this.get('lockRotation') && this.hasControls) {
if (bordersStyle.hasRotatingPoint ||
this.hasRotatingPoint && this.isControlVisible('mtr') && !this.get('lockRotation') && this.hasControls) {

var rotateHeight = -height / 2;

Expand All @@ -181,14 +180,12 @@
* Requires public options: padding, borderColor
* @param {CanvasRenderingContext2D} ctx Context to draw on
* @param {object} options object representing current object parameters
* @param {Object} bordersStyle object to override the object style
* @return {fabric.Object} thisArg
* @chainable
*/
drawBordersInGroup: function(ctx, options) {
if (!this.hasBorders) {
return this;
}

drawBordersInGroup: function(ctx, options, bordersStyle) {
bordersStyle = bordersStyle || {};
var p = this._getNonTransformedDimensions(),
matrix = fabric.util.customTransformMatrix(options.scaleX, options.scaleY, options.skewX),
wh = fabric.util.transformPoint(p, matrix),
Expand All @@ -197,8 +194,8 @@
height = wh.y + strokeWidth;

ctx.save();
this._setLineDash(ctx, this.borderDashArray, null);
ctx.strokeStyle = this.borderColor;
this._setLineDash(ctx, bordersStyle.borderDashArray || this.borderDashArray, null);
ctx.strokeStyle = bordersStyle.borderColor || this.borderColor;

ctx.strokeRect(
-width / 2,
Expand All @@ -216,77 +213,75 @@
* Requires public properties: width, height
* Requires public options: cornerSize, padding
* @param {CanvasRenderingContext2D} ctx Context to draw on
* @param {Object} controlsStyle object to override the object style
* @return {fabric.Object} thisArg
* @chainable
*/
drawControls: function(ctx) {
if (!this.hasControls) {
return this;
}

drawControls: function(ctx, controlsStyle) {
controlsStyle = controlsStyle || {};
var wh = this._calculateCurrentDimensions(),
width = wh.x,
height = wh.y,
scaleOffset = this.cornerSize,
scaleOffset = controlsStyle.cornerSize || this.cornerSize,
left = -(width + scaleOffset) / 2,
top = -(height + scaleOffset) / 2,
methodName = this.transparentCorners ? 'stroke' : 'fill';
methodName = controlsStyle.transparentCorners || this.transparentCorners ? 'stroke' : 'fill';

ctx.save();
ctx.strokeStyle = ctx.fillStyle = this.cornerColor;
ctx.strokeStyle = ctx.fillStyle = controlsStyle.cornerColor || this.cornerColor;
if (!this.transparentCorners) {
ctx.strokeStyle = this.cornerStrokeColor;
ctx.strokeStyle = controlsStyle.cornerStrokeColor || this.cornerStrokeColor;
}
this._setLineDash(ctx, this.cornerDashArray, null);
this._setLineDash(ctx, controlsStyle.cornerDashArray || this.cornerDashArray, null);

// top-left
this._drawControl('tl', ctx, methodName,
left,
top);
top, controlsStyle);

// top-right
this._drawControl('tr', ctx, methodName,
left + width,
top);
top, controlsStyle);

// bottom-left
this._drawControl('bl', ctx, methodName,
left,
top + height);
top + height, controlsStyle);

// bottom-right
this._drawControl('br', ctx, methodName,
left + width,
top + height);
top + height, controlsStyle);

if (!this.get('lockUniScaling')) {

// middle-top
this._drawControl('mt', ctx, methodName,
left + width / 2,
top);
top, controlsStyle);

// middle-bottom
this._drawControl('mb', ctx, methodName,
left + width / 2,
top + height);
top + height, controlsStyle);

// middle-right
this._drawControl('mr', ctx, methodName,
left + width,
top + height / 2);
top + height / 2, controlsStyle);

// middle-left
this._drawControl('ml', ctx, methodName,
left,
top + height / 2);
top + height / 2, controlsStyle);
}

// middle-top-rotate
if (this.hasRotatingPoint) {
if (controlsStyle.hasRotatingPoint || this.hasRotatingPoint) {
this._drawControl('mtr', ctx, methodName,
left + width / 2,
top - this.rotatingPointOffset);
top - this.rotatingPointOffset, controlsStyle);
}

ctx.restore();
Expand All @@ -297,12 +292,13 @@
/**
* @private
*/
_drawControl: function(control, ctx, methodName, left, top) {
_drawControl: function(control, ctx, methodName, left, top, controlStyle) {
controlStyle = controlStyle || {};
if (!this.isControlVisible(control)) {
return;
}
var size = this.cornerSize, stroke = !this.transparentCorners && this.cornerStrokeColor;
switch (this.cornerStyle) {
switch (controlStyle.cornerStyle || this.cornerStyle) {
case 'circle':
ctx.beginPath();
ctx.arc(left + size / 2, top + size / 2, size / 2, 0, 2 * Math.PI, false);
Expand Down
6 changes: 4 additions & 2 deletions src/shapes/group.class.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -380,8 +380,10 @@
ctx.save();
ctx.globalAlpha = this.isMoving ? this.borderOpacityWhenMoving : 1;
this.callSuper('_renderControls', ctx, noTransform);
for (var i = 0, len = this._objects.length; i < len; i++) {
this._objects[i]._renderControls(ctx);
if (this.canvas && this === this.canvas.getActiveGroup()) {
for (var i = 0, len = this._objects.length; i < len; i++) {
this._objects[i]._renderControls(ctx);
}
}
ctx.restore();
},
Expand Down
16 changes: 7 additions & 9 deletions src/shapes/object.class.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1308,17 +1308,15 @@
* Renders controls and borders for the object
* @param {CanvasRenderingContext2D} ctx Context to render on
*/
_renderControls: function(ctx) {
if (!this.active || (this.group && this.group !== this.canvas.getActiveGroup())) {
return;
}

_renderControls: function(ctx, bordersStyle, controlsStyle) {
var vpt = this.getViewportTransform(),
matrix = this.calcTransformMatrix(),
options;
matrix = fabric.util.multiplyTransformMatrices(vpt, matrix);
options = fabric.util.qrDecompose(matrix);

if (controlsStyle && bordersStyle) {
bordersStyle.hasRotatingPoint = controlsStyle.hasRotatingPoint;
}
ctx.save();
ctx.translate(options.translateX, options.translateY);
ctx.lineWidth = 1 * this.borderScaleFactor;
Expand All @@ -1327,13 +1325,13 @@
}
if (this.group && this.group === this.canvas.getActiveGroup()) {
ctx.rotate(degreesToRadians(options.angle));
this.drawBordersInGroup(ctx, options);
(this.hasBorders || bordersStyle) && this.drawBordersInGroup(ctx, options, bordersStyle);
}
else {
ctx.rotate(degreesToRadians(this.angle));
this.drawBorders(ctx);
(this.hasBorders || bordersStyle) && this.drawBorders(ctx, bordersStyle);
}
this.drawControls(ctx);
(this.hasControls || controlsStyle) && this.drawControls(ctx, controlsStyle);
ctx.restore();
},

Expand Down