程序员经验分享-hwhale

在画布上绘制多个矩形

2024-05-20

我试图在鼠标移动时在画布上添加多个矩形。但是当我在图像上绘制矩形时，画布上的背面图像也会被清除。我不想删除它。我想要画布上有多个矩形而不清除画布图像。请检查下面的 JavaScript 代码。

var canvas = document.getElementById('canvasarea'),
        context = canvas.getContext('2d');
         base_image = new Image();
        base_image.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg'; //Load Image ;
base_image.onload = function(){
    context.drawImage(base_image,0,0);
}
var strokeWidth = 4;
drawCount = 1;

canvas.addEventListener("mousemove", function (e) {
                    drawRectangleOnCanvas.handleMouseMove(e);
            }, false);
            canvas.addEventListener("mousedown", function (e) {
                    drawRectangleOnCanvas.handleMouseDown(e);
            }, false);
            canvas.addEventListener("mouseup", function (e) {
                    drawRectangleOnCanvas.handleMouseUp(e);
            }, false);
            canvas.addEventListener("mouseout", function (e) {
                 drawRectangleOnCanvas.handleMouseOut(e);
            }, false);

function reOffset(){
              var BB=canvas.getBoundingClientRect();
              recOffsetX=BB.left;
              recOffsetY=BB.top;        
            }
            var recOffsetX,recOffsetY;
            reOffset();
            window.onscroll=function(e){ reOffset(); }
            window.onresize=function(e){ reOffset(); }

            var isRecDown=false;
            var startX,startY;

            var rects=[];
            var newRect;
var drawRectangleOnCanvas={
                handleMouseDown:function(e){
                  // tell the browser we're handling this event
                  e.preventDefault();
                  e.stopPropagation();

                  startX=parseInt(e.clientX-recOffsetX);
                  startY=parseInt(e.clientY-recOffsetY);

                  // Put your mousedown stuff here
                  isRecDown=true;
                },

                handleMouseUp:function(e){
                  // tell the browser we're handling this event
                  e.preventDefault();
                  e.stopPropagation();

                  mouseX=parseInt(e.clientX-recOffsetX);
                  mouseY=parseInt(e.clientY-recOffsetY);

                  // Put your mouseup stuff here
                  isRecDown=false;

                  //if(!willOverlap(newRect)){
                    rects.push(newRect);
                  //}
                  drawRectangleOnCanvas.drawAll();
                },

                drawAll:function(){
                  context.clearRect(0, 0, canvas.width, canvas.height);
                  context.lineWidth=strokeWidth;
                  //context.strokeStyle=$('div.dropdown-menu').find('.selected').attr('data-color');
                  for(var i=0;i<rects.length;i++){
                    var r=rects[i];
                    context.strokeStyle = r.color;
                    context.globalAlpha=1;
                    context.strokeRect(r.left,r.top,r.right-r.left,r.bottom-r.top);

                    context.beginPath();
                    context.arc(r.left, r.top, 15, 0, Math.PI*2, true); 
                    context.closePath();
                    context.fillStyle = r.color;
                    context.fill();

                    var text = drawCount;
                    context.fillStyle = "#fff";
                    var font = "bold " + 2 +"px serif";
                    context.font = font;
                    var width = context.measureText(text).width;
                    var height = context.measureText("w").width; // this is a GUESS of height
                    context.fillText(text, r.left - (width/2) ,r.top + (height/2));

                  }
                },

                handleMouseOut:function(e){
                  // tell the browser we're handling this event
                  e.preventDefault();
                  e.stopPropagation();

                  mouseX=parseInt(e.clientX-recOffsetX);
                  mouseY=parseInt(e.clientY-recOffsetY);

                  // Put your mouseOut stuff here
                  isRecDown=false;
                },

                handleMouseMove:function(e){
                  if(!isRecDown){return;}
                  // tell the browser we're handling this event
                  e.preventDefault();
                  e.stopPropagation();

                  mouseX=parseInt(e.clientX-recOffsetX);
                  mouseY=parseInt(e.clientY-recOffsetY);
                  newRect={
                    left:Math.min(startX,mouseX),
                    right:Math.max(startX,mouseX),
                    top:Math.min(startY,mouseY),
                    bottom:Math.max(startY,mouseY),
                    color:"#000000"
                  }
                  drawRectangleOnCanvas.drawAll();
                  context.strokeStyle = "#000000";
                  context.lineWidth = strokeWidth;
                  context.globalAlpha=1;
                  context.strokeRect(startX,startY,mouseX-startX,mouseY-startY);
                }
            }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvasarea"></canvas>

清除画布后，您还需要在您的画布中绘制图像drawAll()方法。context.drawImage(base_image, 0, 0);

var canvas = document.getElementById('canvasarea'),
  context = canvas.getContext('2d');
