Vue使用鼠标在Canvas上绘制矩形

本文实例为大家分享了Vue使用鼠标在Canvas上绘制矩形的具体代码，供大家参考，具体内容如下

1.代码

<template>
 <div class="test" style="background-color: burlywood;">
 <canvas id="myCanvas" ref="myCanvas"
   width="460" height="240" @mousedown="mousedown" @mouseup="mouseup" @mousemove="mousemove">
 </canvas>
 </div>
</template>

<script>
 export default {
 name:"hello-world",
 data() {
  return {
  flag: false,
  x: 0,
  y: 0
  };
 },
 watch: {},
 computed: {},
 methods: {
  mousedown(e){
  console.log("鼠标落下");
  this.flag = true;
  this.x = e.offsetX; // 鼠标落下时的X
  this.y = e.offsetY; // 鼠标落下时的Y
  },
  mouseup(e){
  console.log("鼠标抬起");
  this.flag = false;
  },
  mousemove(e){
  console.log("鼠标移动");
  this.drawRect(e);
  },
  drawRect(e){
  if(this.flag){
   console.log("绘制图形");
   const canvas = this.$refs.myCanvas;
   var ctx = canvas.getContext("2d");
   let x = this.x;
   let y = this.y;

   ctx.clearRect(0,0,canvas.width,canvas.height);
   ctx.beginPath();

   //设置线条颜色，必须放在绘制之前
   ctx.strokeStyle = '#00ff00';
   // 线宽设置，必须放在绘制之前
   ctx.lineWidth = 1;

   ctx.strokeRect(x,y,e.offsetX-x,e.offsetY-y);
  }
  }
 },
 created() {

 },
 mounted() {

 }
 };
</script>

<style scoped>
 #myCanvas{
 background-color: forestgreen;
 background-image:url('../bg.jpg');
 }
</style>

