请指导我修改 Fabricjs 以添加旋转的自定义图标。
我得到了一些答案,但效果不佳。
请告诉我仅更改特定旋转图标的代码。
最佳答案
像这样更改织物对象原型(prototype)“drawControls”。
这是一个例子,JSFiddle :
fabric.Object.prototype.drawControls = function (ctx) {
if (!this.hasControls) return this;
var size = this.cornerSize,
size2 = size / 2,
strokeWidth2 = ~~(this.strokeWidth / 2), // half strokeWidth rounded down
left = -(this.width / 2),
top = -(this.height / 2),
paddingX = this.padding / this.scaleX,
paddingY = this.padding / this.scaleY,
scaleOffsetY = size2 / this.scaleY,
scaleOffsetX = size2 / this.scaleX,
scaleOffsetSizeX = (size2 - size) / this.scaleX,
scaleOffsetSizeY = (size2 - size) / this.scaleY,
height = this.height,
width = this.width,
methodName = this.transparentCorners ? 'strokeRect' : 'fillRect';
ctx.save();
ctx.lineWidth = 1 / Math.max(this.scaleX, this.scaleY);
ctx.globalAlpha = this.isMoving ? this.borderOpacityWhenMoving : 1;
ctx.strokeStyle = ctx.fillStyle = this.cornerColor;
// top-left
this._drawControl('tl', ctx, methodName,
left - scaleOffsetX - strokeWidth2 - paddingX,
top - scaleOffsetY - strokeWidth2 - paddingY);
// top-right
this._drawControl('tr', ctx, methodName,
left + width - scaleOffsetX + strokeWidth2 + paddingX,
top - scaleOffsetY - strokeWidth2 - paddingY);
// bottom-left
this._drawControl('bl', ctx, methodName,
left - scaleOffsetX - strokeWidth2 - paddingX,
top + height + scaleOffsetSizeY + strokeWidth2 + paddingY);
// bottom-right
this._drawControl('br', ctx, methodName,
left + width + scaleOffsetSizeX + strokeWidth2 + paddingX,
top + height + scaleOffsetSizeY + strokeWidth2 + paddingY);
if (!this.get('lockUniScaling')) {
// middle-top
this._drawControl('mt', ctx, methodName,
left + width / 2 - scaleOffsetX,
top - scaleOffsetY - strokeWidth2 - paddingY);
// middle-bottom
this._drawControl('mb', ctx, methodName,
left + width / 2 - scaleOffsetX,
top + height + scaleOffsetSizeY + strokeWidth2 + paddingY);
// middle-right
this._drawControl('mr', ctx, methodName,
left + width + scaleOffsetSizeX + strokeWidth2 + paddingX,
top + height / 2 - scaleOffsetY);
// middle-left
this._drawControl('ml', ctx, methodName,
left - scaleOffsetX - strokeWidth2 - paddingX,
top + height / 2 - scaleOffsetY);
}
// middle-top-rotate
if (this.hasRotatingPoint) {
/*
We dont need old corner for rotate :)
this._drawControl('mtr', ctx, methodName,
left + width/2 - scaleOffsetX,
this.flipY
? (top + height + (this.rotatingPointOffset / this.scaleY) - this.cornerSize/this.scaleX/2 + strokeWidth2 + paddingY)
: (top - (this.rotatingPointOffset / this.scaleY) - this.cornerSize/this.scaleY/2 - strokeWidth2 - paddingY));
Draw rotate custom icon
*/
var rotate = new Image(), rotateLeft, rotateTop;
rotate.src = 'http://www.navifun.net/files/pins/tiny/Arrow-Rotate-Clockwise.png';
rotateLeft = left + width / 2 - scaleOffsetX;
rotateTop = this.flipY
? (top + height + (this.rotatingPointOffset / this.scaleY) - this.cornerSize / this.scaleX / 2 + strokeWidth2 + paddingY)
: (top - (this.rotatingPointOffset / this.scaleY) - this.cornerSize / this.scaleY / 2 - strokeWidth2 - paddingY);
ctx.drawImage(rotate, rotateLeft, rotateTop, size / this.scaleX, size / this.scaleY);
}
ctx.restore();
return this;
};
关于javascript - 我如何更改 fabricjs 中的旋转图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23210961/