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

Question

我正在扩展具有某些功能的fabric.js kitchensink。我尝试获取并设置Active对象没有成功的阴影属性，但我敢肯定我缺少一些微不足道的东西。这就是我在控制器中所做的。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();
};

这在工作（就像在KitchenSink示例中一样）

获取/设置阴影：

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

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'
}))

canvas {
 border: blue dotted 2px;
}

<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>

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