2.运行截图

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue使用Canvas绘制图片、矩形、线条、文字，下载图片

    1 前言 1.1 业务场景 图片储存在后台中,根据图片的地址,在vue页面中,查看图片,并根据坐标标注指定区域. 由于浏览器的机制,使用 window.location.href 下载图片时,并不会保存到本地,会在浏览器打开. 2 实现原理 2.1 绘制画布 <el-dialog title="查看图片" :visible.sync="dialogJPG" append-to-body> <canvas id="mycanvas"

  • vue canvas绘制矩形并解决由clearRec带来的闪屏问题

    起因:在cavnas绘制矩形时 鼠标移动一直在监测中,所以鼠标移动的轨迹会留下一个个的矩形框, 要想清除矩形框官方给出了ctx.clearRect() 但是这样是把整个画布给清空了,因此需要不断 向画布展示新的图片,这样就出现了不断闪屏的问题. 那么怎么解决呢? microsoft提供了双缓冲图形技术,可以点击看看这边文章. 具体就是画图的时候做两个canvas层,一个临时层 一个显示层,鼠标的监听事件放在显示层处理, 每次清空的时候只清空临时层,这样就可以解决闪屏问题了. 部分代码如下: <!

  • vue实现一个矩形标记区域(rectangle marker)的方法

    代码地址:vue-rectangle-marker 一.前言 一些cms系统经常会用到区域标记功能,所以写了个用vue实现的矩形标记区域,包含拖拽.放大缩小.重置功能. 二.实现结果 1.初始 2.标记 三.代码实现 <template> <div class="rectangle-marker"> <div class="mark-wrap"> <img ref="backImg" :src="

  • Vue使用鼠标在Canvas上绘制矩形

    Vue使用鼠标在Canvas上绘制矩形

    本文实例为大家分享了Vue使用鼠标在Canvas上绘制矩形的具体代码,供大家参考,具体内容如下 1.代码 <template> <div class="test" style="background-color: burlywood;"> <canvas id="myCanvas" ref="myCanvas" width="460" height="240"

  • Python+OpenCV实现在图像上绘制矩形

    Python+OpenCV实现在图像上绘制矩形

    话不多说,直接上代码 import copy import cv2 import numpy as np WIN_NAME = 'draw_rect' class Rect(object): def __init__(self): self.tl = (0, 0) self.br = (0, 0) def regularize(self): """ make sure tl = TopLeft point, br = BottomRight point ""

  • vue 实现剪裁图片并上传服务器功能

    预览链接点击预览 效果图如下所示,大家感觉不错,请参考实现代码. 需求 [x] 预览:根据选择图像大小自适应填充左侧裁剪区域 [x] 裁剪:移动裁剪框右侧预览区域可实时预览 [x] 上传&清空:点击确认上传裁剪图片,点击取消按钮清空图像 [ ] 裁剪框可调节大小 实现步骤 methods:funName() - 对应源码中methods中的funName方法 data:dataName - 对应源码中data中的dataName数据 1. 图片选择与读取 选择图片 :(methods:selec

  • PyQt5 在label显示的图片中绘制矩形的方法

    在利用QT编写GUI程序时经常需要一些交互操作,常见的有鼠标事件.键盘事件等.今天我们要实现的是在label中已经显示的图像中绘制矩形框,以便进行下一步操作(如放大细节,选中感兴趣区域等)程序主要参考了知乎的小杨老师的专栏. 核心点是重写Label,使其实现相应的功能,看下面的一个小例子 from PyQt5.QtWidgets import QWidget, QApplication, QLabel from PyQt5.QtCore import QRect, Qt from PyQt5.Q

  • Android开发使用自定义View将圆角矩形绘制在Canvas上的方法

    本文实例讲述了Android开发使用自定义View将圆角矩形绘制在Canvas上的方法.分享给大家供大家参考,具体如下: 前几天,公司一个项目中,头像图片需要添加圆角,这样UI效果会更好看,于是写了一个小的demo进行圆角的定义,该处主要是使用BitmapShader进行了渲染(如果要将一张图片裁剪成椭圆或圆形显示在屏幕上,也可以使用BitmapShader来完成). BitmapShader类完成渲染图片的基本步骤如下: 1.创建BitmapShader类的对象 /** * Call this

  • canvas快速绘制圆形、三角形、矩形、多边形方法介绍

    canvas快速绘制圆形、三角形、矩形、多边形方法介绍

    想看前面整理的canvas常用API的同学可以点下面: canvas学习之API整理笔记(一) canvas学习之API整理笔记(二) 本系列文章涉及的所有代码都将上传至:http://wd.jb51.net:81//201612/yuanma/About-Canvas-master_jb51.rar 从本篇文章开始,我会分享给大家canvas绘制的各种基础图形和酷炫的图形,注意:是一系列!欢迎关注! 后续每篇文章我会着重分享给大家一些使用Canvas开发的实例和这些实例的实现思路. 本文看点:

  • Android 使用Canvas在图片上绘制文字的方法

    [Android]Android中 Paint 字体.粗细等属性的一些设置 在Android SDK中使用Typeface类来定义字体,可以通过常用字体类型名称进行设置,如设置默认黑体: Paint mp = new paint(); mp.setTypeface(Typeface.DEFAULT_BOLD) 常用的字体类型名称还有: * Typeface.DEFAULT //常规字体类型 * Typeface.DEFAULT_BOLD //黑体字体类型 * Typeface.MONOSPACE

  • js+canvas绘制矩形的方法

    js+canvas绘制矩形的方法

    本文实例讲述了js+canvas绘制矩形的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtm

  • OpenCV鼠标绘制矩形和截取矩形区域图像

    本文实例为大家分享了OpenCV鼠标绘制截取矩形区域图像的具体代码,供大家参考,具体内容如下 在opencv中利用鼠标绘制矩形,代码如下: #include <cv.h> #include <highgui.h> #include <stdio.h> #pragma comment( lib, "cv.lib" ) #pragma comment( lib, "cxcore.lib" ) #pragma comment( lib,

随机推荐