var base_image = new Image();
base_image.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg'; //Load Image ;
base_image.onload = function() {
  context.drawImage(base_image, 0, 0);
}

function drawImage() {
}
var strokeWidth = 4;
drawCount = 1;

canvas.addEventListener("mousemove", function(e) {
  drawRectangleOnCanvas.handleMouseMove(e);
}, false);
canvas.addEventListener("mousedown", function(e) {
  drawRectangleOnCanvas.handleMouseDown(e);
}, false);
canvas.addEventListener("mouseup", function(e) {
  drawRectangleOnCanvas.handleMouseUp(e);
}, false);
canvas.addEventListener("mouseout", function(e) {
  drawRectangleOnCanvas.handleMouseOut(e);
}, false);

function reOffset() {
  var BB = canvas.getBoundingClientRect();
  recOffsetX = BB.left;
  recOffsetY = BB.top;
}
var recOffsetX, recOffsetY;
reOffset();
window.onscroll = function(e) {
  reOffset();
}
window.onresize = function(e) {
  reOffset();
}

var isRecDown = false;
var startX, startY;

var rects = [];
var newRect;
var drawRectangleOnCanvas = {
  handleMouseDown: function(e) {
    // tell the browser we're handling this event
    e.preventDefault();
    e.stopPropagation();

    startX = parseInt(e.clientX - recOffsetX);
    startY = parseInt(e.clientY - recOffsetY);

    // Put your mousedown stuff here
    isRecDown = true;
  },

  handleMouseUp: function(e) {
    // tell the browser we're handling this event
    e.preventDefault();
    e.stopPropagation();

    mouseX = parseInt(e.clientX - recOffsetX);
    mouseY = parseInt(e.clientY - recOffsetY);

    // Put your mouseup stuff here
    isRecDown = false;

    //if(!willOverlap(newRect)){
    rects.push(newRect);
    //}
    drawRectangleOnCanvas.drawAll();
  },

  drawAll: function() {
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.drawImage(base_image, 0, 0);
    context.lineWidth = strokeWidth;
    for (var i = 0; i < rects.length; i++) {
      var r = rects[i];
      context.strokeStyle = r.color;
      context.globalAlpha = 1;
      context.strokeRect(r.left, r.top, r.right - r.left, r.bottom - r.top);

      context.beginPath();
      context.arc(r.left, r.top, 15, 0, Math.PI * 2, true);
      context.closePath();
      context.fillStyle = r.color;
      context.fill();

      var text = drawCount;
      context.fillStyle = "#fff";
      var font = "bold " + 2 + "px serif";
      context.font = font;
      var width = context.measureText(text).width;
      var height = context.measureText("w").width; // this is a GUESS of height
      context.fillText(text, r.left - (width / 2), r.top + (height / 2));

    }
  },

  handleMouseOut: function(e) {
    // tell the browser we're handling this event
    e.preventDefault();
    e.stopPropagation();

    mouseX = parseInt(e.clientX - recOffsetX);
    mouseY = parseInt(e.clientY - recOffsetY);

    // Put your mouseOut stuff here
    isRecDown = false;
  },

  handleMouseMove: function(e) {
    if (!isRecDown) {
      return;
    }
    // tell the browser we're handling this event
    e.preventDefault();
    e.stopPropagation();

    mouseX = parseInt(e.clientX - recOffsetX);
    mouseY = parseInt(e.clientY - recOffsetY);
    newRect = {
      left: Math.min(startX, mouseX),
      right: Math.max(startX, mouseX),
      top: Math.min(startY, mouseY),
      bottom: Math.max(startY, mouseY),
      color: "#000000"
    }
    drawRectangleOnCanvas.drawAll();
    context.strokeStyle = "#000000";
    context.lineWidth = strokeWidth;
    context.globalAlpha = 1;
    context.strokeRect(startX, startY, mouseX - startX, mouseY - startY);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvasarea"></canvas>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

jQuery

在画布上绘制多个矩形 的相关文章

随机推荐

  • 如何保证单向方法的可靠性？

    The 关于单向调用 回调和事件您需要了解的信息 http msdn microsoft com en us magazine cc163537 aspx文章讲述 客户端不关心调用结果的事实并不意味着客户端根本不关心调用是否发生 一般来说

  • setSelected() 与 JRadioButton r[]=new JRadioButton[3] 不起作用[重复]

    这个问题在这里已经有答案了 在这里我做了一个虚拟程序 import javax swing import java awt import java awt event class MyClass1 implements ActionList

  • R 改变构面的顺序

    我正在尝试将方面的顺序从 BA SLG 更改为 SLG BA 我发现了与此类似的问题 但我认为我的解决方案可能不起作用 因为我已经在Excel中汇总了数据 因此 我的数据框可能会有所不同 无论如何 我尝试实现这个但无济于事 df2 lt f

  • Kivy：获取在Python中添加的小部件内的父级

    如何获取对不是由 kvlang 添加而是在 python 中添加的小部件内的父级的引用 通常你只需调用self parent然而这会返回Null如果小部件在 python 中添加到父级 一个例子 import kivy kivy requi

  • .NET 标准与 .NET 核心

    我已经了解了 NET Standard 和 NET Core 之间的区别 但我真的不知道区别是什么 或者何时选择 NET Standard 库项目以及何时选择 NET Core 库项目 我读到 NET Standard 是为了确保一组 AP

  • Objective Flickr 照片上传错误

    我正在使用 ObjectiveFlickr 库将照片从我的 iPhone 应用程序上传到 Flickr 我可以授权该应用程序并执行一般请求 但在尝试上传照片时遇到错误 要上传的照片是使用 AVFoundation 捕获的图像 这是相关代码

  • 使用 PEM 证书的 HTTPS 连接

    我正在尝试使用 PEM 证书发布 HTTPS 请求 如下所示 import httplib CERT FILE path certif pem conn httplib HTTPSConnection 10 10 10 10 443 cer

  • 为什么 Jersey 控制器未检测到我的方面（使用自定义注释）？

    我想在 Jersey 控制器上创建一个方面来测量服务执行所需的时间 我正在与我的切入点作斗争 因为它没有被检测到 而且我的方面永远不会启动 我尝试过使用很多切入点 例如 execution Monitor execution public

  • 单屏上支持多种语言的 Android 字体

    我是安卓新手 我正在实施一个应用程序 该应用程序将采用英语和乌尔都语两种语言 基本上会有一些阿拉伯语文本 其含义将根据用户选择的语言为英语或乌尔都语 我想更改阿拉伯语文本的字体 如果我在整个应用程序中应用字体 它也会改变乌尔都语和英语的外观

  • 正则表达式 数字字符串 数字字符串循环

    我的字符串是 str Move 10 Casio Watch 20 Apple Iphone 100 Apple Macbook to store 我用过了 preg match all 0 9 str matches 但它只匹配产品名称的

  • Mongod 错误（用自制程序安装）

    我已经安装了 mongodb brew install mongodb 已创建文件夹 mkdir p data db 处理权限 sudo chown R id un data db Run mongod 错误日志 2018 01 06T14

  • UICollectionView 未出现

    我正在尝试设置UICollectionView 以编程方式在我的视图控制器中扩展UIViewController 由于某种原因 我的收藏视图根本没有显示 以下是我所拥有的 为什么没有出现 我将它连接到委托和数据源并将其添加为子视图self

  • 是否可以在单个 POM 中执行两个不同的 maven exec-maven-plugin

    我使用执行以下代码mvn exec java com mycompany FooServer 我想添加另一个我可以执行的服务器mvn exec java com mycompany BarServer 我如何在单个 pom 文件中做到这一点

  • Python 原生协程和 send()

    基于生成器的协程有一个send 方法 允许调用者和被调用者之间进行双向通信 并从调用者恢复生成的生成器协程 这是将生成器转变为协程的功能 虽然新本地人async await协程为异步 I O 提供了卓越的支持 我不知道如何获得相当于send

  • 配置 HttpClientFactory 以使用当前请求上下文中的数据

    随着新HttpClientFactory https www stevejgordon co uk introduction to httpclientfactory aspnetcore在 ASP NET Core 2 1 中 使用基本

  • 如何在 mongoid 中使用 or 条件进行查询

    如何在 Mongoid 中使用 or 条件进行查询 这是 OR 在 mongoid 中查询 如果你想要像下面这样的查询 select from user where id 10 or name hitesh 在带有 mongoid 的 Ra

  • Android ACTION_SEND 意图未填充主题或正文

    我的应用程序中有代码可以让用户向开发人员发送电子邮件 它应该预先填充 收件人 字段 主题 字段和 正文 字段 然而 当我运行时 它会填充 收件人 但会忽略其他额外内容 例如主题 正文和选择器文本 我在两台测试设备上看到了这种行为 一台运行

  • 编码：类型错误：write() 参数必须是 str，而不是 bytes

    我对 python 有初步的了解 但不清楚处理二进制编码问题 我正在尝试运行 firefox webextensions 示例中的示例代码 其中 python 脚本发送由 javascript 程序读取的文本 我不断遇到编码错误 蟒蛇代码是

  • 从返回堆栈返回后，片段不刷新内容

    我有一个ZooFragment其中包含一个ViewPager This ViewPager有三个孩子 LionFragment LeopardFragment and TigerFragment 每个子节点都可以请求事务来调用新的ZooFr

  • 在画布上绘制多个矩形

    我试图在鼠标移动时在画布上添加多个矩形 但是当我在图像上绘制矩形时 画布上的背面图像也会被清除 我不想删除它 我想要画布上有多个矩形而不清除画布图像 请检查下面的 JavaScript 代码 var canvas document getE

热门标签