网站后台图片上传失败,青岛做教育的网站,网页在线翻译,中信建投证券有限责任公司效果#xff1a; 页面描述#xff1a;
对给定的几张图片#xff0c;每张能用鼠标在图上画框#xff0c;标注相关文字#xff0c;框的颜色和文字内容能自定义改变#xff0c;能删除任意画过的框。
实现思路#xff1a;
1、对给定的这几张图片#xff0c;用分页器绑定…效果 页面描述
对给定的几张图片每张能用鼠标在图上画框标注相关文字框的颜色和文字内容能自定义改变能删除任意画过的框。
实现思路
1、对给定的这几张图片用分页器绑定展示能选择图片
2、图片上绑定事件mousedown鼠标按下——开始画矩形、mousemove鼠标移动——绘制中临时画矩形、mouseup鼠标抬起——结束画矩形重新渲染
开始画矩形鼠标按下记录鼠标按下的位置。遍历标签数组找到check值为true的标签用其样式和名字创建新的标签加入该图片的矩形框们的数组。注意监听鼠标如果是按下后马上抬起结束标注。
更新矩形识别到新的标签存在鼠标移动时监听移动距离,更新当前矩形宽高用canvas绘制实时临时矩形。
结束画矩形刷新该图片的矩形框们的数组触发重新渲染。
3、在图片上v-for遍历渲染矩形框盒子绑定动态样式改变宽高
4、右侧能添加、修改矩形框颜色和文字
5、列举出每个矩形框名称能选择进行删除还能一次清空
template
div classallbodydiv classbody-topbutton classtop-item2 clickclearAnnotations清空/button/divdiv classbody-btndiv classbtn-contentdiv classimage-container!-- img :srcimageUrl altCharacter Image / --img :srcstate.imageUrls[state.currentPage - 1] mousedownstartAnnotation mousemoveupdateAnnotation mouseupendAnnotation /!-- 使用canvas覆盖在图片上方用于绘制临时矩形 --canvas refannotationCanvas/canvasdiv v-forannotation in annotations[state.currentPage - 1] :keyannotation.id classannotation :styleannotationStyle(annotation)div classlabel{{ annotation.label }}/div/div/divPaginationv-model:currentstate.currentPagev-model:page-sizestate.pageSizeshow-quick-jumper:totalstate.imageUrls.length:showSizeChangerfalse:show-totaltotal 共 ${total} 张 //divdiv classsidebardiv classsidebar-title标签/divdiv classtagsdiv classtags-item v-for(tags, index2) in state.tagsList :keyindex2 clickcheckTag(index2)div classtags-checkboxdiv :classtags.check true ? checkbox-two : notcheckbox-two/div/divdiv classtags-rightinput classtags-color typecolor v-modeltags.color /input typetype classtags-input v-modeltags.name /button classtags-not clickdeleteTag(index2)DeleteOutlined stylecolor: #ff0202 //button/div/div/divdiv classsidebar-btnbutton classbtn-left clickaddTags()添加/button/divdiv classsidebar-title数据/divdiv classsidebarsdiv classsidebar-item v-for(annotation, index) in annotations[state.currentPage - 1] :keyannotation.iddiv classsidebar-item-font{{ index 1 }}.{{ annotation.name }}/divbutton classsidebar-item-icon clickremoveAnnotation(annotation.id)DeleteOutlined stylecolor: #ff0202 //button /div/div/div/div/div
/template
script langts setupimport { DeleteOutlined } from ant-design/icons-vue;import { Pagination } from ant-design-vue;interface State {tagsList: any;canvasX: number;canvasY: number;currentPage: number;pageSize: number;imageUrls: string[];};const state reactiveState({tagsList: [], // 标签列表canvasX: 0,canvasY: 0,currentPage: 1,pageSize: 1,imageUrls: [apiUrl.value /api/File/Image/annexpic/20241203Q9NHJ.jpg, apiUrl.value /api/file/Image/document/20241225QBYXZ.jpg],});interface Annotation {id: string;name: string;x: number;y: number;width: number;height: number;color: string;label: string;border: string;};const annotations reactiveArrayAnnotation[]([[]]);let currentAnnotation: Annotation | null null;//开始标注function startAnnotation(event: MouseEvent) {// 获取当前选中的标签var tagsCon { id: 1, check: true, color: #000000, name: 安全帽 };// 遍历标签列表获取当前选中的标签for (var i 0; i state.tagsList.length; i) {if (state.tagsList[i].check) {tagsCon.id state.tagsList[i].id;tagsCon.check state.tagsList[i].check;tagsCon.color state.tagsList[i].color;tagsCon.name state.tagsList[i].name;}}// 创建新的标注currentAnnotation {id: crypto.randomUUID(),name: tagsCon.name,x: event.offsetX,y: event.offsetY,width: 0,height: 0,color: #000000,label: (annotations[state.currentPage - 1].length || 0) 1 tagsCon.name,border: tagsCon.color,};annotations[state.currentPage - 1].push(currentAnnotation);//记录鼠标按下的位置state.canvasX event.offsetX;state.canvasY event.offsetY;//监听鼠标如果是按下后马上抬起结束标注const mouseupHandler () {endAnnotation();window.removeEventListener(mouseup, mouseupHandler);};window.addEventListener(mouseup, mouseupHandler);}//更新标注function updateAnnotation(event: MouseEvent) {if (currentAnnotation) {//更新当前标注的宽高,为负数时鼠标向左或向上移动currentAnnotation.width event.offsetX - currentAnnotation.x;currentAnnotation.height event.offsetY - currentAnnotation.y;}//如果正在绘制中更新临时矩形的位置if (annotationCanvas.value) {const canvas annotationCanvas.value;//取得类名为image-container的div的宽高const imageContainer document.querySelector(.image-container);canvas.width imageContainer?.clientWidth || 800;canvas.height imageContainer?.clientHeight || 534;const context canvas.getContext(2d);if (context) {context.clearRect(0, 0, canvas.width, canvas.height);context.strokeStyle currentAnnotation?.border || #000000;context.lineWidth 2;context.strokeRect(state.canvasX, state.canvasY, currentAnnotation?.width || 0, currentAnnotation?.height || 0);}}}function endAnnotation() {//刷新annotations[state.currentPage - 1]触发重新渲染annotations[state.currentPage - 1] annotations[state.currentPage - 1].slice();currentAnnotation null;}function annotationStyle(annotation: Annotation) {//如果宽高为负数需要调整left和top的位置const left annotation.width 0 ? annotation.x annotation.width : annotation.x;const top annotation.height 0 ? annotation.y annotation.height : annotation.y;return {left: ${left}px,top: ${top}px,width: ${Math.abs(annotation.width)}px,height: ${Math.abs(annotation.height)}px,border: 2px solid ${annotation.border},};}// 选择标签function checkTag(index2: number) {state.tagsList.forEach((item, index) {if (index index2) {item.check true;} else {item.check false;}});}// 删除标签function deleteTag(index: number) {state.tagsList.splice(index, 1);}function addTags() {state.tagsList.push({ id: state.tagsList.length 1, check: false, color: #000000, name: });}// 移除某个标注function removeAnnotation(id: string) {const index annotations[state.currentPage - 1].findIndex(a a.id id);if (index ! -1) {annotations[state.currentPage - 1].splice(index, 1);}}// 清空所有标注function clearAnnotations() {annotations[state.currentPage - 1].splice(0, annotations[state.currentPage - 1].length);}onMounted(() {for (let i 0; i state.imageUrls.length; i) {annotations.push([]);}});/script
style.body-top {display: flex;flex-direction: row;align-items: center;justify-content: center;margin-bottom: 10px;width: 85%;}.top-item1 {width: 70px;height: 28px;line-height: 26px;text-align: center;background-color: #028dff;border: 1px solid #028dff;border-radius: 5px;font-size: 14px;color: #fff;margin-left: 20px;}.top-item2 {width: 70px;height: 28px;line-height: 26px;text-align: center;background-color: rgb(255, 2, 2);border: 1px solid rgb(255, 2, 2);border-radius: 5px;font-size: 14px;color: #fff;margin-left: 20px;}.body-btn {margin: 0;padding: 10px 13px 0 0;min-height: 630px;display: flex;background-color: #f5f5f5;}.btn-content {flex-grow: 1;padding: 10px;box-sizing: border-box;display: flex;flex-direction: column;align-items: center;}.image-container {height: 500px;margin: 40px;}.image-container img {height: 500px !important;}.ant-pagination {margin-bottom: 18px;}.number-input {width: 70px;border: 1px solid #ccc;border-radius: 4px;text-align: center;font-size: 16px;background-color: #f9f9f9;outline: none;color: #66afe9;}.sidebar {display: flex;flex-direction: column;width: 280px;height: 640px;background-color: #fff;padding: 10px;border-radius: 7px;}.sidebar-title {font-size: 16px;font-weight: 600;margin-bottom: 10px;}.sidebars {overflow: auto;}.sidebar .tags {margin-bottom: 10px;}.tags-item {display: flex;flex-direction: row;align-items: center;}.tags-checkbox {width: 24px;height: 24px;border-radius: 50px;border: 1px solid #028dff;display: flex;flex-direction: column;align-items: center;justify-content: center;margin-right: 7px;}.checkbox-two {background-color: #028dff;width: 14px;height: 14px;border-radius: 50px;}.notcheckbox-two {width: 14px;height: 14px;border-radius: 50px;border: 1px solid #028dff;}.tags-right {display: flex;flex-direction: row;align-items: center;background-color: #f5f5f5;border-radius: 5px;padding: 5px;width: 90%;}.tags-color {width: 26px;height: 26px;border-radius: 5px;}.tags-input {border: 1px solid #fff;width: 153px;margin: 0 10px;}.tags-not {border: 1px solid #f5f5f5;font-size: 12px;}.sidebar-btn {display: flex;flex-direction: row;align-items: center;justify-content: right;}.btn-left {width: 60px;height: 28px;line-height: 26px;text-align: center;border: 1px solid #028dff;border-radius: 5px;font-size: 14px;color: #028dff;}.btn-right {width: 60px;height: 28px;line-height: 26px;text-align: center;background-color: #028dff;border: 1px solid #028dff;border-radius: 5px;font-size: 14px;color: #fff;margin-left: 10px;}.sidebar-item {display: flex;justify-content: space-between;align-items: center;padding-right: 2px;}.sidebar-item-font {margin-right: 10px;}.sidebar-item-icon {font-size: 12px;border: 1px solid #fff;}.image-annotator {display: flex;height: 100%;}.image-container {flex: 1;position: relative;overflow: auto;}.image-container img {max-width: 100%;height: auto;}.annotation {position: absolute;box-sizing: border-box;}canvas {position: absolute;top: 0;left: 0;width: 100%;height: 100%;pointer-events: none; /* 防止遮挡鼠标事件 */}
/style
