jcanvas如何控制不规则多边形在canvas大小范围内移动 5C

利用this.$canvas.drawPath画一个不规则多边形,如何写一个function控制其移动范围

1

1个回答


var oldPosition = {'x':100,'y':100};//图形的起始点
var area = {'w' : 50 , 'h' : 50};//绘制图形的宽高
var cvs = document.getElementById('cvs');
drawing : function(){
var ctx = this.canvas.getContext('2d');//得到画笔
ctx.clearRect(0,0,this.canvas.width,this.canvas.height);//每次绘制前先清除之前绘制的图形
ctx.beginPath();
ctx.fillStyle = this.color;
ctx.fillRect(this.oldPosition.x,this.oldPosition.y,this.area.w,this.area.h);
ctx.closePath();
}

0
qq_37583141
南烟i 我是利用jcanvas画的
大约一年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
如何画不规则的多边形
在多个不规则的点上,如何把这些点用线连起来,rnMap1.Layers.Item[1].AddFeature(rn Map1.FeatureFactory.CreateLine(cPoints, EmptyParam), rn EmptyParam); rn用CreateLine在各个点之间用线连起来,但线与线有交叉...rn请教各位怎么能让线不交叉呢???
如何算不规则多边形的面积?
as title
关于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
如何移动一个多边形?
比如说移动三角形,其中一个点不动,另外两个点动rn希望像translate一样,移动之后仍然可以正确地containsrn
MouseMove控制Canvas移动的问题
大家好,我的代码大概是这样的:rn rn rn rn rn rn rn rn rn rn rn rn rnrn 其实想实现的功能就是,当鼠标在layoutThree里动的时候,能够让layoutOne,layoutTwo,layoutThree进行移动。具体的layoutThree_MouseMove方法里的代码该怎么写呢?rn 大家会发现,实际上就是[url=http://www.microsoft.com/silverlight/]http://www.microsoft.com/silverlight/[/url]里的主画面功能。我在网上找了半天,没找到那东西的源码,只好自己慢慢做。如果大家谁找到了,请一定告诉我,感激和分数同送。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)
求不规则多边形质心
最近做一个关于超像素的实验,实验过程中需要用到超像素的质心,所以在网上搜了一下资料,发现了一些不错的方法。 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绘制不规则多边形
点击鼠标绘制不规则多边形,并计算面积.
如何控制 不规则窗体?
规则窗体 ,我们很可以通过API把他绑定到 另一个窗体中.无论主窗体如何操作,被绑定的永远是在他的内部不能出来,就好像MDI.rnrn但是如何让不规则窗体也被绑定呢?(就像窗体和按钮等控件的关系)rnrn谢谢
Tab键控制光标在指定范围内移动
关于javascript实现Tab键控制光标在指定范围内移动 问题的提出:在IE浏览器中,模态框显示出来后,父画面的操作停止,画面能够操作的部分仅仅是在模态框内部,Tab键移动光标位置也是如此。但是在Chrome与Firefox中,模态框是用一些插件来实现的,例如jQuery EasyUI的Dialog等。实现了模态框的表示,但是与IE的模态框相比稍显不足,仍然可以Tab键操作父页面,达不到跟IE
如何动态改变canvas 的大小
例如:rn rn 您的浏览器不支持canvas!rn rnrn当 我所需要的canvas画布大小不能满足我的时候,怎么动态设置 ?rn 直接修改 canvas=document.getElementById("myCanvas"); canvas.width=2000 这样的修改的话图像也没了。 求解决!
如何实现不规则窗体的移动?
如何实现不规则窗体的移动?
如何实现不规则窗口的移动?
如何实现不规则窗口的移动?
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'); ...
7while控制窗体大小与移动
尹成老师带你步入Java语言的殿堂,讲课生动风趣、深入浅出,全套视频内容充实,整个教程以Java语言为核心,完整精彩的演练了Java操作流程以及各种精彩的小项目等,非常适合大家学习!
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图形源码.
判断点是否在多边形的范围内
[code=&quot;java&quot;] public class GeometryUtils { public final static double EPSILON=0.00001; public static double getEpsilon(double maxx, double maxy,double minx, double miny, double epsilon){ ...
不规则对话框如何改变大小!
Q:我用SetWindowRgn生成了一个无模式的对话框,想在对话框的右下角放个图片或其它东西,当鼠标在这个区域内按下并拖动的话,对话框大小发生变化!rnrnMYA:我的想法是这样:共涉及到三个事件ONLBUTTONDOWN,ONLBUTTONUP,ONMOUSEMOVE当鼠标按下时,记录下鼠标左键按下的坐标,当鼠标移动时,利用记录下的坐标减去当前坐标,得到偏移量,然后将窗口SW_HIDE,然后根据偏移量再生成一个新的RGN,再SetWindowRgn,显示窗口!这样的话基本可以达到效果,但是在变化大小的过程中,会不停的闪烁,参考MSDN后,得知原因是因为SHOWWINDOW(SW_HIDE);会激活其它窗口,从而发生闪烁!rnrnWANT:不知道那位高手有更好的解决方案,或是能解决闪烁的问题!rnrnCODE:rnvoid CCapDlg::OnLButtonDown(UINT nFlags, CPoint point)rnrn m_downPoint = point;rn ClientToScreen(&m_downPoint);rn SetCapture();rn m_bIsMove = true;rn if(m_sizeRect.PtInRect(point))rn rn m_bMove = false;rn SetCursor(LoadCursor(NULL,IDC_SIZENWSE));rn rn rn elsern rn m_bMove = true;rn SetCursor(LoadCursor(NULL, IDC_SIZEALL));rn rn CDialog::OnLButtonDown(nFlags, point);rnrnrnrnvoid CCapDlg::OnLButtonUp(UINT nFlags, CPoint point)rnrn ReleaseCapture();rn m_bIsMove = false;rn CPoint MyPoint=point;rn ClientToScreen(&MyPoint);rn int xOffset,yOffset;rn xOffset = MyPoint.x-m_downPoint.x;rn yOffset = MyPoint.y-m_downPoint.y;rn if(m_bMove = false)rn rn m_bMove = true;rn rn elsern rn rn rn CDialog::OnLButtonUp(nFlags, point);rnrnrnvoid CCapDlg::OnMouseMove(UINT nFlags, CPoint point)rnrn if(m_bIsMove)rn rn CPoint MyPoint=point;rn ClientToScreen(&MyPoint);rn int xOffset,yOffset;rn xOffset = MyPoint.x-m_downPoint.x;rn yOffset = MyPoint.y-m_downPoint.y;rnrn if(m_bMove)rn rn rn SetWindowPos(&CWnd::wndTop, m_startPoint.x+xOffset, m_startPoint.y+yOffset, m_outRect.right, m_outRect.bottom,SWP_SHOWWINDOW);rn rn rn elsern rn rn rn this->ShowWindow(SW_HIDE);rn rn m_capRect.SetRect(5,5,5+cameraWidth+xOffset,5+cameraHeight+yOffset);rnrn m_outRect.SetRect(0,0,m_capRect.right+5,m_capRect.bottom+30);rn m_sizeRect.SetRect(m_outRect.right-20,m_outRect.bottom-20,m_outRect.right,m_outRect.bottom);rn m_capButtonRect.SetRect(m_outRect.right-85,m_capRect.bottom+4,m_outRect.right-30,m_capRect.bottom+26);rn rn CRgn rgnA, rgnB, rgnC;//创建三个用来初始化窗口的区域rnrn VERIFY(rgnA.CreateRectRgnIndirect(LPCRECT(m_outRect)));rn VERIFY(rgnB.CreateRectRgnIndirect(LPCRECT(m_capRect)));rn VERIFY(rgnC.CreateRectRgn( 0, 0, 0, 0 ));//设定三个区域rn rn int nCombineResult = rgnC.CombineRgn( &rgnA, &rgnB, RGN_XOR );rn ASSERT( nCombineResult != ERROR || nCombineResult != NULLREGION );rn SetWindowRgn((HRGN)rgnC,NULL);rn SetWindowPos(&CWnd::wndTop, m_startPoint.x, m_startPoint.y, m_outRect.right, m_outRect.bottom,SWP_SHOWWINDOW);rn //设置窗口的位置,大小和其它rn ShowWindow(SW_SHOW);rn //m_bMove = true;rn rn rn rn rn elsern rn ReleaseCapture();rn rn //ReleaseCapture();rn CDialog::OnMouseMove(nFlags, point);rnrn
Canvas实例教程 图像移动 大小调整和裁剪
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的方法
canvas如何响应鼠标事件删除不规则图形
首先,这个canvas有背景色。rnrn其次,我已写好一个画图函数。每次点击鼠标,就能在鼠标的位置添加一个不规则图形。rnrn这时,能否通过在已建立的不规则图形上再次点击鼠标,而把该图形删除。rnrn同时,canvas的背景色不受影响,或许和该图形叠加的其他图形也不受影响。rnrn我的思路是这样的。rnrn0)将我的不规则图形看作尽可能大的矩形,用这个矩形来近似处理该不规则图形。rnrn1)用一个队列,记录下每次鼠标的点击位置,也就是每个图形生成的坐标。rnrn2)每次点击鼠标,均进行判定rn 若rn 该位置在某个不规则图形的近似矩形范围内,则重绘背景及其他所有不规则图形。rn 否则rn 在当前位置画新的不规则图形。rn rn我的思路是否可行?rn rnrn
Unity3d镜头范围内移动。
1:经过1天的尝试,最终还是使用Mathf.Clamp。 2:创建地形teriann. 3:镜头绑定到物体上,为物体添加碰撞盒,刚体,选择运动学。使它在碰撞后不会有力的作用。 4:在fixupdate中添加区域检测。 using System; using System.Collections.Generic; using UnityEngine; using System.Col
JavaScript 控制(改变)canvas(画布)的大小
前段时间在论坛看到有人问如何自由改变画布大小,闲来无事,就花了点时间解决,在CSDN 博客中没有相关博文,于是顺手记录下来html5 里面有一个新标签canvas,也就是画布,画布常常需要重绘,改变大小等 这里处理的就是改变大小的问题,总结一下改变大小的方式, 1.直接设置style,document.getElemntById("canvas").style.width="" document
html5 Canvas 如何自适应屏幕大小
但是这样创建出的画布不能随着浏览器窗口大小的改变而动态的改变画布的大小。而这一点往往又非常重要, 因为我们会经常改变浏览器窗口大小,不会一直保持某个固定的大小。  html代码 canvas width="300" height="300" id="myCanvas">canvas> 设置样式 * { margin: 0; padding: 0; } html,body{
如何改变Canvas区域的大小
varrn LCanvas: TCanvas;rn a: HDC;rnbeginrn a := CreateCompatibleDC(Canvas.Handle);rn LCanvas := TCanvas.Create;rn LCanvas.Handle := a;rn LCanvas.TextOut(0,0,'asddddddddddddddddd');rn BitBlt(Canvas.Handle, 0, 0, Width, Height, LCanvas.Handle, 0, 0, SRCCOPY);rn LCanvas.Free;rn DeleteDC(a);rnend;rn这样是不是就建立了内存DC?这样对吗?我运行后发现并没有把LCanvas上的内容拷贝到窗体上,跟踪后发现LCanvas的宽度长度都是1,所以才显示不了。我尝试改变LCanvas的ClipRect的大小发现他是只读的。我查遍了MSDN也没有找到改变HDC大小的API,请问如何解决?
不规则窗口移动
我的Dialog的风格被我设置为None,因为所有的图形我都要自绘。。。这样的话,我就要自己处理窗口移动消息。rn 我的方法是,当鼠标被点击的时候,记录当前窗口,然后在mousemove里面实现窗口的移动。rn 这样窗口确实移动了,但是有很多缺点。rn 第一是移动不同步 ,如果我慢速移动窗口,则窗口很正常,如果速度过快,窗口跟不上鼠标的移动步伐,并且程序没有其他的函数消耗时间。rn 第二是窗口的移动导致窗口上的控件图片不能正常显示,我的窗口上的关闭按钮是自己粘贴的一张图片,窗口在移动的时候如果朝下移动则没事,向上的话,该按钮的图片被覆盖。 rn
不规则窗口的移动
使用BC6中FORM的TransparentColor制作的不规则窗体如何移动?
多边形移动demo
http://blog.csdn.net/qq_27570955/article/details/52994753
如何让组件在NetWork的指定范围内移动
如何让组件在NetWork的指定范围内移动 收藏 winner 写道: TNetWork放置在一个JPanel上,JPanel的大小设置为(1000,1000) TNetWork的大小设置为(1000,1000) TNetWork上放置一个父Grid,Grid大小设置为(1000,1000) 在父Grid上的某个单元格放一个子Grid,为什么子Grid可以拉到(1000,1000)范...
子窗体如何能在父窗体范围内移动
rt,不适用MDI方式。
canvas绘制图形——直线、多边形、七巧板
前言 canvas 是 html5 中的一个新元素,主要用于图形的绘制,通过 JavaScript 来控制。&amp;lt;canvas&amp;gt; 标签定义一个图形容器,也可以叫做画布,通过 js 脚本可以绘制出各种各样的图像。 创建canvas 创建 canvas 只需要添加 canvas 标签就可以了,在创建时,除 id 外一般还会定制画布尺寸(width height)。定义画布尺寸不建议使用 css...