Блог

Главная - Вопросы по программированию - Добавьте изображение на холст, но высота и ширина не соответствуют желаемым

Добавьте изображение на холст, но высота и ширина не соответствуют желаемым

#javascript #image #fabricjs

Вопрос:

Я стараюсь https://jsfiddle.net/natchiketa/xHYjz/ и моя функция :

   function addtesst() {
      var imgURL = 'http://i.imgur.com/8rmMZI3.jpg';
      var pugImg = new Image();
      pugImg.onload = function (img) {
          var pug = new fabric.Image(pugImg, {
              width: 800,
              height: 1000,
              left: 150,
              top: 170,
              scaleX: 0.41,
              scaleY: 0.42
          });
          canvas.add(pug);
      };
      pugImg.src = imgURL;
  }

и результат:

введите описание изображения здесь

 var imgURL = 'http://i.imgur.com/8rmMZI3.jpg';

var canvas = new fabric.Canvas('canvas');

var pugImg = new Image();
pugImg.onload = function (img) {    
    var pug = new fabric.Image(pugImg, {
        angle: 45,
        width: 500,
        height: 500,
        left: 50,
        top: 70,
        scaleX: .25,
        scaleY: .25
    });
    canvas.add(pug);
};
pugImg.src = imgURL; 
 #canvas {
    box-shadow: 0 0 5px 1px black;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.1.0/fabric.all.min.js"></script>
<canvas id="canvas" width="640" height="480"></canvas>

Как вы можете видеть, моя фотография не полная.
Пожалуйста, помогите мне найти проблему.
Спасибо.

Ответ №1:

Свойства width и height на самом деле не предназначены для этого. Они предназначены для установки количества пикселей исходного изображения, которое должно отображаться. Значения, превышающие размер исходного изображения, означают больший контейнер, а меньшие значения приводят к обрезке.

Вместо того чтобы напрямую задавать значения ширины, высоты, масштабирования и масштабирования, используйте эти два метода, чтобы задать размер изображения:

 image.scaleToWidth(desiredWidth);

или

 image.scaleToHeight(desiredWidth);

Если у вас есть конкретные размеры в виду, и вы не возражаете, чтобы ваш образ был растянут, вы также можете сделать это:

 image.set({
  'scaleX': desiredWidth / image.width,
  'scaleY': desiredHeight / image.height
});

Комментарии:

1. Спасибо тебе большое, мунк . Это работает, но когда я использовал scaleToWidth, то scaleToHeight не работал . Как они работают вместе?

2. вы должны использовать то или иное. При использовании scaleToWidth высота изображения изменится на правильную высоту для этого соотношения сторон, и наоборот с помощью scaleToHeight

3. Я хочу использовать и то, и другое. Потому что моя цель-перерисовать изображение заданной длины и ширины. С нетерпением жду ответа от вас

4. Вам не нужно будет использовать и то, и другое, чтобы получить нужный размер. Просто используйте один из них, чтобы установить правильные scaleX scaleY значения и. Затем просто отрегулируйте значение height или width по мере необходимости.

5. Спасибо, что терпеливо ответили на мой вопрос. Я попытался проследить за твоим ответом. Это правильно , но я имею в виду, что у меня есть scaleX и scaleY . После добавления изображения на холст ( используется scaleToHeight, и это правильно), но ширина будет переполнена шириной изображения. Я хочу , чтобы изображение всегда рисовалось в данном масштабе и Y, принимая изображение с искажением.

Метки: ,