как масштабировать изображение с помощью scalecontroler - PullRequest
Новая
       6

как масштабировать изображение с помощью scalecontroler

0 голосов
/ 01 октября 2018

Я не могу масштабировать изображение при перемещении контроллера масштаба.Он показывает следующую ошибку: 

Uncaught TypeError: canvas.requestRenderAll is not a function

Может кто-нибудь помочь решить эту проблему?Я хочу, чтобы функциональность была реализована для изображения, пожалуйста, обратитесь к this .Вот мой код: 

    <!DOCTYPE html>
    <html>
    <head>
      <title>Instagram</title>
      <script type="text/javascript" src="fabric.js-1.7.21/dist/fabric.min.js"></script>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <body>
        <canvas id="c" width="500px" height="400px"></canvas>
        <div id="range">
        <input type="range" class="image-scale-lever" step="0.1" max="3" min="0.1" value="1" id="scale-control"></label>
      </div>
      <script type="text/javascript">
       jQuery( document ).ready(function() {
        var canvas = this.__canvas = new fabric.Canvas('c');
          fabric.Image.fromURL('locket.png', function(oImg) {
            oImg.set({
          left: 0,
          top: 0,
          width:500,
          height:400
        });
            canvas.add(oImg);

             var scaleControl = $('#scale-control');
                   scaleControl.oninput = function(x) {
        this.val(x);
        oImg.scale(parseFloat(x)).setCoords();
        canvas.requestRenderAll();
              }

     function updateControls() {
                  scaleControl.oninput(oImg.scaleX);                          
            }

            canvas.observe("object:scaling", function (e) {
            updateControls();
    });
    });


    });


  [1]: https://withyoulockets.com/pub/media/catalog/product/cache/image/700x700/e9c3970ab036de70892d86c6d221abfe/k/a/katieopen1100px-min.png

1 Ответ

0 голосов
/ 02 октября 2018

Вот результат.Вам необходимо изменить масштаб объекта при обратном вызове события onchange. 

    <!DOCTYPE html>
    <html>
    <head>
      <title>Instagram</title>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.21/fabric.js"></script>
      <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script  type="text/javascript" >
  jQuery( document ).ready(function() {
        var canvas = this.__canvas = new fabric.Canvas('c');
          fabric.Image.fromURL('https://withyoulockets.com/pub/media/catalog/product/cache/image/700x700/e9c3970ab036de70892d86c6d221abfe/k/a/katieopen1100px-min.png', function(oImg) {
            oImg.set({
          left: 0,
          top: 0,
          width:500,
          height:400
        });
            canvas.add(oImg);

             var scaleControl = $('#scale-control');
                   scaleControl.on("change",function() {

         var newValue = this.value; 

        oImg.scale(parseFloat(newValue)).setCoords();
        canvas.renderAll();
              })

              function updateControls() {
                  scaleControl.oninput(oImg.scaleX);                          
            }

            canvas.observe("object:scaling", function (e) {
            updateControls();
    });
    });


    });
</script>
      <body>
        <canvas id="c" width="500px" height="400px"></canvas>
        <div id="range">
        <input type="range" class="image-scale-lever" step="0.1" max="3" min="0.1" value="1" id="scale-control"></label>
      </div>

Проверьте здесь: https://jsfiddle.net/3mjhxcyn/2/

...