本文介绍了如何在< canvas> ;?中获取形状边缘的所有坐标？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在我的画布上有一个形状，我需要得到它的边缘的所有坐标。形状可以是规则的或不规则的。
解决方案
您可以使用Marching Squares算法来检测封闭形状：
这个由Michael Bostock为他出色的d3可视化工具是伟大的：
<！doctype html>
< html>
< head>
< link rel =stylesheettype =text / cssmedia =allhref =reset.css/> <！ - reset css - >
< script type =text / javascriptsrc =http://code.jquery.com/jquery.min.js>< / script>
< style>
body {background-color：ivory; }
canvas {border：1px solid red;}
< / style>
< script>
$（function（）{
//前进正方形边缘检测
//这是用于计算大纲路径的前进蚂蚁算法
（）{
// d3-plugin用于计算大纲路径
//许可证：https://github.com/d3/d3-plugins/blob/master/LICENSE
//
//版权所有（c）2012-2014，Michael Bostock
//保留所有权利
//
//在源代码和二进制形式中重新分发和使用b $ b //修改，如果满足以下条件，则允许：
// *源代码的再分发必须保留上述版权声明，此
//条件列表和以下免责声明。
// *以二进制形式重新分发必须重现上述版权声明，
//此文档列表中的条件和以下免责声明
//和/或分发提供的其他材料。
// *未经特定的事先书面许可，Michael Bostock不得用于支持或促销本软件产生的
//。
//本软件由版权所有者和贡献者按原样提供，任何明示或暗示的保证，包括但不限于适销性和特定用途适用性的默示保证。在任何情况下，MICHAEL BOSTOCK对任何直接，间接，偶发，特殊，惩罚性或后果性损害（包括但不限于替代商品或服务的采购，使用，数据或利润损失，或业务中断），无论是由于任何责任推定原因，无论是在合同，严格责任或侵权（包括疏忽或其他方式）以任何方式使用本软件，即使已被告知此类损害的可能性。
geom = {};
geom.contour = function（grid，start）{
var s = start || d3_geom_contourStart（grid），//起点
c = []，//轮廓多边形
x = s [0]，//当前x位置
y = s [1]位置
dx = 0，//下一个x方向
dy = 0，//下一个y方向
pdx = NaN，//上一个x方向
pdy = NaN，前y方向
i = 0;
do {
//确定前进方块索引
i = 0;
if（grid（x-1，y-1））i + = 1;
if（grid（x，y-1））i + = 2;
if（grid（x-1，y））i + = 4;
if（grid（x，y））i + = 8; if
//确定下一个方向
if（i === 6）{
dx = pdy === -1？ -1：1;
dy = 0;
} else if（i === 9）{
dx = 0;
dy = pdx === 1？ -1：1;
} else {
dx = d3_geom_contourDx [i];
dy = d3_geom_contourDy [i];
}
//更新轮廓多边形
if（dx！= pdx& dy！= pdy）{
c.push（[x，y ]）;
pdx = dx;
pdy = dy;
}
x + = dx;
y + = dy;
} while（s [0]！= x || s [1]！= y）;
return c;
};
//用于前进方向的查找表
var d3_geom_contourDx = [1,0,1,1，-1,0，-1,1,0,0,0,0， 1，0，-1，NaN]，
d3_geom_contourDy = [0，-1,0,0,0，-1,0,0,1，-1,1,1,0，-1,0 ，NaN];
function d3_geom_contourStart（grid）{
var x = 0，
y = 0;
//搜索起点;开始于原始
//，继续向外扩展的对角线
while（true）{
if（grid（x，y））{
return [x，y]
}
if（x === 0）{
x = y + 1;
y = 0;
} else {
x = x - 1;
y = y + 1;
}
}
}
}）（）;
//////////////////////////////////////// ////
// canvas相关变量
var canvas = document.getElementById（canvas）;
var ctx = canvas.getContext（2d）;
var cw = canvas.width;
var ch = canvas.height;
//复选框显示/隐藏原始图像
var $ showImage = $（＃showImage）;
$ showImage.prop（'checked'，true）;
//复选框显示/隐藏路径大纲
var $ showOutline = $（＃showOutline）;
$ showOutline.prop（'checked'，true）;
//定义大纲路径的点数组
var points;
//这个图像的像素数据为defineNonTransparent
//函数使用
var imgData，data;
//由行进蚁算法使用
//来确定图像上非透明
//像素的轮廓
var defineNonTransparent = function（x，y）{
var a = data [（y * cw + x）* 4 + 3];
return（a> 20）;
}
//加载图像
var img = new Image（）;
img.crossOrigin =anonymous;
img.onload = function（）{
//绘制图像
//（这次抓取图像的像素数据
ctx.drawImage（img， canvas.width / 2-img.width / 2，canvas.height / 2-img.height / 2）;
//获取图像的像素数据
imgData = ctx.getImageData 0,0，canvas.width，canvas.height）;
data = imgData.data;
//调用前进蚂蚁算法
//得到大纲路径图像
//（outline =透明像素的外部路径
points = geom.contour（defineNonTransparent）;
ctx.strokeStyle =red;
ctx .lineWidth = 2;
$ showImage.change（function（）{redraw（）;}）;
$ showOutline.change }）;
redraw（）;
}
img.src =https：//dl.dropboxusercontent.com/u/139992952/stackoverflow/sun .png;
//重绘画布
//用户确定原始图像或大纲路径或两者是否可见
function redraw（）{
//清除画布
ctx.clearRect（0,0，canvas.width，canvas.height）;
//绘制图像
if（$ showImage.is（'：checked'））{
ctx.drawImage（img，canvas.width / 2-img.width /2,canvas.height/2-img.height/2）;
}
//绘制路径（由连接点组成）
if（$ showOutline.is（'：checked'））{
//绘制轮廓path
ctx.beginPath（）;
ctx.moveTo（points [0] [0]，points [0] [1]）;
for（var i = 1; i< points.length; i ++）{
var point = points [i];
ctx.lineTo（point [0]，point [1]）;
}
ctx.closePath（）;
ctx.stroke（）;
}
}
}）; // end $（function（）{}）;
< / script>
< / head>
< body>
< input type =checkboxid =showImage/>显示图片< br>
< input type =checkboxid =showOutline/>显示大纲路径< br>
< canvas id =canvaswidth = 300 height = 450>< / canvas> < / body>
< / html>
There is a shape in my canvas, and I need to get all coordinates of its edge. The shape may be regular or irregular.
解决方案
You can use the "Marching Squares" algorithm to detect the edge path of a closed shape:
This one by Michael Bostock for his excellent d3 visualization tool is great:
https://github.com/d3/d3-plugins/tree/master/geom/contour
The key to using his version of Marching Squares is defining the function that defines pixels inside your shape vs pixels outside your shape. Here's a function that uses the .getImageData pixel array (data) to fetch non-transparent pixels:
// This is used by the marching ants algorithm
// to determine the outline of the non-transparent
// pixels on the image
var defineNonTransparent=function(x,y){
var a=data[(y*cw+x)*4+3];
return(a>20);
}
Example code and a Demo: http://jsfiddle.net/m1erickson/5v5hmo62/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
</style>
<script>
$(function(){
// Marching Squares Edge Detection
// this is a "marching ants" algorithm used to calc the outline path
(function() {
// d3-plugin for calculating outline paths
// License: https://github.com/d3/d3-plugins/blob/master/LICENSE
//
// Copyright (c) 2012-2014, Michael Bostock
// All rights reserved.
//
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are met:
//* Redistributions of source code must retain the above copyright notice, this
// list of conditions and the following disclaimer.
//* Redistributions in binary form must reproduce the above copyright notice,
// this list of conditions and the following disclaimer in the documentation
// and/or other materials provided with the distribution.
//* The name Michael Bostock may not be used to endorse or promote products
// derived from this software without specific prior written permission.
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL MICHAEL BOSTOCK BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
geom = {};
geom.contour = function(grid, start) {
var s = start || d3_geom_contourStart(grid), // starting point
c = [], // contour polygon
x = s[0], // current x position
y = s[1], // current y position
dx = 0, // next x direction
dy = 0, // next y direction
pdx = NaN, // previous x direction
pdy = NaN, // previous y direction
i = 0;
do {
// determine marching squares index
i = 0;
if (grid(x-1, y-1)) i += 1;
if (grid(x, y-1)) i += 2;
if (grid(x-1, y )) i += 4;
if (grid(x, y )) i += 8;
// determine next direction
if (i === 6) {
dx = pdy === -1 ? -1 : 1;
dy = 0;
} else if (i === 9) {
dx = 0;
dy = pdx === 1 ? -1 : 1;
} else {
dx = d3_geom_contourDx[i];
dy = d3_geom_contourDy[i];
}
// update contour polygon
if (dx != pdx && dy != pdy) {
c.push([x, y]);
pdx = dx;
pdy = dy;
}
x += dx;
y += dy;
} while (s[0] != x || s[1] != y);
return c;
};
// lookup tables for marching directions
var d3_geom_contourDx = [1, 0, 1, 1,-1, 0,-1, 1,0, 0,0,0,-1, 0,-1,NaN],
d3_geom_contourDy = [0,-1, 0, 0, 0,-1, 0, 0,1,-1,1,1, 0,-1, 0,NaN];
function d3_geom_contourStart(grid) {
var x = 0,
y = 0;
// search for a starting point; begin at origin
// and proceed along outward-expanding diagonals
while (true) {
if (grid(x,y)) {
return [x,y];
}
if (x === 0) {
x = y + 1;
y = 0;
} else {
x = x - 1;
y = y + 1;
}
}
}
})();
//////////////////////////////////////////
// canvas related variables
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
// checkbox to show/hide the original image
var $showImage=$("#showImage");
$showImage.prop('checked', true);
// checkbox to show/hide the path outline
var $showOutline=$("#showOutline");
$showOutline.prop('checked', true);
// an array of points that defines the outline path
var points;
// pixel data of this image for the defineNonTransparent
// function to use
var imgData,data;
// This is used by the marching ants algorithm
// to determine the outline of the non-transparent
// pixels on the image
var defineNonTransparent=function(x,y){
var a=data[(y*cw+x)*4+3];
return(a>20);
}
// load the image
var img=new Image();
img.crossOrigin="anonymous";
img.onload=function(){
// draw the image
// (this time to grab the image's pixel data
ctx.drawImage(img,canvas.width/2-img.width/2,canvas.height/2-img.height/2);
// grab the image's pixel data
imgData=ctx.getImageData(0,0,canvas.width,canvas.height);
data=imgData.data;
// call the marching ants algorithm
// to get the outline path of the image
// (outline=outside path of transparent pixels
points=geom.contour(defineNonTransparent);
ctx.strokeStyle="red";
ctx.lineWidth=2;
$showImage.change(function(){ redraw(); });
$showOutline.change(function(){ redraw(); });
redraw();
}
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/sun.png";
// redraw the canvas
// user determines if original-image or outline path or both are visible
function redraw(){
// clear the canvas
ctx.clearRect(0,0,canvas.width,canvas.height);
// draw the image
if($showImage.is(':checked')){
ctx.drawImage(img,canvas.width/2-img.width/2,canvas.height/2-img.height/2);
}
// draw the path (consisting of connected points)
if($showOutline.is(':checked')){
// draw outline path
ctx.beginPath();
ctx.moveTo(points[0][0],points[0][1]);
for(var i=1;i<points.length;i++){
var point=points[i];
ctx.lineTo(point[0],point[1]);
}
ctx.closePath();
ctx.stroke();
}
}
}); // end $(function(){});
</script>
</head>
<body>
<input type="checkbox" id="showImage" />Show Image<br>
<input type="checkbox" id="showOutline" />Show Outline Path<br>
<canvas id="canvas" width=300 height=450></canvas> </body>
</html>
这篇关于如何在< canvas> ;?中获取形状边缘的所有坐标？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！