个人中心
gpt4 book ai didi

javascript - 为什么选择fabricjs后top和left属性变成负值？

转载 作者：行者123 更新时间：2023-12-03 08:09:05 26 4
gpt4 key购买 nike

在fabricjs中， Canvas 中的所有对象都有自己的顶部和左侧属性，但是当我进行选择(使用shift+单击或拖动)时，选择范围内所有对象的顶部和左侧值都会丢失其原始值。

有一个简单的代码片段解释了我的问题 https://jsfiddle.net/kj7qy6a8/

我想知道或计算选区中所有对象的实际顶部和左侧，而不是相对值。

如果您想直接在此处尝试，我会将代码粘贴到此处。

const canvasElmt = document.getElementById('myCanvas');

const canvas = new fabric.Canvas(canvasElmt, {
  width: 500,
  height: 500
});

let text1 =  new fabric.Textbox('text1', { top: 20, left: 40 });
let text2 =  new fabric.Textbox('text2', { top: 100, left: 60 });
canvas.add(text1);
canvas.add(text2);

canvas.renderAll();

// button onclick
document.getElementById('btn').onclick = () => {
  const infoElmt = document.getElementById('info');
  infoElmt.textContent = '';

  canvas.getObjects().forEach(({text, top, left}) => {
    infoElmt.innerText += `${text} TOP: ${top} LEFT: ${left}\n`;
  });
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>fabricjs test</title>

    <style>
        .canvas-container{border: 2px solid;}
        button{padding: 7px; background: lightgreen; font-weight: bolder;}
    </style>

</head>
<body>
     
    <h1>Steps to reproduce the error:</h1>
    <ol>
        <li>click the "check top and left" button</li>
        <li>select both object (text1 and text2)</li>
        <li>once the objects have been selected, press the button again.</li>
        <li>now you can see the top and left values are negative or wrong</li>
    </ol>

    <canvas id="myCanvas"></canvas>

    <button id="btn">Check top and left</button>
    <div id="info"></div>

    <script src="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="74121516061d1734415a465a45" rel="noreferrer noopener nofollow">[email protected]</a>/dist/fabric.min.js"></script>

</body>
</html>

最佳答案

从此answer

When an object is inside a group, its coordinates relative to the canvas will depend on the origin of the group (and origin of the object as well).

要计算组中的坐标，请使用此

let objectLeft = obj.left
let objectTop = obj.top
let groupLeft = group.left
let groupTop = group.top
let objectInGroupLeft = objectLeft + groupLeft + group.width / 2
let objectInGroupTop = objectTop + groupTop + group.height / 2

const canvasElmt = document.getElementById('myCanvas');

const canvas = new fabric.Canvas(canvasElmt, {
  width: 500,
  height: 500
});

let text1 = new fabric.Textbox('text1', {
  top: 20,
  left: 40
});
let text2 = new fabric.Textbox('text2', {
  top: 100,
  left: 60
});
canvas.add(text1);
canvas.add(text2);

canvas.renderAll();

// button onclick
document.getElementById('btn').onclick = () => {
  const infoElmt = document.getElementById('info');
  infoElmt.textContent = '';
  let objects = canvas._objects
  let group = objects[0].group

  if (group != undefined) {
    infoElmt.innerText += `Group LEFT: ${group.left} TOP: ${group.top} \n`;
  } else {
    infoElmt.innerText += `No Group!\n`;
  }

  objects.forEach((obj) => {
    let objectLeft = obj.left
    let objectTop = obj.top
    if (group == undefined) {

      infoElmt.innerText += `${obj.text}  LEFT: ${objectLeft} TOP: ${objectTop}\n`;
    } else {
      let groupLeft = group.left
      let groupTop = group.top
      let objectInGroupLeft = objectLeft + groupLeft + group.width / 2
      let objectInGroupTop = objectTop + groupTop + group.height / 2
      infoElmt.innerText += `Group-${obj.text} LEFT: ${objectInGroupLeft} TOP: ${objectInGroupTop}\n`;
    }


  });

}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>fabricjs test</title>

  <style>
    .canvas-container {
      border: 2px solid;
    }
    
    button {
      padding: 7px;
      background: lightgreen;
      font-weight: bolder;
    }
  </style>

</head>

<body>

  <h1>Steps to reproduce the error:</h1>
  <ol>
    <li>click the "check top and left" button</li>
    <li>select both object (text1 and text2)</li>
    <li>once the objects have been selected, press the button again.</li>
    <li>now you can see the top and left values are negative or wrong</li>
  </ol>

  <canvas id="myCanvas"></canvas>

  <button id="btn">Check top and left</button>
  <div id="info"></div>

  <script src="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5a3c3b382833391a6f7468746b" rel="noreferrer noopener nofollow">[email protected]</a>/dist/fabric.min.js"></script>

</body>

</html>

关于javascript - 为什么选择fabricjs后top和left属性变成负值？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/71356612/

26 4 0
文章推荐： java - 在 Java 中跨多个线程递增值是如何工作的？
文章推荐： .net - 错误记录: Source Error and Source File
文章推荐： oracle - PLS-00201 : identifier 'D.HOLIDAY_DATE' must be declared
文章推荐： c - 对多线程应用程序使用 perf stat
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com