FabricJS和AngularJS - 在活动对象上获取和设置阴影

Question

我正在使用某些功能扩展fabric.js个厨房。我尝试获取并设置活动对象阴影属性但没有成功，但我确信我错过了一些微不足道的东西。这就是我在我的controllers.js中所做的：

在所选对象上设置/启用阴影：

$scope.shadowify = function () {
    var obj = canvas.getActiveObject();
    if (!obj) return;

    if (obj.shadow) {
        obj.shadow = null;
    } else {
        obj.setShadow({
            color: "#000000",
            blur: 10,
            offsetX: 10,
            offsetY: 10
        });
    }
    canvas.renderAll();
};

这是有效的（就像在厨房的例子中那样）

获取/设置阴影：

function getActiveShadow(name) {
    var object = canvas.getActiveObject();
    if (!object) return '';

    return object[name] || '';
}

function setActiveShadow(name, value) {
    var object = canvas.getActiveObject();
    if (!object) return;
    object.setShadow(name, value);
    object.setCoords();
    canvas.renderAll();
}

和

$scope.setShadowOffsetX = function (value) {
    setActiveShadow('offsetX', value);
    canvas.renderAll();
};


$scope.setShadowOffsetY = function (value) {
    setActiveShadow('offsetY', value);
    canvas.renderAll();
};

$scope.setShadowBlur = function (value) {
    setActiveShadow('blur', value);
    canvas.renderAll();
};

$scope.setShadowColor = function (value) {
    setActiveShadow('color', value);
    canvas.renderAll();
    console.log, (value);
};

这是我的HTML中用于将值绑定到输入的一些示例代码：

<input type="color" 
       id="shadC" 
       value="#455A64" 
       class="small" 
       bind-value-to="shadowColor" 
       ng-model="shadC">


<input type="number" 
       class="small" 
       ng-value="10" 
       id="shadX" 
       skin="condensed" 
       bind-value-to="shadowOffsetX" 
       ng-model="offsetX">

不知道那里发生了什么 - 当我改变输入中的值时，整个阴影消失了。这种方法非常适用于宽度/高度等基本对象设置。所以我希望我做错了真是微不足道。

Answer 1

＆＃13;

＆＃13;

function getActiveShadow(name) {
    var object = canvas.getActiveObject();
    if (!object) return '';

    return object[name] || '';
}

function setActiveShadow(name, value) {

    var object = canvas.getActiveObject();
    if (!object) return;
    if(object.shadow)
     object.shadow[name] = value;
    else{
     var ob = {};
     ob[name] = value;
     object.setShadow(ob);
    }
    
    object.setCoords();
}
var offsetXVal = 10;
var setShadowOffsetX = function (value) {
    value = offsetXVal+=5;
    setActiveShadow('offsetX', value);
    canvas.renderAll();
};

var offsetYVal = 10;
var setShadowOffsetY = function (value) {
    value = offsetYVal+=5;
    setActiveShadow('offsetY', value);
    canvas.renderAll();
};
var offBlurVal = 10;
var setShadowBlur = function (value) {
    value =  offBlurVal += 5;
    setActiveShadow('blur', value);
    canvas.renderAll();
};

var setShadowColor = function (value) {
    value = 'blue';
    setActiveShadow('color', value);
    canvas.renderAll();
};

var shadowify = function () {
    var obj = canvas.getActiveObject();
    if (!obj) return;

    if (obj.shadow) {
        obj.shadow = null;
    } else {
        obj.setShadow({
            color: "#000000",
            blur: 10,
            offsetX: 10,
            offsetY: 10
        });
    }
    canvas.renderAll();
};

var canvas = new fabric.Canvas('c');
canvas.add(new fabric.Rect({
  left:50,
  top:50,
  width:100,
  height:100,
  fill:'blue'

}))

＆＃13;

canvas {
 border: blue dotted 2px;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.18/fabric.min.js"></script>
<button onclick='shadowify()'>shadowify</button>
<button onclick='setShadowOffsetX()'>setShadowOffsetX</button>
<button onclick='setShadowOffsetY()'>setShadowOffsetY</button>
<button onclick='setShadowBlur()'>setShadowBlur</button>
<button onclick='setShadowColor()'>setShadowColor</button>
<canvas id="c" width="400" height="400"></canvas><br>

＆＃13;

＆＃13;

＆＃13;

setShadow创建一个fabric.Shadow的对象，因此当您想要更改属性时，只需使用object.shadow获取对象并将属性应用于阴影对象。