FabricJS 和 AngularJS – 获取和设置活动对象的阴影

Question

我正在扩展fabric.js kitchensink 的一些功能。我尝试获取和设置活动对象的阴影属性但没有成功，但我确信我错过了一些微不足道的东西。这就是我在我的 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

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 获取对象并将属性应用于阴影对象。