предисловие
В прошлую субботу друг группы @I сказал, что модуль обратной связи Gitee добавил функцию скриншота, я пошел, чтобы испытать это, и обнаружил, что они используют мой плагин 😁, в этой статье мы поделимся этим плагином с вами, приветствую всех заинтересоваться разработчиками прочитайте эту статью.
Адрес плагина и принцип реализации
Этот плагин реализован на нативном js и может быть интегрирован в любой веб-проект. Пожалуйста, перейдите на адрес npm и адрес GitHub плагина:
Пожалуйста, перейдите к принципу реализации плагина:
- Реализация пользовательских скриншотов в Интернете
- Внедрение пользовательских веб-снимков экрана (версия JS)
Испытайте этот плагин онлайн, вы можете перейти к моему проекту с открытым исходным кодом.chat-systemДля опыта, пожалуйста, перейдите к видео работы эффекта плагинаРеализуйте пользовательскую функцию захвата экрана на стороне веб-видео с эффектом.
Благосклонность менеджера по продукции Gitee
В начале месяца продакт-менеджер Gitee увидел мой плагин скриншотов в Nuggets.js-screen-shotЯ думаю, что это неплохо.Они работают над этой функцией в последнее время, поэтому они планируют интегрировать мой плагин напрямую и общаться со мной по вопросам, связанным с авторскими правами.
После того, как общение было завершено, он спросил меня, не хочу ли я поставить копию плагина на Gitee, и он мог бы мне его порекомендовать. волна рекомендаций на главной странице 😂
GiteeПосле входа в систему нажмите значок «Отправить отзыв» в правой части страницы.
Некоторые незначительные проблемы, которые влияют на опыт
В прошлый вторник с GitHub пришел пользователь сети, добавил мой WeChat и поднял два вопроса по моему плагину.Поскольку нет времени заниматься этими вопросами в течение недели, я планирую решать вопросы по плагину единым образом в течение выходные.
Организуйте действительные проблемы
Еще утром в прошлую субботу я открыл GitHub и посмотрел задачи, давно их не видел, а их уже 19.
После некоторой сортировки некоторые бесполезные и измененные были удалены, и окончательно определились 4 пункта:
- Звонящий может нарисовать вопрос за пределами области выбора
- 8 практических пунктов для удаления рамки обрезки при первом щелчке на панели инструментов области скриншота
- После того, как выбор кадра завершен, мышь щелкает другие позиции, и панель инструментов скриншота перемещается вместе с ней.
- Добавьте необязательные параметры для поддержки полноэкранного режима клика.
решать проблемы
После того, как проблема решена, следующим шагом является ее решение.
Проблема рисования вне выделения
В нормальных условиях, после того, как область скриншота установлена, пользователь будет рисовать в области рамки обрезки, поэтому я не рассматривал эту граничную ситуацию 🤥, после того, как плагин будет использоваться большим количеством людей, некоторые люди, естественно, обнаружат эту проблему, мы берем отзыв из примера модуля gitee (gitee все еще использует мою старую версию плагина, должна быть эта проблема), как показано ниже, 4 красных прямоугольника, которые мы рисуем, находятся за пределами поля обрезки:
Реализовать идеи
Эта проблема относительно проста для решения.Рамка обрезки была нарисована, и мы знаем информацию о ее координатах.Когда мы рисуем, нам нужно только судить, превышает ли текущая позиция мыши область координатной точки рамки обрезки. Часть кода реализации выглядит следующим образом:
// 获取裁剪框位置信息
const cutBoxPosition = this.data.getCutOutBoxPosition();
// 绘制中工具的起始x、y坐标不能小于裁剪框的起始坐标
// 绘制中工具的起始x、y坐标不能大于裁剪框的结束坐标
// 当前鼠标的x坐标不能小于裁剪框起始x坐标，不能大于裁剪框的结束坐标
// 当前鼠标的y坐标不能小于裁剪框起始y坐标，不能大于裁剪框的结束坐标
if (
!getDrawBoundaryStatus(startX, startY, cutBoxPosition) ||
!getDrawBoundaryStatus(currentX, currentY, cutBoxPosition)
)
return;
getDrawBoundaryStatusРеализация функции следующая:
/**
* 获取工具栏工具边界绘制状态
* @param startX x轴绘制起点
* @param startY y轴绘制起点
* @param cutBoxPosition 裁剪框位置信息
*/
export function getDrawBoundaryStatus(
startX: number,
startY: number,
cutBoxPosition: positionInfoType
): boolean {
if (
startX < cutBoxPosition.startX ||
startY < cutBoxPosition.startY ||
startX > cutBoxPosition.startX + cutBoxPosition.width ||
startY > cutBoxPosition.startY + cutBoxPosition.height
) {
// 无法绘制
return false;
}
// 可以绘制
return true;
}
Чтобы получить конкретный код, перейдите к записи отправки:fix: исправлена проблема, из-за которой вызывающая сторона плагина могла рисовать за пределами области выбора кадра
добиться эффекта
Эффект после внедрения следующий:
Панель инструментов следует за проблемой движения мыши
Эту проблему можно описать так: после определения рамки обрезки панель инструментов не была нажата. В это время, когда мышь щелкает другую позицию, панель инструментов скриншота пересчитывает позицию с помощью мыши. Мы продолжаем использовать Gitee как пример, как показано ниже:
Реализовать идеи
Когда левая кнопка мыши поднята, если панель инструментов не была нажата, положение панели инструментов скриншота будет установлено в соответствии с текущим положением мыши в сочетании с размером рамки обрезки. Пользователь просто щелкает в любом месте области обрезки, и панель инструментов перемещается соответствующим образом.
Решить эту проблему тоже очень просто, нам нужно только добавить логотип при движении мыши, и судить, верный ли логотип при поднятии мыши. Часть кода выглядит так:
// 鼠标拖动状态
private dragFlag = false;
// 鼠标移动事件
private mouseMoveEvent = (event: MouseEvent) => {
// 工具栏未选择且鼠标处于按下状态时
if (!this.data.getToolClickStatus() && this.data.getDragging()) {
// 修改拖动状态为true;
this.dragFlag = true;
}
}
// 鼠标抬起事件
private mouseUpEvent = () => {
// 鼠标尚未拖动且工具栏未选择则不修改工具栏位置
if (!this.dragFlag && !this.data.getToolClickStatus()) {
// 复原裁剪框的坐标
this.drawGraphPosition.startX = this.drawGraphPrevX;
this.drawGraphPosition.startY = this.drawGraphPrevY;
// 显示截图工具栏
this.data.setToolStatus(true);
return;
}
}
Чтобы получить конкретный код, перейдите к записи отправки:fix: После завершения выбора кадра мышь щелкает другие позиции, и панель инструментов скриншота перемещается вместе с ней
достигать результатов
Эффект от ремонта следующий:
Удалить 8 рабочих точек
В прошлом году, когда плагин для скриншотов только писался, я обнаружил эту проблему.При клике по панели инструментов скриншота поле обрезки не может быть изменено.Если 8 рабочих точек все еще существуют, это выглядит очень странно.Идея в то время была в том, чтобы сразу Удалить 8 точек границы, но эти 8 точек все нарисованы.После долгого метания без нахождения решения было отложено.Эта проблема показана на следующем рисунке:
Реализовать идеи
Сегодня, год спустя, я знаю, что идея удалить эти 8 точек точно не сработает, поэтому я снова и снова пересматриваю скриншоты QQ и наблюдаю, как он это делает. иметь рамку обрезки Информация о координатах и размере рамки обрезки, я могу перерисовать рамку обрезки После удаления 8 рабочих точек вокруг рамки обрезки я могу удалить логику расчета оптимизации этих 8 точек при создании изображения, в результате чего диапазон неточностей, чтобы добиться идеальных скриншотов. Часть кода реализации выглядит следующим образом:
// 工具栏尚未点击，当前属于首次点击，重新绘制一个无像素点的裁剪框
if (!data.getToolClickStatus()) {
// 获取裁剪框位置信息
const cutBoxPosition = data.getCutOutBoxPosition();
// 开始绘制无像素点裁剪框
drawCutOutBox(
cutBoxPosition.startX,
cutBoxPosition.startY,
cutBoxPosition.width,
cutBoxPosition.height,
screenShortCanvas,
data.getBorderSize(),
screenShortController as HTMLCanvasElement,
ScreenShortImageController,
false
);
}
Чтобы получить конкретный код, перейдите к записи отправки:исправлено: 8 активных точек поля обрезки удаляются при первом нажатии на панель инструментов области скриншота.
добиться эффекта
Реализуйте функцию захвата всего экрана одним щелчком мыши.
Пользователь сети, который сообщил мне о проблеме, надеется, что после загрузки плагина скриншота пользователь сможет захватить весь экран, щелкнув левой кнопкой мыши, не перетаскивая сгенерированное поле выбора.Необязательный параметр.
Реализовать идеи
Это тоже очень просто.Когда мышь поднята, если включен щелчок для захвата всего экрана, рамка обрезки того же размера, что и холст, может быть нарисована из позиции координат (0, 0). код выглядит следующим образом:
// 鼠标抬起事件
private mouseUpEvent = () => {
if (
cutBoxPosition.width === 0 &&
cutBoxPosition.height === 0 &&
cutBoxPosition.startX === 0 &&
cutBoxPosition.startY === 0 &&
!this.dragFlag &&
this.clickCutFullScreen
) {
// 设置裁剪框位置为全屏
this.tempGraphPosition = drawCutOutBox(
0,
0,
this.screenShortImageController.width,
this.screenShortImageController.height,
this.screenShortCanvas,
this.data.getBorderSize(),
this.screenShortController,
this.screenShortImageController
) as drawCutOutBoxReturnType;
}
}
Чтобы получить конкретный код, перейдите к записи отправки:feat: добавить необязательный параметр для поддержки щелчка для захвата полноэкранного режима
напиши в конце
На данный момент статья опубликована.
яудивительный программист, фронтенд-разработчик.
Если вы заинтересованы во мне, пожалуйста, перейдите на мойперсональный сайт,Узнать больше о.
- Если в статье есть ошибки, исправьте их в комментариях, если статья вам поможет, ставьте лайк и подписывайтесь 😊
- Эта статья была впервые опубликована вудивительный программистПубличный аккаунт, перепечатка без разрешения запрещена 💌