在 Fabricjs 中缩放对象时更改控件填充颜色
Change control fill color while scaling object in Fabricjs
几天来,我一直在尝试更改缩放对象的控件的填充颜色。
这是我正在谈论的内容的 gif:
我想要一些有关如何实现此目标的指导。几天来我一直在研究 Fabricjs 文档,试图了解如何解决这个问题。
https://github.com/fabricjs/fabric.js/wiki/Working-with-events
我的理论是绑定到 mouse:down
和 mouse:up
事件。当 mouse:down
事件触发时,获取控件上下文并更改其填充颜色,当 mouse:up
事件触发时,恢复填充颜色。
不幸的是,我找不到任何允许我获取控制上下文的 fabricjs 方法。
http://fabricjs.com/docs/fabric.Canvas.html
http://fabricjs.com/docs/fabric.Object.html
canvas.on('mouse:down',(){
// Obtain control context and change fill
});
canvas.on('mouse:up',(){
// Obtain control context and restore fill
});
我正在使用 Fabricjs 版本 3.2.0
我覆盖了 fabric.Object
中的 _drawControl
。如您所见,我验证了 this.__corner
control
变量,如果相等,我将填充和描边颜色更改为红色。非常重要我在绘制控件后恢复了上下文
var canvas = new fabric.Canvas('fabriccanvas');
canvas.add(new fabric.Rect({
top: 50,
left: 50 ,
width: 100,
height: 100,
fill: '#' + (0x1000000 + (Math.random()) * 0xffffff).toString(16).substr(1, 6),
//fix attributes applied for all rects
cornerStyle:"circle",
originX: 'left',
originY: 'top',
transparentCorners:false
}));
fabric.Object.prototype._drawControl = function(control, ctx, methodName, left, top, styleOverride) {
styleOverride = styleOverride || {};
if (!this.isControlVisible(control)) {
return;
}
var size = this.cornerSize, stroke = !this.transparentCorners && this.cornerStrokeColor;
switch (styleOverride.cornerStyle || this.cornerStyle) {
case 'circle':
if(control == this.__corner){
ctx.save();
ctx.strokeStyle = ctx.fillStyle='red';
}
ctx.beginPath();
ctx.arc(left + size / 2, top + size / 2, size / 2, 0, 2 * Math.PI, false);
ctx[methodName]();
if (stroke) {
ctx.stroke();
}
if(control == this.__corner){
ctx.restore();
}
break;
default:
this.transparentCorners || ctx.clearRect(left, top, size, size);
ctx[methodName + 'Rect'](left, top, size, size);
if (stroke) {
ctx.strokeRect(left, top, size, size);
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.2.0/fabric.js"></script>
<br/>
<canvas id="fabriccanvas" width="600" height="200" style="border:1px solid #ccc"></canvas>
几天来,我一直在尝试更改缩放对象的控件的填充颜色。
这是我正在谈论的内容的 gif:
我想要一些有关如何实现此目标的指导。几天来我一直在研究 Fabricjs 文档,试图了解如何解决这个问题。
https://github.com/fabricjs/fabric.js/wiki/Working-with-events
我的理论是绑定到 mouse:down
和 mouse:up
事件。当 mouse:down
事件触发时,获取控件上下文并更改其填充颜色,当 mouse:up
事件触发时,恢复填充颜色。
不幸的是,我找不到任何允许我获取控制上下文的 fabricjs 方法。
http://fabricjs.com/docs/fabric.Canvas.html
http://fabricjs.com/docs/fabric.Object.html
canvas.on('mouse:down',(){
// Obtain control context and change fill
});
canvas.on('mouse:up',(){
// Obtain control context and restore fill
});
我正在使用 Fabricjs 版本 3.2.0
我覆盖了 fabric.Object
中的 _drawControl
。如您所见,我验证了 this.__corner
control
变量,如果相等,我将填充和描边颜色更改为红色。非常重要我在绘制控件后恢复了上下文
var canvas = new fabric.Canvas('fabriccanvas');
canvas.add(new fabric.Rect({
top: 50,
left: 50 ,
width: 100,
height: 100,
fill: '#' + (0x1000000 + (Math.random()) * 0xffffff).toString(16).substr(1, 6),
//fix attributes applied for all rects
cornerStyle:"circle",
originX: 'left',
originY: 'top',
transparentCorners:false
}));
fabric.Object.prototype._drawControl = function(control, ctx, methodName, left, top, styleOverride) {
styleOverride = styleOverride || {};
if (!this.isControlVisible(control)) {
return;
}
var size = this.cornerSize, stroke = !this.transparentCorners && this.cornerStrokeColor;
switch (styleOverride.cornerStyle || this.cornerStyle) {
case 'circle':
if(control == this.__corner){
ctx.save();
ctx.strokeStyle = ctx.fillStyle='red';
}
ctx.beginPath();
ctx.arc(left + size / 2, top + size / 2, size / 2, 0, 2 * Math.PI, false);
ctx[methodName]();
if (stroke) {
ctx.stroke();
}
if(control == this.__corner){
ctx.restore();
}
break;
default:
this.transparentCorners || ctx.clearRect(left, top, size, size);
ctx[methodName + 'Rect'](left, top, size, size);
if (stroke) {
ctx.strokeRect(left, top, size, size);
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.2.0/fabric.js"></script>
<br/>
<canvas id="fabriccanvas" width="600" height="200" style="border:1px solid #ccc"></canvas>