Я видел много примеров рисования прямоугольника на простом холсте, но не нашел ни одного подходящего примера рисования прямоугольника на видео с использованием холста. Эта статья поможет вам реализовать это.
Итак, нам нужно два элемента, то есть элемент видео и элемент холста.
‹идентификатор видео=”видео” src=”http://upload.wikimedia.org/wikipedia/commons/7/79/Big_Buck_Bunny_small.ogv control=”false” autoplay›‹/video›‹canvas id=”canvas”›
Теперь мы будем рисовать наше видео на холсте, а затем на холсте любой может нарисовать прямоугольник. Для рисования прямоугольника мы использовали библиотеку FabricJs.
Ниже функция будет рисовать видеоданные на холсте
функция drawImgeC() {
var видео = document.querySelector(#video);
var canvas = document.querySelector(#canvas);
var ctx = canvas.getContext('2d');
холст.ширина = 370;
холст.высота = 220;
ctx.drawImage(видео, 0, 0, холст.ширина, холст.высота);
setTimeout(drawImgeC, 100);
если (sessionStorage.getItem (drawRectangle) == '1') {
ctx.fillStyle = 'rgba (0,0,255,0,5)';
ctx.fillRect(sessionStorage.getItem(drawRectangleX), sessionStorage.getItem(drawRectangleY), sessionStorage.getItem(drawRectangleW), sessionStorage.getItem(drawRectangleH));
}
}
Ниже функция будет рисовать прямоугольник на холсте.
функция drawRectangle() {
var video = document.querySelector("#video");
видео.пауза()
sessionStorage.setItem("drawRectangle", "1");
var canvas = новая ткань.Canvas («холст», {выбор: ложь});
var rect, isDown, origX, origY;
canvas.on('мышь:вниз', function (o) {
естьВниз = Истина;
указатель var = canvas.getPointer(o.e);
оригХ = указатель.х;
origY = указатель.y;
указатель var = canvas.getPointer(o.e);
прямоугольник = новая ткань. Прямоугольник ({
слева: оригX,
вверху: оригY,
происхождениеX: «левый»,
происхождениеY: «верхний»,
ширина: pointer.x — origX,
высота: pointer.y — оригY,
угол: 0,
заполнить: ‘rgba(255,0,0,0.5)’,
прозрачные углы: ложь
});
холст.добавить (прямой);
console.log(‘12122’, origX, origY, pointer.x — origX, pointer.x — origY)
sessionStorage.setItem("drawRectangleX", origX);
sessionStorage.setItem("drawRectangleY", origY);
});
canvas.on('мышь:переместить', функция (о) {
если (!isDown) вернуться;
указатель var = canvas.getPointer(o.e);
если (origX › pointer.x) {
rect.set({ слева: Math.abs(pointer.x)});
}
если (origY › pointer.y) {
rect.set({ сверху: Math.abs(pointer.y)});
}
rect.set({ ширина: Math.abs(origX — pointer.x) });
rect.set({ высота: Math.abs(origY — pointer.y) });
console.log('22122', Math.abs(pointer.x), Math.abs(pointer.y), Math.abs(origX — pointer.x), Math.abs(origY — pointer.y))
//sessionStorage.setItem("drawRectangleX", Math.abs(pointer.x));
//sessionStorage.setItem("drawRectangleY", Math.abs(pointer.y));
sessionStorage.setItem("drawRectangleW", Math.abs(origX — pointer.x));
sessionStorage.setItem("drawRectangleH", Math.abs(origY — pointer.y));
холст.renderAll();
});
canvas.on('мышь:вверх', function (o) {
видео.играть()
isDown = ложь;
});
}
Вы можете получить полный исходный код по этой ссылке
