Нужно сделать функцию для плагина вп, чтобы можно было делать скрин и рисовать стрелку, с чего начать?

Question

[Алексей Верховцев]

Всем привет. Нужно сделать для плагина баг трекера возможность делать скрин и рисовать стрелку, подпись или выделять определенный участок для скрина. С чего начать вообще? Если честно даже не представляю как делается это, может готовое решение какое есть посмотреть или направьте что почитать? Заранее спасибо. Вот видео примерно того, что нужно https://www.youtube.com/watch?v=VL9W2GDVz90

Answer 1

[Igor Koch]

0. Изучить html canvas ( https://developer.mozilla.org/ru/docs/Web/API/Canv... )
1. https://html2canvas.hertzen.com/index.html
2. fabricjs.com ( fabricjs.com/freedrawing )
3. https://developer.mozilla.org/en-US/docs/Web/API/H...

Comments

[Алексей Верховцев]

Спасибо, попробую сейчас

[Алексей Верховцев]

Есть ли какие-нибудь аналоги https://html2canvas.hertzen.com/index.html просто не всегда корректно делается скрин ((

[Igor Koch]

Алексей Верховцев, Можно тут посмотреть https://stackoverflow.com/questions/4912092/using-...

[Алексей Верховцев]

Igor Koch, Скажите, пожалуйста, по поводу fabricjs.com, а текст я могу в реальном времени вводить, заключая его в фигуру к примеру? Просто я по времени ограничен и не знаю есть ли смысл читать доку или для написания текста в реал тайме и заключения его в фигуру лучше что-то иное поискать?

[Igor Koch]

Алексей Верховцев, fabricjs.com/test/misc/itext.html
https://stackoverflow.com/questions/10009080/inter...

[Алексей Верховцев]

Igor Koch, Большое спасибо! Ознакомлюсь

[Алексей Верховцев]

Алексей Верховцев, вроде нашлось, что искал fabricjs.com/kitchensink но вопрос, исходный код тут только через браузер можно увидеть, а то надо одну фишку оттуда взять

[Igor Koch]

Алексей Верховцев, jsfiddle.net/zmWs4

[Алексей Верховцев]

Igor Koch, Спасибо, вы хорошо знакомы с fabric js?

[Igor Koch]

Алексей Верховцев, Хорошо знаком с гуглом, js и html5, Выбирал эту библиотеку для одного похожего проекта

[Алексей Верховцев]

Igor Koch, может быть подскажете, пытаюсь я, значит, вырезать изображение, стандартный метод drawImage справляется ну просто на ура, но после этого когда я пытаюсь снова создать для этого холста экземпляр fabric.Canvas, то фоновая картинка растягивается сразу и пытается по ширине как-то влезть в блок. Когда пытаюсь через clipTo, то тоже происходят странные вещи

var img = new Image();
			img.src = 'http://i2.ooshirts.com/images/lab_shirts/Cobalt-1-F.jpg';
			var imgInstance = new fabric.Image(img, {
			            left: 0,
			            top: 0,
			            angle: 0,
			            width:300,
			            height:240,
			            clipTo: function(ctx){
			                ctx.rect(-290,-335,300,240);              
			               }
			        });
			canvas.add(imgInstance);
			canvas.renderAll();

Я хочу вырезать начиная с 0, 0 по ширине и высоте 300, 240 и вставить это, но этот код делает совсем не то, причем опять меняя пропорции исходного изображения, сталкивались?

[Алексей Верховцев]

Алексей Верховцев, вроде разобрался :) не нужно было указывать width и height

[Igor Koch]

Алексей Верховцев, Если я вам помог, отметьте решением)

[Алексей Верховцев]

Igor Koch, случайно не знаете события touchstart для fabricjs? ну и touchend желательно, а то у них вижу "touch:drag" в примере, но это не то, что нужно

[Igor Koch]

Алексей Верховцев, Не знаю, можно попробовать события touchstart, touchend на канвас через adevenlistener повесить

[Алексей Верховцев]

Igor Koch, я тоже считал это выходом до того момента, пока не понял, что мне нужно знать нажал ли я по объекту или нет... А это я могу узнать через их события если есть target

[Igor Koch]

Алексей Верховцев, Инициализировать вне эвентов переменную, touchstarted = false
менять в touchstart -> true, в touchend -> false, и в fabric событиях использовать

Answer 2

[Александр Торопов]

Такое не для плагина вп надо делать, а для браузера.