2.12.1_拖动多边形对象

最新推荐文章于 2020-09-09 14:11:27 发布
最新推荐文章于 2020-09-09 14:11:27 发布
阅读量410 收藏 1
点赞数 1
分类专栏： HTML5_CANVAS练习案例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jun_sun_shine/article/details/71106842
版权

2.12.1_拖动多边形对象

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>可拖动的多边形对象</title>
        <style>
            body{
                background: #eee;
            }
            #controls{
                position: absolute;
                left: 25px;
                top: 25px;
            }
            #canvas{
                background: #fff;
                cursor: pointer;
                margin-left: 10px;
                margin-top: 10px;
                box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
                -webkit-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
                -moz-box-shadow: 4px 4px 8px rgba(0,0,0,0.5);
            }
        </style>
    </head>
    <body>
        <canvas id="canvas" width="1050" height="600"></canvas>
        <div id="controls">
            描边的颜色：
            <select id="strokeStyleSelect">
                <option value="red">red</option>
                <option value="green">green</option>
                <option value="blue">blue</option>
                <option value="orange">orange</option>
                <option value="cornflowerblue" selected>cornflowerblue</option>
                <option value="goldenrod">goldenrod</option>
                <option value="navy">navy</option>
                <option value="purple">purple</option>
            </select>
            填充的颜色：
            <select id="fillStyleSelect">
                <option value="red">red</option>
                <option value="green">green</option>
                <option value="blue">blue</option>
                <option value="orange">orange</option>
                <option value="cornflowerblue" selected>cornflowerblue</option>
                <option value="goldenrod">goldenrod</option>
                <option value="navy">navy</option>
                <option value="purple">purple</option>
            </select>
            多边形边数：
            <select id="sidesSelect">
                <option value="3" selected>3</option>
                <option value="4">4</option>
                <option value="5">5</option>
                <option value="6">6</option>
                <option value="7">7</option>
                <option value="8">8</option>
            </select>

            起始角度：
            <input id="startAngleSelect" type="number" value="0" />

            填充：
            <input id="fillCheckbox" type="checkbox" checked />
            <input id="eraseAllButton" type="button" value="擦除全部线条" /><br />
            可拖动：<input id="editCheckbox" type="checkbox" />
            指示线：
            <input id="guidewireCheckbox" type="checkbox"/>
        </div>
    </body>
    <script>
        var canvas = document.getElementById('canvas'),
            context = canvas.getContext('2d'),

            strokeStyleSelect = document.getElementById('strokeStyleSelect'),
            fillStyleSelect = document.getElementById('fillStyleSelect'),
            sidesSelect = document.getElementById('sidesSelect'),

            startAngleSelect = document.getElementById('startAngleSelect'),
            fillCheckbox = document.getElementById('fillCheckbox'),
            guidewireCheckbox = document.getElementById('guidewireCheckbox'),
            eraseAllButton = document.getElementById('eraseAllButton'),
            editCheckbox = document.getElementById('editCheckbox'),

            drawingSurfaceImageData,
            mousedown ={},
            rubberbandRect = {},

            dragging = false,
            draggingOffsetX,
            draggingOffsetY,

            filled= fillCheckbox.checked,
            sidesNum = parseInt(sidesSelect.value),
            startAngle = parseInt(startAngleSelect.value)*Math.PI/180, //起始角度转弧度
            guidewires = false,
            editing = false,
            polygons = []; //用于保存绘制好的多边形对象集合

            //初始化
            context.strokeStyle = strokeStyleSelect.value;
            context.fillStyle = fillStyleSelect.value;

            context.shadowColor = 'rgba(0,0,0,0.4)';
            context.shadowOffsetX = 2;
            context.shadowOffsetY = 2;
            context.shadowBlur = 4;

            drawGrid('lightgray',10,10);

            //事件处理器
            canvas.onmousedown = function (e){
                var loc = windowToCanvas(e.clientX,e.clientY);
                e.preventDefault();
                if(editing){ //可拖动状态
                    polygons.forEach(function(polygon){
                        polygon.createPath(context);
                        if(context.isPointInPath(loc.x,loc.y)){
                            startDragging(loc);
                            dragging = polygon;
                            draggingOffsetX = loc.x - polygon.x;
                            draggingOffsetY = loc.y - polygon.y;
                            return;
                        }
                    })
                }else{ //可绘制状态
                    startDragging(loc);
                    dragging = true;
                }
            }

            canvas.onmousemove = function(e){
                var loc = windowToCanvas(e.clientX,e.clientY);
                e.preventDefault();
                if(editing&&dragging){  //处于可拖动状态并且有存在可以拖动的对象
                    dragging.x = loc.x - draggingOffsetX;
                    dragging.y = loc.y - draggingOffsetY;
                    context.clearRect(0,0,canvas.width,canvas.height);
                    drawGrid('lightgray',10,10);
                    drawPolygons();
                }else{
                    if(dragging){ //处于绘制的状态
                        restoreDrawingSurface();
                        updateRubberband(loc,sidesNum,startAngle);
                        if(guidewires){
                            drawGuidewires(loc.x,loc.y);
                        }
                    }
                }
            }

            canvas.onmouseup = function(e){
                var loc = windowToCanvas(e.clientX,e.clientY);
                dragging = false;
                if(editing){

                }else{
                    restoreDrawingSurface();
                    updateRubberband(loc,sidesNum,startAngle);
                }
            }

            guidewireCheckbox.onchange = function(){
                guidewires = guidewireCheckbox.value;
            }
            fillStyleSelect.onchange = function(){
                context.fillStyle= fillStyleSelect.value;
            }
            strokeStyleSelect.onchange = function(){
                context.strokeStyle = strokeStyleSelect.value;
            }
            editCheckbox.onchange = function (){
                if(editCheckbox.checked){
                    startEditing();
                }else{
                    stopEditing();
                }
            }
            sidesSelect.onchange = function (){
                sidesNum = parseInt(sidesSelect.value);
            }
            startAngleSelect.onchange =function(){
                startAngle = parseInt(startAngleSelect.value)*Math.PI/180
            }
            fillCheckbox.onchange = function(){
                filled= fillCheckbox.checked;
            }
            eraseAllButton.onclick = function (){
                context.clearRect(0,0,canvas.width,canvas.height);
                drawGrid('lightgray',10,10);
                saveDrawingSurface();
                polygons = [];
            }
            //重绘所有的多边形
            function drawPolygons(){
                polygons.forEach(function(polygon){
                    drawPolygon(polygon);
                })
            }
            //开始编辑
            function startEditing(){
                canvas.style.cursor = 'pointer';
                editing = true;
            }
            //结束编辑
            function stopEditing(){
                canvas.style.cursor = 'crosshair';
                editing = false;
            }
            //绘制指示线
            function drawGuidewires(x,y){
                context.save();
                context.strokeStyle = 'rgba(0,0,230,0.4)';
                context.lineWidth = 0.5;
                drawVerticalLine(x);
                drawHorizontalLine(y);
                context.restore();
            }
            //绘制垂线
            function drawVerticalLine(x){
                context.beginPath();
                context.moveTo(x+0.5,0);
                context.lineTo(x+0.5,context.canvas.height);
                context.stroke();
            }
            //绘制水平线
            function drawHorizontalLine(y){
                context.beginPath();
                context.moveTo(0,y+0.5);
                context.lineTo(context.canvas.width,y+0.5);
                context.stroke();
            }
            //实时更新视图
            function updateRubberband(loc,sidesNum,startAngle){
                updateRubberRectangle(loc);
                drawRubberbandShape(loc,sidesNum,startAngle);
            }
            //维护一个四边形
            function updateRubberRectangle(loc){
                rubberbandRect.width = Math.abs(loc.x - mousedown.x);
                rubberbandRect.height = Math.abs(loc.y - mousedown.y);
                if(loc.x>mousedown.x){
                    rubberbandRect.left = mousedown.x;
                }else{
                    rubberbandRect.left = loc.x;
                }
                if(loc.y> mousedown.y){
                    rubberbandRect.top = mousedown.y;
                }else{
                    rubberbandRect.top = loc.y;
                }
            }
            //绘制多边形
            function drawRubberbandShape(loc,sidesNum,startAngle){
                var polygon = new Polygon(mousedown.x,
                                          mousedown.y,
                                          rubberbandRect.width,
                                          sidesNum,
                                          startAngle,
                                          context.strokeStyle,
                                          context.fillStyle,
                                          filled

                );
                drawPolygon(polygon);
                if(!dragging){ //如果绘制多边形后监测以鼠标抬起了，也就相当于dragging为false时，把绘制好的多边形加入到
                            //保存的polygos对象中
                    polygons.push(polygon);

                }

            }
            //绘制多边形
            function drawPolygon(polygon){
                context.beginPath();
                polygon.createPath(context);
                polygon.stroke(context);
                if(polygon.filled){
                    polygon.fill(context);
                }
            }
            //多边形各个角的构造函数
            var Point = function (x,y){
                this.x = x;
                this.y = y;
            }
            //多边形的构造函数
            var Polygon = function (centerX,centerY,radius,sides,startAngle,strokeStyle,fillStyle,filled){

                this.x = centerX;
                this.y = centerY;
                this.radius = radius;
                this.sides = sides;
                this.startAngle = startAngle;
                this.strokeStyle = strokeStyle;
                this.fillStyle = fillStyle;
                this.filled = filled;
            }
            //多边形的构造函数的原型函数
            Polygon.prototype = {
                getPoints:function(){
                    var points = [],
                        angle = this.startAngle || 0;
                    for(var i =0;i<this.sides;i++){
                        points.push(new Point(this.x+this.radius*Math.cos(angle),
                                             this.y-this.radius*Math.sin(angle)));
                        angle +=2*Math.PI/this.sides;
                    }
                    return points;
                },
                createPath:function(context){
                    var points = this.getPoints();
                    context.beginPath();
                    context.moveTo(points[0].x,points[0].y);

                    for(var i=1;i<this.sides;i++){
                        context.lineTo(points[i].x,points[i].y);
                    }
                    context.closePath();
                },
                stroke:function (context){
                    context.save();
                    this.createPath(context);
                    context.strokeStyle = this.strokeStyle;
                    context.stroke();
                    context.restore();
                },
                fill:function (context){
                    context.save();
                    this.createPath(context);
                    context.fillStyle = this.fillStyle;
                    context.fill();
                    context.restore();
                },
                move:function(x,y){
                    this.x = x;
                    this.y = y;
                }

            }
            //开始拖拽
            function startDragging(loc){
                saveDrawingSurface();
                mousedown.x =loc.x;
                mousedown.y = loc.y;
            }
            //保存绘图表面
            function saveDrawingSurface(){
                drawingSurfaceImageData = context.getImageData(0,0,canvas.width,canvas.height);
            }
            //恢复绘图表面
            function restoreDrawingSurface(){
                context.putImageData(drawingSurfaceImageData,0,0);
            }
            //重新定位canvas中的坐标
            function windowToCanvas(x,y){
                var bbox = canvas.getBoundingClientRect(); //得到canvas元素的宽高定位
                return {
                    x:x-bbox.left * (canvas.width/bbox.width),
                    y:y-bbox.top * (canvas.height/bbox.height)
                };
            }
            //绘制网格线
            function drawGrid(color,stepX,stepY){
                context.save();
                context.shadowColor = undefined;
                context.shadowBlur = 0;
                context.shadowOffsetX = 0;
                context.shadowOffsetY = 0;
                context.strokeStyle = color;
                context.lineWidth = 0.5;

                for(var i =stepX+0.5;i<context.canvas.width;i+=stepX){
                    context.beginPath();
                    context.moveTo(i,0);
                    context.lineTo(i,context.canvas.height);
                    context.stroke();
                };
                for(var i=stepY+0.5;i<context.canvas.height;i+=stepY){
                    context.beginPath();
                    context.moveTo(0,i);
                    context.lineTo(context.canvas.width,i);
                    context.stroke();
                }
                context.restore();
            }
    </script>
