控制多边形在canvas大小范围内移动 10C

限制矩形在canvas大小范围内移动的function的如下:
DrawingManager.prototype.limitOut = function (layer) {
console.log(layer);
if (layer.y < 1) {
layer.y = 1;
}
if (layer.x < 1) {
layer.x = 1;
}
if (layer.x + layer.width > layer.canvas.width + 1) {
layer.x = layer.canvas.width - layer.width - 1;
console.log("layer.canvas.width =" + layer.canvas.width,"layer.width = " + layer.width,"layer.x =" + layer.x);
}
if (layer.y + layer.height > layer.canvas.height + 1) {
layer.y = layer.canvas.height - layer.height - 1;
console.log("layer.canvas.height =" + layer.canvas.height,"layer.height = " + layer.height," layer.y = " + layer.y);
}
}
模仿矩形的写法,我写的如下:
DrawingManager.prototype.limit_Poly = function (layer){
//var Map = JSON.stringify(layer.p1);
console.log(layer);
var map = layer.p1;
console.log(map);
var xmax = -Infinity;
var ymax = -Infinity;
var xmin = Infinity;
var ymin = Infinity;
for (var n in map) {
if (n.charAt(0)=="x") {
xmax = Math.max(map[n],xmax);
xmin = Math.min(map[n],xmin);
}
if (n.charAt(0)=="y") {
ymax = Math.max(map[n],ymax);
ymin = Math.min(map[n],ymin);
}
}
console.log("xmax = "+ xmax +", ymax = "+ ymax +", xmin = "+ xmin +", ymin = "+ ymin);
var M = {"type":"line","x1":xmin,"y1":ymin,"x2":xmax,"y2":ymax};
layer.p1 = M;
console.log(layer.p1);
if (layer.p1.y1 < 1) {
layer.p1.y1 = 1;
}
if (layer.p1.x1 < 1){
layer.p1.x1 = 1;
}
if (layer.p1.x1 > layer.canvas.width){
layer.p1.x1 = layer.canvas.width - 1;
}
if (layer.p1.y1 > layer.canvas.height){
layer.p1.y1 = layer.canvas.height -1;
}
}
不能有效控制,求各位大神指出我该如何修改,在线等,急,谢谢

1

3个回答

最大值是x3和y2啊

if (layer.p1.x2 > layer.canvas.width){
layer.p1.x2 = layer.canvas.width - 1;
}
if (layer.p1.y2 > layer.canvas.height){
layer.p1.y2 = layer.canvas.height -1;
}

1
jslang
天际的海浪 你应该是多边形的每个点都要按比例调整,不能只取最大最小的4个点
大约一年之前 回复
qq_37583141
南烟i var M = {"type":"line","x1":xmin,"y1":ymin,"x2":xmax,"y2":ymax}; layer.p1 = M;这里我把多边形变成了矩形,是不对的,望大神指点
大约一年之前 回复
jslang
天际的海浪 最大值是x2和y2啊
大约一年之前 回复
0
qq_37583141
南烟i 虽然没什么帮助,不过还是得谢谢你
大约一年之前 回复
 先计算出 x,y的最大最小值,
