canvas不规则多边形的移动 5C

红色为不规则图形,黑色图片背景为canvas大小如何使不规则多边形不超出画布边界

0

2个回答

HTML5 的 Canvas 是吗?如果可以的话,使用 SVG 可能这个比较好实现, SVG 的话就是元素,元素可以调用 getBoundingClientRect() 来判断边界。如果是这种Canvas的话,方法肯定还是有的,不过稍微麻烦了点。既然是多边形,那么可以对每个顶点进行判断,来检测是否超出画布边界

0
先计算出 x,y的最大最小值,
当x最小值<0,则把所有点的x坐标都加上 0-x最小值。
当x最大值>画布宽度,则把所有点的x坐标都减去 x最大值-画布宽度。
y坐标同上

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
关于HTML5 canvas 的移动多边形问题
大家可以复制我下面这段代码去浏览器试试看......移动多边形的时候出现了奇怪的问题,帮帮忙看一下是哪出错啦?[img=https://forum.csdn.net/PointForum/ui/scripts/csdn/Plugin/003/onion/1.gif][/img]rnrnvar canvas = document.getElementById("canvas"),rn context = canvas.getContext("2d"),rn startAngle = 0,rn drawingSurfaceImageData;rnrnvar Polygon = function(centerX,centerY,radius,sides) rn this.x = centerX;rn this.y = centerY;rn this.radius = radius;rn this.sides = sides;rnrnvar Point = function(x,y) rn this.x = x;rn this.y = y;rnrnPolygon.prototype = rn getPolygonPoints: function() rn rn var points = [],rn angle = startAngle || 0;rn for (var i =0; i < this.sides; i++) rn var point = new Point();rn point.x = this.x + this.radius*Math.sin(angle);rn point.y = this.y - this.radius*Math.cos(angle);rn points.push(point);rn //points.push(new Point(this.x + this.radius * Math.sin(angle),rn // this.y - this.radius * Math.cos(angle)));rn angle += 2*Math.PI/this.sides;rn rn return points;rn ,rnrn createPath: function(context) rn var points = this.getPolygonPoints();rn context.moveTo(points[0].x,points[0].y);rn for (var i = 1; i < points.length; i++) rn var point = points[i];rn context.lineTo(point.x,point.y);rn ;rn context.closePath();rn ,rnrn isPointInPath: function(context,locX,locY) rn this.createPath(context);rn return context.isPointInPath(locX,locY);rn ,rn move: function(dx,dy) rn var points = this.getPolygonPoints();rn points.forEach(function(point)rn point.x += dx;rn point.y += dy;rn )rn ,rnrnrnrnrnrnrn//event handler and rubberband updaternrnvar shapes = [];rnfunction drawPolygons() rn for (var i = 0; i < shapes.length; i++) rn var shape = shapes[i];rn drawOnePolygon(shape);rn rnrnfunction windowsToCanvas(mousedownX,mousedownY) rn var bbox = canvas.getBoundingClientRect();rn return rn x:mousedownX - bbox.x,rn y:mousedownY - bbox.yrn ;rnrnfunction updateRubberband(locX,locY) rn rubberbandRect.x = mousedown.x < locX ? mousedown.x : locX;rn rubberbandRect.y = mousedown.y < locY ? mousedown.y : locY;rn rubberbandRect.width = Math.abs(mousedown.x - locX);rn rubberbandRect.height = Math.abs(mousedown.y - locY);rnrnfunction drawRubberbandRect() rn var polygon = new Polygon(mousedown.x,rn mousedown.y,rn rubberbandRect.width,rn 6);rn drawOnePolygon(polygon);rn if (!dragging) rn shapes.push(polygon);rn ;rn rnrnrnfunction drawOnePolygon(polygon) rn context.beginPath();rn context.lineWidth = 10;rn polygon.createPath(context);rn context.stroke();rn rnrnfunction saveCanvasData() rn drawingSurfaceImageData = context.getImageData(0, 0,rn canvas.width,rn canvas.height);rn rnfunction restoreCanvasData () rn // body...rn context.putImageData(drawingSurfaceImageData,0,0);rnrn//用startDragging的目的是要使用saveCanvasData函数rnfunction startDragging(locX,locY) rn saveCanvasData();rn mousedown.x = locX;rn mousedown.y = locY;rnrnrnvar dragging = false,rn editing = false,rn mousedown = ,rn rubberbandRect = ,rn draggingOffsetX,rn draggingOffsetY;rncanvas.onmousedown = function(e) rn e.preventDefault();rn dragging = true;rn var loc = windowsToCanvas(e.clientX,e.clientY);rn for (var i = 0; i < shapes.length; i++) rn var shape = shapes[i];rn if (shape.isPointInPath(context,loc.x,loc.y))rn dragging = shape;rn startDragging(loc.x,loc.y);rn draggingOffsetX = mousedown.x - shape.x;rn draggingOffsetY = mousedown.y - shape.y;rn editing = true; rn return;rn ; rn ;rn rn rnrn rn startDragging(loc.x,loc.y);rnrncanvas.onmousemove = function(e) rn e.preventDefault();rn var loc = windowsToCanvas(e.clientX,e.clientY);rn if (dragging && editing) rn rn dragging.x = loc.x - draggingOffsetX;rn dragging.y = loc.y - draggingOffsetY; rn context.clearRect(0,0,canvas.width,canvas.height);rn drawPolygons();rnrn else if (dragging) rn restoreCanvasData();rn updateRubberband(loc.x,loc.y);rn drawRubberbandRect();rn ;rnrncanvas.onmouseup = function() rn dragging = undefined;rn if (!editing) rn drawRubberbandRect();rn ;rn editing = false;rn
制作不规则的多边形按钮
使用MFC制作三角形,五边形,以及圆形等不规则形状的按钮,
求不规则多边形的重心
计算多边形的重心,对凸多边形有效。先将多边形分解成多个三角形,分别求这些三角形的重心,然后得到一组更少点的集合。
QT绘制不规则多边形
第一种:直接在界面上绘制 在widget中对paintEvent进行重写,然后就可以得到多边形。 void Widget::paintEvent(QPaintEvent *event) { //创建画笔 QPainter painter(this); //创建画刷 QBrush brush(QColor(0, 0, 255), Qt::SolidPatter...
绘制多边形和不规则按钮
绘制多边形和不规则按钮。要结合上次提到的贝塞尔曲线和CAShapeLayer,去绘制你想要的形状。然后通过layer层的遮罩mask,进行设置,但仅仅这样是不够的,没有遮挡的部分也会响应点击。所以要重写Button的这个方法:pointInside,之后会详细介绍 先简单介绍一下遮罩mask这个属性: 比如layerA是layerB的mask,即layerB.mask = layerA
不规则多边形的算法
(40, 46), (95, 0), (144, 83), (32, 150), (24, 77), (128, 125), (110, 70)rnrn如何判定某一个坐标点在这个闭合的多边形内部呢??rnrn如(37,96)
如何画不规则的多边形
在多个不规则的点上,如何把这些点用线连起来,rnMap1.Layers.Item[1].AddFeature(rn Map1.FeatureFactory.CreateLine(cPoints, EmptyParam), rn EmptyParam); rn用CreateLine在各个点之间用线连起来,但线与线有交叉...rn请教各位怎么能让线不交叉呢???
求不规则多边形质心
最近做一个关于超像素的实验,实验过程中需要用到超像素的质心,所以在网上搜了一下资料,发现了一些不错的方法。 https://blog.csdn.net/tb3039450/article/details/24115303 这个我认为是挺不错的方法,但是程序的运行效率不高,因为计算每个质心都要便利整个图像,文中给出的图形较小,所以这个缺点还不是很明显,我需要的计算的数据较大,所以说我对这个程序进行了...
不规则多边形的绘制(GL_POLYGON)
课程涵盖了OpenGL开发的方方面面,对开发中经常用到的开发知识点进行讲解,从实战的角度进行编码设计.rn第1章-环境建立rn第2章-基础图元rn第3章-三维世界rn第4章-纹理多彩世界rn第5章-显存的分配-优化rn第6章-场景控制rn第7章-光照-真实世界rn第8章-模型rn第9章-UI制作rn第10章-场景编辑器制作rn第11章-地形rn第12章-脚本引入-lua
Unity绘制不规则多边形
点击鼠标绘制不规则多边形,并计算面积.
canvas实现不规则波浪
1.html中用canvas标签 &lt;canvas id="canvas" width="1920" height="200"&gt;&lt;/canvas&gt; 宽高根据自己需要自己定义 适用于PC和H5 2.js部分 &lt;script&gt; var canvas = document.getElementById('canvas'); ...
CANVAS绘制多边形
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35
Canvas多边形绘制
javascript实现任意角度正多边形绘制canvas图形源码.
字体(不规则多边形)的轮廓填充算法
字体(不规则多边形)的轮廓信息(N个封闭的多边形)已知,由一系列顶点组成,要求采用轮廓填充的方式填充,即先画出原始轮廓,再画小一号的轮廓,再小一号的轮廓,。。。直到填充完毕。rn 我的设想是采用多边形伸缩转换算法来求比原始轮廓小一号的轮廓,现在的问题是多边形是不规则的,也就是说每个顶点在伸缩时的原点是不同的,如何确定每个顶点的原点呢?rn 另外,外部轮廓在缩小到一定程度会和内部轮廓相交,相交后如何处理呢?rn 敬请赐教!
计算不规则四边形(多边形)的面积
本文代码用于比较计算不规则四边形的面积的两种方法(海伦公式和向量积),因为本人最近在研究目标检测的问题,当标记目标是以不规则四边形标注或多边形时,需要基于此面积计算Recall,Precision,IoU来评价模型。 1. 海伦公式和向量积公式 海伦公式和向量积计算不规则四边形的面积,都是以计算三角形面积为基础。 海伦公式:(看代码) 向量积:https://blog.csdn.net/l...
opencv处理不规则多边形ROI
使用到的opencv函数 fillpoly函数 polylines函数 程序实例#include <opencv2/opencv.hpp> #include <iostream> using namespace std; using namespace cv; int main() { Mat img = imread("1.png"); Point root_points[1][6
opencv处理不规则多边形roi
【1】opencv图像处理库 【2】处理不规则多边形roi的方法
如何算不规则多边形的面积?
as title
不规则窗口移动
我的Dialog的风格被我设置为None,因为所有的图形我都要自绘。。。这样的话,我就要自己处理窗口移动消息。rn 我的方法是,当鼠标被点击的时候,记录当前窗口,然后在mousemove里面实现窗口的移动。rn 这样窗口确实移动了,但是有很多缺点。rn 第一是移动不同步 ,如果我慢速移动窗口,则窗口很正常,如果速度过快,窗口跟不上鼠标的移动步伐,并且程序没有其他的函数消耗时间。rn 第二是窗口的移动导致窗口上的控件图片不能正常显示,我的窗口上的关闭按钮是自己粘贴的一张图片,窗口在移动的时候如果朝下移动则没事,向上的话,该按钮的图片被覆盖。 rn
不规则窗口的移动
使用BC6中FORM的TransparentColor制作的不规则窗体如何移动?
如何移动一个多边形?
比如说移动三角形,其中一个点不动,另外两个点动rn希望像translate一样,移动之后仍然可以正确地containsrn
多边形移动demo
http://blog.csdn.net/qq_27570955/article/details/52994753
canvas绘制图形——直线、多边形、七巧板
前言 canvas 是 html5 中的一个新元素,主要用于图形的绘制,通过 JavaScript 来控制。&amp;lt;canvas&amp;gt; 标签定义一个图形容器,也可以叫做画布,通过 js 脚本可以绘制出各种各样的图像。 创建canvas 创建 canvas 只需要添加 canvas 标签就可以了,在创建时,除 id 外一般还会定制画布尺寸(width height)。定义画布尺寸不建议使用 css...
canvas——js画多边形方法
代码如下: var aa=document.getElementById("aa").getContext("2d"); aa.shadowBlur=6; aa.shadowColor="gray"; aa.shadowOffsetX=7; aa.shadowOffsetY=5; function createStar(cont
移动控制多边形鼠标移动多边形跟着移动
从网上找到的移动控制多边形的vc算法,我稍作修改
Html5 canvas绘图移动
在html5中,使用canvas绘制的图形,如何实现水平移动效果?rn当这个canvas绘制的图形移动到canvas的最右边时,让其向左移动;当移到canvas的最左边时,让其向右移动;重复这个步骤。rn求高手解决。能给个案例最+。rnrn假定这个canvas的宽度是1000px。
mfc创建不规则的多边形,急急急 !!!
我想实现这样的多边形,先不用管界面里面的按钮等等控件,我只想实现对话框的边缘图形,怎样用CreatePolygonRgn.实现????rn[img=https://img-bbs.csdn.net/upload/201405/13/1399979055_116917.png][/img]rn
opencv处理不规则多边形ROI 之二
相对于上一篇博客的功能扩充:opencv处理不规则多边形ROI的链接 ## 【1】从文件中读取坐标点 【2】对坐标点的个数没有限制 【3】首先选取区域顶点的第一个和第二个顶点 【4】自动对区域的上半部分进行像素值的变更(全为0或者255),只要我们有区域的坐标点集 【5】自动对区域的下半部分进行像素值的变更(全为0或者255),只要我们有区域的坐标点集 【6】坐标点集都放在了vector里 代码展示
Android 不规则多边形ImageView布局问题
![](http://img.bbs.csdn.net/upload/201412/17/1418778850_553531.png)rn就是上图中红圈部分的布局,分别有三个可编辑的ImageView,也就是说单击可以添加图片,其中还可以多点触控,实现缩放和移动,但撇开触控不说,就布局都很蛋痛了,求大神支招!求demo,求案例!
【cocos2dx】Sprite增加多边形(增加不规则碰撞)
//获取图片多边形区域 PolygonInfo polygon = AutoPolygon::generatePolygon("DragonBoy_texture_1.png"); //polygon创建精灵 Sprite *sprite = Sprite::create(polygon); sprite->setPosition(Vec2(200, 200)); addChild(sprite);
怎么用region填充不规则的多边形?
怎么用region填充不规则的多边形? 求大神!
java awt 画不规则封闭多边形的问题
在java awt 中,利用g.drawPolygon(x,y,215);rn其中x,y是数组rn在面板上画了一个不规则的封闭多边形rn,如果我用鼠标重新点击这个多边形,请问,我该怎么判断是不是选中了这个多边形哦?rn我试图从点击任意点的坐标来实现,但似乎有些困难rn比方说,我鼠标随意点了一下,程序怎么判断鼠标单击的位置在这个多边形内部,而不是在外部?rnrn2问rn如果在面板上随意画了一条直线,我现在要点击这个“直线”,程序怎么判断鼠标单击的位置正好在这条线上哦?
SOS!求教不规则多边形的几何中心算法
大虾们知道怎样求不规则多边形的几何中心点的原理(最好能提供具体算法)吗?TXrn
计算不规则多边形的面积、中心、重心
计算不规则多边形的面积、中心、重心 最近项目用到:在不规则多边形的中心点加一个图标。(e.g: xx地区发生暴雪,暴雪区域是多边形,给多边形中心加一个暴雪的图标) 之前的设计是,计算不规则多边形范围矩形bounds的中心点。这个比较简单,对于一些圆,矩形,凸多边形都比较适合。但是遇到凹多边形就会出现问题,比如一个月牙型的不规则多边形,bounds的中心点,就落到月牙外了。就有点难以接受了。 ...
opencv只操作不规则多边形roi
代码展示/* *【1】得到不规则多边形的roi: * void get_multi_roi_invade(Mat& img,vector<Point>pt_vector);//////得到不规则多边形roi的区域 *【2】从文件中读取不规则多边形roi的各个顶点坐标: *【3】得到roi,只对roi区域进行操作 */#include <opencv2/open
canvas绘图 移动
canvas绘制的图片左右移动,可实现两边界隐藏以及来回显示效果
蓝色不规则立体多边形PPT背景图片.zip
这是一张蓝色不规则立体多边形PPT背景图片; 关键词:蓝色幻灯片背景图片,立体多边形PowerPoint背景图片,.jpg格式;
高德地图根据不规则数组生成多边形
&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &lt;meta name="viewport" content="initial-scale=1.0...
把不规则多边形分割成矩形的问题
有一个由多个矩形重叠成的不规则图形,要重新分割成多个矩形不重叠组成的图形,求思路或者算法,自己写了很多次不是太麻烦就是太局限就是考虑不周到。。。rnrn分割的结果类似下图rnrn[img=http://ww2.sinaimg.cn/large/708b61ffjw1dmvg8x5r5ej.jpg][/img]
怎么画一个不规则多边形的切线?
先画水平的一对切线,再旋转十度画一对相互平行的切线,每隔十度画一对切线,一圈要画36对,怎么实现?[img=https://img-bbs.csdn.net/upload/201409/29/1412006112_675410.png][/img]

相似问题

1
canvas绘制视频在x5内核中不显示
2
在微信内置浏览器中用canvas的drawImage方法进行两张图片的拼合的相关问题
4
canvas与webSocket在移动端做电子签名时滑动太快,pc端同步展示时出现断点或者虚线?
0
html2canvas 获取不到节点的内容
2
canvas三角形动态轨迹
0
谁能实现移动用户在用户浏览器端直接对整个或部分页面进行截屏。请联系我哦,付费求解决
0
canvas保存为300DPI的图片
1
运用html2canvas 生成图片 然后 生成PDF chrome页面中图片在PDF中无法显示
2
使用html2canvas截图生成的Base64 参数,传递到后台,解析之后下载的图片和截图的图片不一致问题
0
unity中能否通过调整canvas的渲染模式为Arcamera来实现对视频中物体的识别
0
html2canvas不能识别svg中的图形,页面截取的图片,没有svg内容
1
wpf中将Canvas的内容以jpg的格式保存到指定文件夹下
1
html2canvas+Canvas2Image在移动端出现的问题
1
canvas 的 drawImages 是不是在手机浏览器上有不兼容的情况?该怎么处理
1
html2canvas截取不到背景图片和SVG中的图形????
1
#Leaflet#用Chart.js在JavaScript生成的canvas里面绘制饼图 获取ElementID后出错
1
请问在andorid图像处理中如何遍历canvas.drawXXX的每一点?
0
使用html2canvas网页截图,页面元素中如果包含canvas标签的话,canvas部分无法截取!!
1
canvas画chart统计图手机不兼容
2
关于canvas绘制二次贝塞尔曲线的问题