使用fabric.js

Question

Thanks to @ℊααnd I was able to add stroke styling to images added to the canvas。我还希望在添加的任何图像上都有一个投影，以便更多地使用它们来堆叠＆＃34;看。我尝试过添加boxShadow：＆＃34; 5px 5px 20px 0px＃888888＆＃34;和taking queues from the documentation但我没有运气。我怎么做到这一点？ JS中的样式对我来说仍然是全新的。任何帮助将不胜感激。提前谢谢。

document.getElementById('file').addEventListener("change", function (e) {
var file = e.target.files[0];
var reader = new FileReader();
reader.onload = function (f) {
    var data = f.target.result;
    fabric.Image.fromURL(data, function (img) {
        var oImg = img.set({
            left: 0,
            top: 0,
            angle: 0,
            border: '#000',
            stroke: '#F0F0F0',
            strokeWidth: 40
        }).scale(0.2);
        canvas.add(oImg).renderAll();
        //var a = canvas.setActiveObject(oImg);
        var dataURL = canvas.toDataURL({
            format: 'png',
            quality: 1
        });
    });
};
reader.readAsDataURL(file);
});

我尝试将所有代码插入到代码段插件中，但出于某种原因，它并不想在那里运行。我认为以上是适用的。

Answer 1

你可以简单地创建一个阴影对象，就像这样......

 wv.setWebViewClient(new WebViewClient(){


        @Override
        public void onReceivedHttpError(WebView view, WebResourceRequest request, WebResourceResponse errorResponse) {
            wv.loadUrl(mypage_error);}

        //ProgressDialogue
        ProgressDialog pd = null;

        @Override
        public void onPageStarted(WebView view, String url, Bitmap favicon) {
            pd=new ProgressDialog(MainActivity.this);
            pd.setTitle("Please Wait..");
            pd.setMessage("Loading...");
            pd.show();

            super.onPageStarted(view, url, favicon);
                            }

        @Override
        public void onPageFinished(WebView view, String url) {
            pd.dismiss();
            super.onPageFinished(view, url);
                            }

然后，为图像对象设置它，就像这样......

var shadow = {
    color: '#888888',
    blur: 70,
    offsetX: 45,
    offsetY: 45,
    opacity: 0.8
}

<强>ᴅᴇᴍᴏ

oImg.setShadow(shadow);

var canvas = new fabric.Canvas('canvas');
document.getElementById('file').addEventListener("change", function (e) {
    var file = e.target.files[0];
    var reader = new FileReader();
    reader.onload = function (f) {
        var data = f.target.result;
        fabric.Image.fromURL(data, function (img) {
           
           //create shadow
            var shadow = {
                color: '#888888',
                blur: 70,
                offsetX: 45,
                offsetY: 45,
                opacity: 0.8
            }
           
           var oImg = img.set({
                left: 0,
                top: 0,
                angle: 0,
                stroke: '#222',
                strokeWidth: 40
            }).scale(0.2);
            oImg.setShadow(shadow); //set shadow
            canvas.add(oImg).renderAll();
            var dataURL = canvas.toDataURL({
                format: 'png',
                quality: 1
            });
        });
    };
    reader.readAsDataURL(file);
});

canvas {border: 1px solid black;}