当x最小值<0,则把所有点的x坐标都加上 0-x最小值。
当x最大值>画布宽度,则把所有点的x坐标都减去 x最大值-画布宽度。
y坐标同上

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
移动控制多边形鼠标移动多边形跟着移动
从网上找到的移动控制多边形的vc算法,我稍作修改
Canvas实例教程 图像移动 大小调整和裁剪
Canvas实例教程 图像移动 大小调整和裁剪
Unity3d镜头范围内移动。
1:经过1天的尝试,最终还是使用Mathf.Clamp。 2:创建地形teriann. 3:镜头绑定到物体上,为物体添加碰撞盒,刚体,选择运动学。使它在碰撞后不会有力的作用。 4:在fixupdate中添加区域检测。 using System; using System.Collections.Generic; using UnityEngine; using System.Col
Html5 canvas绘图移动
在html5中,使用canvas绘制的图形,如何实现水平移动效果?rn当这个canvas绘制的图形移动到canvas的最右边时,让其向左移动;当移到canvas的最左边时,让其向右移动;重复这个步骤。rn求高手解决。能给个案例最+。rnrn假定这个canvas的宽度是1000px。
canvas绘图 移动
canvas绘制的图片左右移动,可实现两边界隐藏以及来回显示效果
只允许鼠标在Canvas移动
我相让鼠标只能在某个容器组件的移动,比如画布,请问各位,如何实现呢?急!
canvas方块移动
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt;     &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt;     &amp;lt;title&amp;gt;Title&amp;lt;/title&amp;gt;     &amp;lt;style&amp;gt;         *{             margin: 0;
canvas 像素大小的问题
我今天初学canvas碰到个问题rn像素大小与真实情况不符,例如 汪坐标为100,100画圆,但是却显示到300,300处rn边界碰撞检测无效,求大神看看是哪问题rn上代码:rn[code=javascript]rnvar radius = 15;rnvar girthBegin = 0;rnvar girthEnd = 2;rnvar timer;rnvar x = 0;rnvar y = 0;rnvar h = 'right'; rnvar v = 'down'; rnrn$(document).ready (function() rn $('#myCanvas').width('1200');rn $('#myCanvas').height('600');rn $('#myCanvas').css(background: '#000');rnrn rnrn setInterval(function() rn var context = context = $('#myCanvas').get(0).getContext("2d");rn context.clearRect(x - 40, y - 40, radius * 2 + 40, radius * 2 + 40);rn rn if (x - radius <= 0) rn h = 'right';rn else if (x + radius >= parseInt($('#myCanvas').width())) rn h = 'left';rn rnrn if (y - radius <= 0) rn v = 'down';rn else if (y + radius >= parseInt($('#myCanvas').height())) rn v = 'up';rn rnrn hint(" x:"+x+" y:"+y+" v:" +v+" h:"+h);rnrn // 右移rn if (h == 'right') rn x++;rn else if (h == 'left') rn x--;rn rn rn // 下移rn if (v == 'down')rn y++;rn else if (v == 'up') // 上移rn y--;rn rn rn drawCircle(x, y);rn , 100);rnrn $(window).keydown(function(event)rn switch(event.keyCode) rn case 80:rn clearInterval(timer);rn break;rn rn );rn);rnrnfunction drawCircle(x, y) rn var context = context = $('#myCanvas').get(0).getContext("2d");rn context.save();rn context.fillStyle = '#eee';rn context.beginPath();rn context.arc(x, y, radius, girthBegin, Math.PI * girthEnd);rn context.closePath();rn context.fill();rnrnrnfunction hint(info) rn $("span").get(0).innerHTML = info;rn $('span').css(color: "#fff", position: "absolute", top: "10px");rnrn[/code]rnrn[code=html]rnrnrn rn HTML5rn rn rn rn rn rn rn rn rn rn rnrn[/code]rn
canvas设置大小
canvas元素实际上有两套尺寸,一个是元素本身的大小,还有一个就是元素绘图表明的大小, 设置canvas的width和height属性,实际上是同时修改了它的元素本身的大小以及元素绘图表面的大小, 默认情况下canvas元素于其绘图表面都是300*150, canvas{ /*width: 600px;*/ /*height: 300px;*/
canvas自适应屏幕大小
 获取canvas: var canvas = document.querySelector(&quot;canvas&quot;); var context = canvas.getContext('2d'); 获取移动设备屏幕的大小: 1.document.documentElement.clientWidth:可见区域宽度;   document.documentElement.clientHeigh...
如何动态改变canvas 的大小
例如:rn rn 您的浏览器不支持canvas!rn rnrn当 我所需要的canvas画布大小不能满足我的时候,怎么动态设置 ?rn 直接修改 canvas=document.getElementById("myCanvas"); canvas.width=2000 这样的修改的话图像也没了。 求解决!
bitmap 和canvas的大小关系?paintbox 和canvas 的大小关系?
求详细答案,最好能回答三者的关系。谢谢。![图片说明](http://forum.csdn.net/PointForum/ui/scripts/csdn/Plugin/001/face/9.gif)![图片说明](http://forum.csdn.net/PointForum/ui/scripts/csdn/Plugin/001/face/1.gif)![图片说明](http://forum.csdn.net/PointForum/ui/scripts/csdn/Plugin/001/face/1.gif)
canvas元素的大小与绘图表面的大小
使用css来设置canvas元素的大小,与直接设置属性相比,其差别是基于这样一个事实,canvas元素实际上有两套尺寸,一个是元素本身的大小,还有一个是元素绘图表面的大小 当设置元素的width与height 属性时,实际上是同时修改了该元素本身的大小与元素绘图表面的大小,通过css来设定canvas元素的大小,只会改变元素本身的大小,canvas绘图表面默认大小300x150像素,所以当can
Canvas坦克在画布上移动
Canvas坦克在画布上移动
Canvas绘制星球轨迹移动
在开发在线游戏时,绘制动画是非常重要的。本节介绍一个使用Canvas API实现的动画实例——小型太阳系模型,由地球、月球和太阳组成。在漆黑的夜空中,地球围着太阳转、月球围绕地球转.p(1)定期绘图,也就是每隔一段时间就调用绘图函数进行绘图。动画当时多次绘图实现的,一次绘图只能实现静态图像。p可以使用setInterval()方法设置一个定时器,语法如下:setInterval(函数名,时间间隔)
canvas 随机移动的彩色小圆点
运用canvas技术,制作的一个小案例。随机生成小圆点的位置,颜色。
canvas 中的元素旋转和移动
用vue.js实现的canvas中的元素旋转和平移,同时可以进行缩放,还可以点击连线
Canvas仿blend移动缩放
用Wpf的布局控件实现了类似blend里的移动和缩放效果,移动、缩放精准无误。
canvas绘制随机移动的气泡
Bouncing Balls body { background: #dddddd; } #canvas { margin-left: 10px; margin-top: 10px; background: #ffffff;
关于canvas的移动和旋转操作
关于canvas的移动和旋转操作 canvas的移动(translate)和旋转(rotate)其实是对一个看不见的坐标系进行操作。 save()方法是保存的坐标系的状态。 restore()方法是还原回上一个坐标系状态。
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 初学者,请勿见怪。
canvas移动蜘蛛网背景特效
H5中canvas移动蜘蛛网背景特效
html5 Canvas 如何自适应屏幕大小
但是这样创建出的画布不能随着浏览器窗口大小的改变而动态的改变画布的大小。而这一点往往又非常重要, 因为我们会经常改变浏览器窗口大小,不会一直保持某个固定的大小。  html代码 canvas width="300" height="300" id="myCanvas">canvas> 设置样式 * { margin: 0; padding: 0; } html,body{
怎样设置Image的Canvas的大小?
有谁知道怎样控制Image的Canvas的width,和Heigth吗??在线等。
canvas怎样设置大小啊
我用setBounds,setSize,setClip都不管用?急,谢谢!
基于canvas的图像大小处理
基于base64的图像大小计算
如何改变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,请问如何解决?
自定义控件设置canvas画布的大小
自定义的控件用canvas控制它的大小 @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { //设置宽高 setMeasuredDimension(900,500); } 只用重写onMeasure这个方法,然后设置它的宽高就可
Tab键控制光标在指定范围内移动
关于javascript实现Tab键控制光标在指定范围内移动 问题的提出:在IE浏览器中,模态框显示出来后,父画面的操作停止,画面能够操作的部分仅仅是在模态框内部,Tab键移动光标位置也是如此。但是在Chrome与Firefox中,模态框是用一些插件来实现的,例如jQuery EasyUI的Dialog等。实现了模态框的表示,但是与IE的模态框相比稍显不足,仍然可以Tab键操作父页面,达不到跟IE
子窗体如何能在父窗体范围内移动
rt,不适用MDI方式。
Chart.js插件的canvas大小问题
Detecting when the canvas size changes can not be done directly from the CANVAS element. Chart.js uses its parent container to update the canvas render and display sizes. However, this method requires...
如何让组件在NetWork的指定范围内移动
如何让组件在NetWork的指定范围内移动 收藏 winner 写道: TNetWork放置在一个JPanel上,JPanel的大小设置为(1000,1000) TNetWork的大小设置为(1000,1000) TNetWork上放置一个父Grid,Grid大小设置为(1000,1000) 在父Grid上的某个单元格放一个子Grid,为什么子Grid可以拉到(1000,1000)范...
怎样让照片在窗口范围内移动
我在C#2005中做了个窗口,窗口里有pictureBox控件显示照片,现在已经设计成用鼠标拖动照片在窗口里移动,但是照片能够移动到窗口外面,怎样进行限制,不让照片移出窗口工作区的范围?
UIImageView范围内放大,缩小,移动 -- 官方文档代码
UIImageView范围内放大,缩小,移动 -- 官方文档代码 我们都知道,使用UIImagePickerController选择完图片时,设置属性allowsEditing=YES;,那么选中的图片就会跳转到一个新的控制器,在这个控制器里可以在指定的范围内放大、缩小和移动,但是这个界面是CocoaTouch决定的 如果我们自己单独新建一个控制器要写这样的代码,直接用UIPi
限制游标移动在指定的范围内?how?
我想要限制游标移动在指定范围内,如在字段“科目”的“语文”和和字段“考试时间”的“2000-3-1”之内,以下语句不行,怎样修改?rnif ( adotable3['科目']=DBLookupComboBox2.text and adotable3['考试时间'] =DBLookupComboBox3.text) thenrn rnadotable3.Prior;
如何将鼠标的移动,限制在一定的范围内??
如题
救命(如何让一个层在指定范围内移动)
救命(如何让一个层在指定范围内移动)rn我已经两天没睡了。。。救救我吧。
如何将窗口移动限定在一个范围内?
如何将窗口限定在一个范围内?rn用的是WTL编程,我现在处理的是WM_MOVE或WM_MOVING,能够限定窗口在一个范围中移动,但是在处理超出范围的时候,窗口抖动厉害。rn有没有成熟的做法?
如何设置鼠标限制在一个范围内移动?
用什么函数?rnthanks
Panel 在窗体范围内移动,通过鼠标移动事件!!
让panel在窗体的范围内移动,通过鼠标移动事件!!!!(有代码最好!!!)
相关热词 c#异步发送kafka c#窗体编号 c# 操作二进制文件 c# 反射 机制 c#线程 窗体失去响应 c#角度转弧度 c# 解析gps数据 c# vs设置 语法版本 c# json含回车 c#多线程demo