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

tu vn

1 июля 2021 в 17:33

108

Я пытаюсь 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;
  }

и результат:

enter image description here

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)

melchiar

2 июля 2021 в 16:28

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

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

image.scaleToWidth(desiredWidth);

или

image.scaleToHeight(desiredWidth);

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

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

Поделиться Скопировать ссылку Скопировано

tu vn

2 июля 2021 в 17:56

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

melchiar

2 июля 2021 в 20:00

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

tu vn

3 июля 2021 в 01:51

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

melchiar

3 июля 2021 в 04:25

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

tu vn

3 июля 2021 в 18:00

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

melchiar

6 июля 2021 в 17:40

Если вы не возражаете против растяжения изображения, вы можете сделать что-то вроде этого. img.set('scaleX', требуемая ширина / ширина изображения)

tu vn

6 июля 2021 в 18:14

Большое спасибо, Мельхиар, это то, что я искал. это сработало