</html>
信封中的阳光
关注
专栏目录
Qt编写自定义控件7-自定义可拖动多边形
chengye5264的博客
04-24 561
前言 自定义可拖动多边形控件，原创作者是赵彦博(QQ:408815041 zyb920@hotmail.com)，创作之初主要是为了能够在视频区域内用户自定义可拖动的多个区域，即可用来作为警戒区域，也可用来其他的处理，拿到对应的多边形坐标集合，本控件的主要难点是如何计算一个点在一个多边形区域内...
画多边形，拖动顶点
蓝丁下着雨
01-08 1828
自定义控件MyView： package com.example.draw; import java.lang.reflect.Array; import java.util.ArrayList; import java.util.HashMap; import android.content.Context; import android.graphics.Canva
多边形、矩形、线段、圆等绘制并修改,平移、拖动顶点
04-22
1.可以绘制线段,矩形,圆,多边形 2.可以平移这些区域 3.绘制完成后,可以用鼠标选中顶点并随鼠标移动而修改顶点. 4.矩形使用了橡皮框,多边形顶点的修改自定义类 效率不错,不卡,不闪. vc6,vs2008或以上都可以运行. 源代码很详细和规则,相信不让你后悔给分:)
canvas 鼠标点击绘制任意多边形、鼠标拖动改变形状
zcylyzhi4的博客
09-09 4281
文章目录前言一、通用代码封装二、canvas类的封装1.定义类2.初始化3.初始化鼠标事件3.鼠标事件处理4.绘制多边形及顶点总结 前言 本文主要介绍如何通过鼠标点击绘制任意多边形，以及通过鼠标移动改变多边形的形状 一、通用代码封装 class Point { constructor(opts = {}) { this.x = opts.x || 0; this.y = opts.y || 0; } } const
pjproject-2.12.1.tar.zip_pjsip_sdp_即时语音通信_即时通信_开源
07-14
PJSIP是一个开源的SIP协议库，它实现了SIP、SDP、RTP、STUN、TURN和ICE。PJSIP作为基于SIP的一个多媒体通信框架提供了非常清晰的API，以及NAT穿越的功能。PJSIP具有非常好的移植性，几乎支持现今所有系统：从桌面...
csdn_chrome_plugin_v2.12.1.crx
05-14
一款由csdn发布的非常实用的浏览器插件。 提升办公、上网效率。简单，便捷。
tensorflow_text-2.12.1-cp311-cp311-macosx_10_9_x86_64.whl
最新发布
03-24
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、...
tensorflow_text-2.12.1-cp39-cp39-macosx_10_9_x86_64.whl
03-24
Python库是一组预先编写的代码模块，旨在帮助开发者实现特定的编程任务，无需从零开始编写代码。这些库可以包括各种功能，如数学运算、文件操作、数据分析和网络编程等。Python社区提供了大量的第三方库，如NumPy、...
Canvas 入门4 鼠标事件综合应用 橡皮筋选取框
编程圈子-谢厂节的博客
12-06 1484
本系列文章接下来部分学习资源来自《HTML5 Canvas核心技术 图形、动画与游戏开发》示例 橡皮筋式线条绘制<html> <head> <title>Canvas tutorial</title> <style> body>{background:#eee;} #controls{position:absolute;left:25px;top:25px
2.8.4_橡皮筋式的线条绘制
jun_sun_shine的博客
05-02 1465
2.8.4_橡皮筋式的线条绘制<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>橡皮筋式的线条绘制</title> <style> body{ background: #eee; }
【OpenGL】鼠标取点画多边形、平移、旋转、缩放、拖拽点等
CS之路
04-19 5459
参考文章：openGL 实现绘制、修改多边形 已经实现的功能： 1. 鼠标取点画多边形，用的自带的glBegin(GL_LINE_LOOP)方法，没有填充 2. 删除某个点 3. 拖拽某个点 4. 移动图形 5. 旋转多边形（角度>90有点问题，可以改为每次转动固定的角度） 6. 缩放多边形，基准点为极大坐标值与极小坐标值取平均（不是很严谨） 代码： #includ...
HTML5 Canvas的一个有趣实例
zilong_07的专栏
10-05 1910
例子来源于《HTML5 Canvas核心技术-图形、动画与游戏开发》第2章的程序2-16.这个程序里为canvas对象注册onmousemove事件处理函数时，先使用context.putImageData()函数载入鼠标按下之前的图像数据，然后再绘制线条。如果每当鼠标移动时，实时绘制鼠标指针的轨迹点到按下鼠标的点之间的每条线段，则会变得比较有趣：可以画出放射状的图案，哈哈。如下图所示。
Canvas---Canvas版画图，坐标轴绘制，网格绘制，橡皮筋式画直线
MIKUScallion的专栏
01-25 7600
使用Canvas实现画图程序。 这个量还是比较大的，请允许我慢慢来。 目前做到了：坐标轴的绘制，网格绘制，橡皮筋式画直线 目前的不足：没有应用多个图层将网格，坐标轴与实际绘画区域分离 接下要做：为橡皮筋式画直线添加上辅助线选项 ---------------------------------------------------------------------- -------
在canvas上面拖拽对象。
weixin_30915951的博客
04-12 395
原文：https://html5.litten.com/how-to-drag-and-drop-on-an-html5-canvas/ 下面作者的原始的版本会抖动一下（鼠标刚点下去的时候，位置会发生一下突变，不是很友好）， 我修改了 一下。 var xDown , yDown;function myDown(e){ if (e.pageX < x + 15 + canvas.of...
浏览器中可用的光标类型
qq_37555524的博客
09-17 305
cursor光标类型 auto default none context-menu help pointer progress wait cell crosshair text vertical-te...
安装 Babel 2.12.1
05-25
你可以通过以下命令使用 pip 安装 Babel： ``` pip install Babel==2.12.1 ``` 请确保你已经安装了 Python 和 pip。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值