Объекты obs, ограничивающие прямоугольник, меняются на круг

#javascript #canvas #fabricjs

#javascript #холст #fabricjs

Вопрос:

Я хотел бы знать, есть ли на самом деле возможность иметь ограничивающую рамку circle и могу ли я придать этой области цвет фона?

Если это невозможно, может кто-нибудь сказать мне, где я мог бы что-то изменить в исходном коде, чтобы получить ограничивающую рамку circle?

Я видел это обсуждение один раз год назад, и, возможно, что-то изменилось в этом направлении, хотя я ничего не смог найти в документах.

Заранее большое спасибо

Ответ №1:

Ограничивающий прямоугольник круга — это квадрат, который точно содержит этот круг.

Таким образом, вы можете создать прямоугольник с центром в центре круга, а его ширина и высота равны удвоенному радиусу круга.

 var rect = new fabric.Rect({
  left: CircleCenterXMinusCircleRadius,
  top: CircleCenterYMinusCircleRadius,
  fill: "red",
  width: CircleRadiusX2,
  height: CircleRadiusX2
});

… или вы имеете в виду, что хотите установить цвет заливки круга

 var circle = new fabric.Circle({
    fill: 'blue',
    // other properties here 
});

…или вы хотите установить цвет заливки фона холста:

 var canvas = new fabric.Canvas('myCanvasElement', {
  backgroundColor: 'rgb(100,100,200)',
  // other properties here
});

1. Большое спасибо за ответ. Что у меня есть: Пользователь может создавать с помощью щелчка / касания множество кругов на холсте. У каждого круга есть «ограничивающая область», куда вы можете переместить этот круг, верно? я хочу, чтобы эта область была окружностью, а не прямоугольником. и возможность раскрашивать область. но это должно быть видно, только если объект активен, как обычные элементы управления и граница. имеет ли это смысл? большое спасибо, что помогли мне

2. Я понимаю. Нет, вы не можете настроить элементы управления, связанные с элементом, так, чтобы они были круглыми, а не прямоугольными.

3. Привет. Я не хочу изменять сами элементы управления, я хочу изменить ограничивающую рамку на круг вместо прямоугольника. Есть ли возможность добавить некоторые свойства к активным элементам на холсте? Потому что тогда я мог бы создать просто больший круг вокруг исходного. У кого-нибудь есть опыт работы с этим? Было бы очень полезно.

4. Конечно. Вы можете создать группу, содержащую меньшие и большие концентрические круги. Больший концентрический круг был бы вашим bounding circle . Ознакомьтесь с группами здесь: github.com/kangax/fabric.js/wiki/Working-with-groups

5. привет. это звучит так, как я хочу. но я должен сериализовать все мои объекты, чтобы восстановить их для пользователя в другой точке, и я не хочу сохранять больший концентрический круг. я просто хочу показать это для перемещения, если меньший круг активен, а если нет, он не должен быть видимым и не находиться в строке json. вы понимаете, что я имею в виду? возможно ли это также? большое спасибо