2. 程式人生 > >用canvas實現滑鼠拖動繪製矩形框

用canvas實現滑鼠拖動繪製矩形框

阿新 • • 發佈：2019-02-18

需要用到jCanvas外掛和jQuery。

程式碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滑鼠拖動繪製矩形框(canvas)</title>
</head>
<body>

<canvas id="canvas" width="600" height="300" style="border: 1px solid #000;"></canvas>

<script 
 
src="./jquery-1.11.3.min.js"></script>
<script src="./jcanvas.min.js"></script>
<script>
    var layer=0;
    CanvasExt = {
        drawRect:function(canvasId,penColor,strokeWidth){
            var that=this;
            that.penColor=penColor;
            that.penWidth=strokeWidth;

            
 
var canvas=document.getElementById(canvasId);
            //canvas 的矩形框
            var canvasRect = canvas.getBoundingClientRect();
            //矩形框的左上角座標
            var canvasLeft=canvasRect.left;
            var canvasTop=canvasRect.top;

            var layerIndex=layer;
            var layerName=
 
"layer";
            var x=0;
            var y=0;

            //滑鼠點選按下事件，畫圖準備
            canvas.onmousedown=function(e){
                //設定畫筆顏色和寬度
                var color=that.penColor;
                var penWidth=that.penWidth;

                layerIndex++;
                layer++;
                layerName+=layerIndex;
                x = e.clientX-canvasLeft;
                y = e.clientY-canvasTop;

                $("#"+canvasId).addLayer({
                    type: 'rectangle',
                    strokeStyle: color,
                    strokeWidth: penWidth,
                    name:layerName,
                    fromCenter: false,
                    x: x, y: y,
                    width: 1,
                    height: 1
                });

                $("#"+canvasId).drawLayers();
                $("#"+canvasId).saveCanvas();
                //滑鼠移動事件，畫圖
                canvas.onmousemove=function(e){
                    width = e.clientX-canvasLeft-x;
                    height = e.clientY-canvasTop-y;

                    $("#"+canvasId).removeLayer(layerName);

                    $("#"+canvasId).addLayer({
                        type: 'rectangle',
                        strokeStyle: color,
                        strokeWidth: penWidth,
                        name:layerName,
                        fromCenter: false,
                        x: x, y: y,
                        width: width,
                        height: height
                    });

                    $("#"+canvasId).drawLayers();
                }
            };

            canvas.onmouseup=function(e){

                var color=that.penColor;
                var penWidth=that.penWidth;

                canvas.onmousemove=null;

                width = e.clientX-canvasLeft-x;
                height = e.clientY-canvasTop-y;

                $("#"+canvasId).removeLayer(layerName);

                $("#"+canvasId).addLayer({
                    type: 'rectangle',
                    strokeStyle: color,
                    strokeWidth: penWidth,
                    name:layerName,
                    fromCenter: false,
                    x: x, y: y,
                    width: width,
                    height: height
                });

                $("#"+canvasId).drawLayers();
                $("#"+canvasId).saveCanvas();
            }
        }
    };

    drawPen();
    function drawPen(){
        var color = "red";
        var width = 1;
        CanvasExt.drawRect("canvas",color,width);
    }

</script>
</body>
</html>

效果大概如下：


相關推薦

用canvas實現滑鼠拖動繪製矩形框

需要用到jCanvas外掛和jQuery。 程式碼如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title

C# WPF實現滑鼠拖動的程式碼片

C# WPF實現滑鼠拖動的程式碼片 ///可表示實時拖動 void xxx_PreviewMouseLeftButtonUp(System.Object sender, System.Windows.Input.MouseButtonEventArgs e) { IsMous

Qt 繪製可以用滑鼠拖動的線段

一、環境 VS2013 + QT5.7.0 二、效果 1.可以建立任意多條線段； 2.滑鼠在靠近到線段時產生吸附效果； 3.可以拖動任意一條線段的任意部位（線段的兩個端點或者整條線段）。 效果圖： 三、說明 1.建立線段的定義: 線段具有

c# 實現用滑鼠拖動沒有標題欄的視窗(窗體的任何部分都可實現拖動效果)

上面形式的窗體，實現窗體的任何部分都可實現拖動 首先需要引入非託管程式碼，直接呼叫windows api         public const int WM_NCLBUTTONDOWN = 0xA1;         public const int HT_CAPT

canvas 實現滑鼠畫出矩形

    <!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <m

原生js實現table列寬的滑鼠拖動事件

var tTD; //用來儲存當前更改寬度的Table Cell,避免快速移動滑鼠的問題 var table = document.getElementById("tableId"); //table的id名稱 for (j = 0; j < table.rows[0].cells.le

