Блог

Главная - Вопросы по программированию - Автоматическое создание svg-объектов в Fabric.js

Автоматическое создание svg-объектов в Fabric.js

#javascript #html #svg #fabricjs

Вопрос:

Я создаю приложение, использующее fabric.js для ретрансляции некоторые функции. В моем canvas я создал набор объектов, которые будут использоваться в качестве элементов меню, которые пользователь будет перетаскивать и помещать в другое место на холсте. Все работает нормально, но мне нужна помощь в нескольких вещах.

После многих игр и исследований я пришел с этим простым решением. canvas.on('mouse:move', function(e) { my objects }); и это работает нормально, но есть два недостатка. Запустите фрагмент, и вы поймете. Я объясню позже.

Это мой код:

 var canvas = this.__canvas = new fabric.Canvas('c');

canvas.on('mouse:move', function(e) {

var prthss = new fabric.Path('m 37.066323,664.72823 c -0.526572,-7.80009 -0.530124,-15.64425 -0.0136,-23.48118 5.487368,-4.37172 13.310902,-4.34082 18.754907,0.0798 -0.533656,7.62909 -0.579648,15.59958 0.03127,23.20784 -5.375259,4.48954 -13.24684,4.55212 -18.772561,0.19357 z');
prthss.set({fill: '#fff', stroke: '#1a1a1a', strokeWidth: 2, opacity: 1, left:130, top:110, lockScalingX: true, lockScalingY: true, originX: 'center',  originY: 'center' });
prthss.set('selectable', true);
prthss.setControlsVisibility({ mt: false, mb: false, ml: false, mr: false, bl: false, br: false, tl: false, tr: false, mtr: true, });
canvas.add(prthss);

var tpr = new fabric.Path('m 313.13828,618.74455 c 2.11345,1.08854 2.18323,3.22159 2.1986,5.06456 m -23.10338,-9.61297 7.80969,0 -4.00165,0 0.0394,9.61297 m 5.78092,0 0.0394,-9.61297 2.83155,0 c 3.28759,0 3.40318,4.60019 0,4.60019 l -2.91027,0 m 8.34298,5.01278 0.0394,-9.61297 2.83154,0 c 3.2876,0 3.40319,4.60019 0,4.60019 l -2.91026,0 m 9.56121,-0.23614 c 0,8.35908 -6.77638,15.13546 -15.13545,15.13546 -8.35909,0 -15.13547,-6.77637 -15.13547,-15.13546 0,-8.35908 6.77638,-15.13544 15.13547,-15.13544 8.35907,0 15.13545,6.77638 15.13545,15.13544 z');
tpr.set({fill: '#fff', stroke: '#1a1a1a', strokeWidth: 2, opacity: 1, left:100, top:110, lockRotation: 'true', originX: 'center',  originY: 'center' });
canvas.add(tpr);
}); 
 .controls {
    display: inline-block;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js" type="text/javascript"></script>

<h3>Menu with autogenerative items </h3>

<canvas id="c" width="400" height="300" style="border:1px solid #ccc"></canvas>

Как я уже сказал, это работает нормально, но:

недостатки:

  1. Объекты, служащие пунктами меню, размыты и искажены по краям. Я заметил, видя это здесь, а также в своем собственном проекте, что это искажение имеет схожую картину. Посмотрите на эту картинку и сравните. введите описание изображения здесь. Я попытался установить более толстую границу, а также установить некоторые уровни непрозрачности, но ничего не помогло.
  2. В моем собственном проекте, где есть 19 пунктов этого меню и почти 50 других статических объектов на холсте, весь код выполняется довольно медленнее после применения этого решения. Я попытался применить решение только к нескольким элементам, но вялость никуда не исчезла.

Кто-нибудь знает, почему возникают оба этих недостатка?

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

Что я сделал не так?

Комментарии:

1. jQuery не работает с svg, но остальная часть кода, которую я использую, работает, поэтому весь код, который я написал для работы с fabric, написан также для jQuery. Я действительно не понимаю, почему, но если я удалю ссылку jQuery, материал ткани вообще не загружается.

2. Я проверил это и понял, что весь материал jQuery в сценарии fabric может быть удален за ненадобностью, поэтому я сделал это, и он работает нормально. Тогда материал jQuery больше не является обязательным требованием в этом вопросе. Спасибо Роберту Лонгсону за предупреждение!

3. Я обновил вопрос, так как нашел рабочее решение, но это привело к двум недостаткам в сценах.

Метки: