Установка четной тени для добавленного изображения

1

Я использую fabric.js для манипулирования изображениями, добавленными на мой холст. У меня есть тень, но я бы хотел, чтобы она была даже вокруг изображения. Теперь у меня есть ниже, но вот то, что я пытаюсь воспроизвести с добавленными изображениями. Что я делаю неправильно, потому что тень не отображается?

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: 'rgba(0,0,0,0.6)',
        blur: 20,
        offsetX: 0,
        offsetY: 0,
        opacity: 0.6,
        fillShadow: true,
        strokeShadow: true
      }

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

oImg.setShadow(shadow);
canvas {
  border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
<input type="file" id="file">
<br />
<br>
<canvas id="canvas" width="200" height="200"></canvas>
Теги:
fabricjs

2 ответа

2
Лучший ответ

Если загруженное изображение представляет собой png, оно будет показывать эффект границам, для других он будет действовать на границу, вы можете использовать affectStroke который также повлияет на штрих. Вот документ.

DEMO

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: 'rgba(0,0,0,0.6)',
        blur: 20,
        offsetX: 20,
        offsetY: 20,
        affectStroke: true
      }

      var oImg = img.set({
        left: 0,
        top: 0,
        stroke: 'black',
        strokeWidth: 10
      }).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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
<input type="file" id="file">
<br />
<br>
<canvas id="canvas" width="400" height="400"></canvas>
Поделиться
  • 0
    Понятно, что нет способа сделать это равномерно, как в связанном примере?
  • 0
    @codeforever его применение к изображению.
Показать ещё 3 комментария
1

Ваша тень на самом деле отображается, прямо за объектом. Если вы измените offsetX или offsetY, вы увидите его. Как здесь

var shadow = {
    color: 'rgba(0,0,0,0.6)',
    blur: 20,    
    offsetX: 50,
    offsetY: 50,
    opacity: 0.6,
    fillShadow: true, 
    strokeShadow: true 
}

http://jsfiddle.net/5KKQ2/2565/

Существует также проблема https://github.com/kangax/fabric.js/issues/1214 о размере тени, но она еще не завершена. Надеюсь, поможет.

Поделиться
  • 0
    Спасибо за это, это действительно так! Таким образом, вы не думаете, что есть способ добиться равномерной тени вокруг загруженной фотографии, как в примере с прямоугольником?
  • 1
    Кажется, мы можем контролировать только shadowOffsetX shadowOffsetY shadowColor shadowBlur эти свойства. Итак, я предлагаю вам написать о проблеме на Github, которая вас заинтересует, возможно, разработчики фабрики будут ее реализовывать, в противном случае подумайте об изменении концепции вашей задачи, возможно, вы сможете реализовать нечто подобное, но это будет проще.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню