时间戳

首页 > 解决方案 > 在 Fabricjs 中缩放对象时更改控件填充颜色

fabricjs - 在 Fabricjs 中缩放对象时更改控件填充颜色

问题描述

几天来，我一直在尝试更改缩放对象的控件的填充颜色。

这是我正在谈论的内容的 GIF：

Fabricjs控制填充颜色

我想要一些关于如何实现这一目标的指导。几天来，我一直在研究 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

标签： fabricjsfabricjs2

解决方案

我覆盖了_drawControlfrom fabric.Object。如您所见，我验证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>

推荐阅读