C#窗體屬性FormBordeStyle設定為none後，通過程式碼實現窗體滑鼠拖動功能

備註：使用的是visual studio2013版本 1、新建C#窗體應用程式，初始化的程式預設FormBordeStyle屬性為Sizable，修改屬性FormBordeStyle為none （1）修改前 （2）修改後 2、F5除錯程式後，此時窗體沒有邊框、

WPF 在image控制元件用滑鼠拖拽出矩形

原文: WPF 在image控制元件用滑鼠拖拽出矩形 今天有小夥伴問我一個問題，在image控制元件用滑鼠拖拽出矩形，本文告訴大家如何使用滑鼠畫出矩形 做出來的效果先請大家看一下 最簡單的方法是在 Down 的時候記錄按下的點，在 移動的時候重新計算所在的寬

C#Winform實現無邊框窗體滑鼠拖動

在有時候我們為了實現軟體的美觀，我們需要把窗體的邊框隱藏，但是問題也會隨之而來，在屬性中設定了FormBorderStyle應該為None，邊框便可以隱藏，但是我們在使用軟體時卻無法拖動窗體，

WPF 使用滑鼠拖動一個控制元件的實現[2018.7.15]

原文: WPF 使用滑鼠拖動一個控制元件的實現[2018.7.15] Q：已經把一個Shape和一個TextBlock組合起來放到了一個Grid中，現在想要實現用滑鼠拖動這個Grid到任意位置的功能，如何做？ <Grid Height="50" Width="50">

Jquery實現可拖動進度條

div overflow 20px ext pan 點擊 技術分享 img ani html 　　　　<div class="progress"> <div class="progress_bg">

javascript實現可拖動DIV層

百度 -i osi sil weight 拖動 oev solid col 原文發布時間為：2009-05-04 —— 來源於本人的百度文章 [由搬家工具導入]注意以下红色部&

C# 各種控件實現可拖動和調整大小

osi 鼠標拖動 clas 鼠標 pan lin tool 右下角 enum http://www.360doc.com/content/18/0516/12/55659281_754382494.shtml using System; using System.Colle

jq實現的拖動排序

首先我們要實現一個拖動的js這裡我們就不廢話了直接上拖動js的原始碼 $.fn.dropIng=function (type,Obj) { this.each(function (a, b){ b.typeDrop=0; if(typeof type!="u

WPF MVVM模式中，通過命令實現窗體拖動、跳轉以及顯隱控制

原文: WPF MVVM模式中，通過命令實現窗體拖動、跳轉以及顯隱控制 在WPF中使用MVVM模式，可以讓我們的程式實現介面與功能的分離，方便開發，易於維護。但是，很多初學者會在使用MVVM的過程中遇到一個顯而易見且無法迴避的問題，那就是不同的窗體之間如何跳轉？很多人在介紹MVVM的使用時，都沒有明顯提到該

WPF 實現窗體拖動

mouse down left highlight 窗體拖動 arp sed ons += C# 實現代碼 this.Loaded += (r, s) => { this.MouseDown += (x, y) => {

用canvas實現紅心飄飄的動畫效果

兩週前，專案裡需要實現一個紅心飄飄的點贊效果。抓耳撓腮了老半天，看了幾篇大佬的文章，終於算是摸了個七七八八。不禁長嘆一聲，還是菜啊。先來看一下效果:(傳送門進去點一波) 一、Bezier曲線運動軌跡 其實用大白話描述一下需求就是讓一個紅心圖片沿著貝塞爾曲線的軌跡走，然後邊走邊消失。核心在於得到貝塞爾曲線

QT練手專案二：滑鼠拖動視窗

     對於一個沒有邊框的視窗，滑鼠是無法將它拖動的，於是我們就需要自己重寫滑鼠的點選、移動和釋放事件來跟蹤滑鼠，從而 達到使用滑鼠拖動視窗，這裡我們就簡單的使用一個mainwindow來演示。這個小專案程式碼非常少，適合用來入門QT。 &nb

js實現可拖動的佈局

思路：採用flex佈局，js即時修改固定列的寬度 注意：父元素需設定position:relative；因offsetLeft和offsetTop是相對於具有定位的（position:absolute或者position：relative）父級元素的距離 html： <!DOCTYPE ht

用canvas實現一個vue彈幕元件

看B站時，對彈幕的實現產生了興趣，一開始想到用css3動畫去實現，後來感覺這樣效能不是很好，查了下資料，發現可以用canvas實現，於是就摸索著寫了一個簡單的彈幕。 彈幕功能 支援動態新增彈幕 彈幕不重疊 自定義彈幕顏色 效果圖 demo  原始碼地址 前端框架選了比較熟悉的vuejs