亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

在fabricjs中將對象與畫布對齊

在fabricjs中將對象與畫布對齊

收到一只叮咚 2022-07-08 18:26:32
我正在嘗試實現對象對齊（即上 - 下 - 左 - 右 - CenterH - CenterV）我的代碼運行良好，但我不知道如何在對象旋轉時處理對齊（使用提供的代碼的一部分當角度不等于 0 時對象消失，我想知道如何計算最小左偏移量才能仍然看到整個旋轉的對象）。我的代碼如下。var canvas = new fabric.Canvas('a');canvas.add(new fabric.Rect({  left: 50,  top: 50,  height: 50,  width: 50,  fill: 'red'}));canvas.add(new fabric.Rect({  angle: 76,  left: 180,  top: 50,  height: 50,  width: 50,  fill: 'green'}));canvas.add(new fabric.Rect({  left: 90,  top: 130,  height: 50,  width: 50,  fill: 'blue'}));canvas.renderAll();$('.alignment').click(function() {  var cur_value = $(this).attr('data-action');  var activeObj = canvas.getActiveObject() || canvas.getActiveGroup();  if (cur_value != '' && activeObj) {    process_align(cur_value, activeObj);    activeObj.setCoords();    canvas.renderAll();  } else {    alert('Please select a item');    return false;  }});/* Align the selected object */function process_align(val, activeObj) {  switch (val) {    case 'left':      activeObj.set({        left: 0      });      break;    case 'right':      activeObj.set({        left: canvas.width - (activeObj.width * activeObj.scaleX)      });      break;    case 'top':      activeObj.set({        top: 0      });      break;    case 'bottom':      activeObj.set({        top: canvas.height - (activeObj.height * activeObj.scaleY)      });      break;    case 'centerH':      activeObj.set({        left: (canvas.width / 2) - ((activeObj.width * activeObj.scaleX) / 2)      });      break;    case 'centerV':      activeObj.set({        top: (canvas.height / 2) - ((activeObj.height * activeObj.scaleY) / 2)      });      break;  }}我如何更新代碼才能對齊旋轉的對象？（檢查綠色矩形上的對齊方式）
查看完整描述

2 回答

?
郎朗坤

TA貢獻1921條經驗 獲得超9個贊

因此，正如@HelderSepulveda建議我使用 aCoords 來動態計算坐標一樣，我將在下面粘貼工作代碼以防萬一。


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

canvas.add(new fabric.Rect({

  left: 50,

  top: 50,

  height: 50,

  width: 50,

  fill: 'red'

}));

canvas.add(new fabric.Rect({

  angle: 76,

  left: 180,

  top: 50,

  height: 50,

  width: 50,

  fill: 'green'

}));

canvas.add(new fabric.Rect({

  left: 90,

  top: 130,

  height: 50,

  width: 50,

  fill: 'blue'

}));


canvas.renderAll();


$('.alignment').click(function() {

  var cur_value = $(this).attr('data-action');

  var activeObj = canvas.getActiveObject() || canvas.getActiveGroup();

  if (cur_value != '' && activeObj) {

    process_align(cur_value, activeObj);

    activeObj.setCoords();

    canvas.renderAll();

  } else {

    alert('Please select a item');

    return false;

  }

});


/* Align the selected object */

function process_align(val, activeObj) {

  switch (val) {


    case 'left':

      var left;

      if(activeObj.angle <= 90) {

        left = activeObj.aCoords.tl.x - activeObj.aCoords.bl.x;

      }

      if(activeObj.angle > 90 && activeObj.angle <= 180) {

        left = activeObj.aCoords.tl.x - activeObj.aCoords.br.x;

      }

      if(activeObj.angle > 180 && activeObj.angle <= 270) {

        left = activeObj.aCoords.tl.x - activeObj.aCoords.tr.x;

      }

      if(activeObj.angle > 270) {

        left = 0;

      }

      activeObj.set({

        left: left

      });

      break;

    case 'right':

      var left;

      if(activeObj.angle <= 90) {

        left = activeObj.aCoords.tl.x + (canvas.width - activeObj.aCoords.tr.x);

      }

      if(activeObj.angle > 90 && activeObj.angle <= 180) {

        left = canvas.width;

      }

      if(activeObj.angle > 180 && activeObj.angle <= 270) {

        left = activeObj.aCoords.tl.x + (canvas.width - activeObj.aCoords.bl.x);

      }

      if(activeObj.angle > 270) {

        left = activeObj.aCoords.tl.x + (canvas.width - activeObj.aCoords.br.x);

      }

      activeObj.set({

        left: left

      });

      break;

    case 'top':

      var top;

      if(activeObj.angle <= 90) {

        top = 0;

      }

      if(activeObj.angle > 90 && activeObj.angle <= 180) {

        top = activeObj.aCoords.tl.y - activeObj.aCoords.bl.y;

      }

      if(activeObj.angle > 180 && activeObj.angle <= 270) {

        top = activeObj.aCoords.tl.y - activeObj.aCoords.br.y;

      }

      if(activeObj.angle > 270) {

        top = activeObj.aCoords.tl.y - activeObj.aCoords.tr.y;

      }

      activeObj.set({

        top: top

      });

      break;

    case 'bottom':

      var top;

      if(activeObj.angle <= 90) {

        top = activeObj.aCoords.tl.y + (canvas.height - activeObj.aCoords.br.y);

      }

      if(activeObj.angle > 90 && activeObj.angle <= 180) {

        top = activeObj.aCoords.tl.y + (canvas.height - activeObj.aCoords.tr.y);

      }

      if(activeObj.angle > 180 && activeObj.angle <= 270) {

        top = canvas.height;

      }

      if(activeObj.angle > 270) {

        top = activeObj.aCoords.tl.y + (canvas.height - activeObj.aCoords.bl.y);

      }

      activeObj.set({

        top: top

      });

      break;

    case 'centerH':

      activeObj.viewportCenterH();

      break;

    case 'centerV':

      activeObj.viewportCenterV();

      break;

  }

}

canvas {

  border: 2px solid black;

}

<script

  src="https://code.jquery.com/jquery-2.2.4.min.js"

  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="

  crossorigin="anonymous"></script>

<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.19/fabric.js"></script>

<button class="alignment" data-action="left">Align Left</button>

<button class="alignment" data-action="centerH">Align CenterH</button>

<button class="alignment" data-action="centerV">Align CenterV</button>

<button class="alignment" data-action="right">Align Right</button>

<button class="alignment" data-action="top">Align Top</button>

<button class="alignment" data-action="bottom">Align Bottom</button>

<canvas id="a" width="400" height="200"></canvas>


查看完整回答
反對 回復 2022-07-08
?
鴻蒙傳說

TA貢獻1865條經驗 獲得超7個贊

看看這種方法，animate如果任何角點超出畫布的邊界，我會使用一個很好的中止選項來停止，我剛剛在 chrome 上進行了測試并簡化了刪除中心對齊，您可以添加以后如果你需要。


function move(obj, prop, value) {

    obj.saveState();

    obj.animate(prop, value, {

        duration: 1000,

        onChange: canvas.renderAll.bind(canvas),

        onComplete: canvas.renderAll.bind(canvas),

        easing: fabric.util.ease["easeOutQuad"],

        abort: function () {

            obj.setCoords();

            for (const prop in obj.aCoords) {

                point = obj.aCoords[prop]

                if (point.x <= 0 || point.x >= canvas.width ||

                    point.y <= 0 || point.y >= canvas.height) {

                    obj.left = obj._stateProperties.left;

                    obj.top = obj._stateProperties.top;

                    return true

                }

            }

            obj.saveState();

        }

    });

}


function process_align(val, obj) {

    switch (val) {

        case 'left':

            move(obj, 'left', 1);

            break;

        case 'right':

            move(obj, 'left', canvas.width - 1);

            break;

        case 'top':

            move(obj, 'top', 1);

            break;

        case 'bottom':

            move(obj, 'top', canvas.height - 1);

            break;

    }

}


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

canvas.stateful = true;

canvas.add(new fabric.Rect({ left: 50, top: 50, height: 50, width: 50, fill: 'red' }));

canvas.add(new fabric.Rect({ angle: 76, left: 240, top: 50, height: 50, width: 50, fill: 'green' }));

canvas.add(new fabric.Rect({ left: 120, top: 100, height: 50, width: 50, fill: 'blue' }));

canvas.renderAll();


$('.alignment').click(function () {

    var cur_value = $(this).attr('data-action');

    var activeObj = canvas.getActiveObject() || canvas.getActiveGroup();

    if (cur_value != '' && activeObj) {

        process_align(cur_value, activeObj);

        activeObj.setCoords();

        canvas.renderAll();

    } else {

        alert('Please select a item');

        return false;

    }

});

canvas {

  border: 2px solid black;

}

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>

<script type='text/javascript' src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.19/fabric.js"></script>


<button class="alignment" data-action="left">Align Left</button>

<button class="alignment" data-action="right">Align Right</button>

<button class="alignment" data-action="top">Align Top</button>

<button class="alignment" data-action="bottom">Align Bottom</button>

<canvas id="a" width="400" height="160"></canvas>

您可以從中選擇一些動畫緩動：http:
//fabricjs.com/animation-easing

查看完整回答
反對 回復 2022-07-08
  • 2 回答
  • 0 關注
  • 336 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號