HTML5画布：冲突检测问题_Html_Html5 Canvas

HTML5画布：冲突检测问题

html html5-canvas

HTML5画布：冲突检测问题,html,html5-canvas,Html,Html5 Canvas,我正在编写一个脚本，它利用ocanvasjs库（）创建一个HTML5画布，并在画布中显示多个对象。目前，我让脚本读取外部XML文档，并循环遍历每个项目节点，并在画布上创建一个圆形对象我在尝试将这些对象放置在画布上时遇到了一些问题，这些对象与中间的圆圈（下面代码中的logo变量）间隔均匀 //全局 var xmlData=“” var xmlObj=[] //变量角度=（360*Math.PI）/180 变量填充=15 var canvas=oCanvas.create({ 画布：“#我的画布”

我正在编写一个脚本，它利用ocanvasjs库（）创建一个HTML5画布，并在画布中显示多个对象。目前，我让脚本读取外部XML文档，并循环遍历每个项目节点，并在画布上创建一个圆形对象

我在尝试将这些对象放置在画布上时遇到了一些问题，这些对象与中间的圆圈（下面代码中的logo变量）间隔均匀

//全局
var xmlData=“”
var xmlObj=[]
//变量角度=（360*Math.PI）/180
变量填充=15
var canvas=oCanvas.create({
画布：“#我的画布”
})
var c_width=canvas.width
var c_height=canvas.height
var logo=canvas.display.eliple({
x:c_宽度/2，
y:c_高度/3，
半径：80，
填写：“#d15851”
})
canvas.addChild（徽标）
//var getXML=函数（文件）{
//$.ajax({
//url:file，
//键入：“GET”，
//数据类型：“xml”，
//async:false，
//成功：parseXML
//  })
// }
var parseXML=function（）{
var xmlDoc=$.parseXML（xmlData）
var xml=$（xmlDoc）
find（'project'）。每个（函数（i）{
xmlObj[i]=canvas.display.eliple({
填充：'#'+'0123456789abcdef'.split（''）.map（函数（v，i，a）{
返回i>5？null:a[Math.floor（Math.random（）*16）]）.join（“”），
半径：40，
不透明度：1
})
});
单例变量={
“当前角度”：0，
“currentOffset”：0，
“增量角度”：函数（）{
this.currentAngle=this.currentAngle+this.currentOffset
}
}
angleSingleton.currentOffset=数学地板（（360*Math.PI）/xmlObj.length）；
对于（h=0；h


您想了解的是圆的参数方程。基本上，它定义了一个点沿圆周在一个特定的角度。这将更详细地介绍它
要获得新圆的x和y值，请使用以下方程式：
x = logo.x + logo.radius * Math.cos(angle)
y = logo.y + logo.radius * Math.sin(angle)

然而，你需要考虑到新圆圈将占据的空间，以及你想要的任何填充空间
x = (logo.x + logo.radius * Math.cos(angle)) + newCircle.radius + circlePadding
y = (logo.y + logo.radius * Math.sin(angle)) + newCircle.radius + circlePadding

对于角度函数，请尝试以下操作：
var angleSingleton = {
    "currentAngle": 0,
    "currentOffset": 0,
    "incrementAngle": function() {
        this.currentAngle = this.currentAngle + this.currentOffset
    }
}

angleSingleton.currentOffset = (360 * Math.PI)/xmlObj.length;

然后，您可以使用它来跟踪公式所需的角度。要获取当前角度，请使用angleSingleton.currentAngle
并将angle++
替换为angleSingleton.incrementAngle
我最终找到了答案
// EXTENDING OBJECTS
    Array.prototype.min = function(array) {
        return Math.min.apply(Math, array);
    }

    Array.prototype.max = function(array) {
        return Math.max.apply(Math, array)
    }
//

// GLOBALS
    var xmlData = '<?xml version="1.0" encoding="UTF-8"?><root name="CompanyName"><projects><project name="Project1"></project><project name="Project2"></project><project name="Project3"></project></projects></root>'

    var xmlObj = []
        var xmlDoc, xml;
    var padding = 15
    var canvas = oCanvas.create({
        canvas: '#myCanvas'
    })
    var c_width = canvas.width
    var c_height = canvas.height

    var logo = canvas.display.ellipse({
        x: c_width / 2,
        y: c_height / 3,
        radius: 80,
        fill: '#d15851'
    })

        var rectObj = function(){
            this.x =  0;
            this.y =  0;
            this.width =  100;
            this.height = 100;
            this.size = this.width + this.height; //this would equate to a circles radius if dealing with circles
            this.fillerText =  null;
            this.fillRect = function(hexVal){
                if(!hexVal)
                    return '#'+'0123456789abcdef'.split('').map(function(v,i,a){
                return i>5 ? null : a[Math.floor(Math.random()*16)] }).join('')
                else
                    return hexVal

            };
            this.drawRect = function(){
                return canvas.display.rectangle({
                    width: this.width,
                    height: this.height,
                    fill: this.fillRect(),
                    x: this.x,
                    y: this.y
                })
            };
            this.checkCollisions = function(objToCheck) {
                var centerA = { x: this.x+(this.size/2), y: this.y+(this.size/2) };
                var centerB = { x:objToCheck.x+(objToCheck.size/2), y: objToCheck.y+(objToCheck.size/2) };
                var distance = Math.sqrt(((centerB.x-centerA.x)*(centerB.x-centerA.x) + (centerB.y-centerA.y)*(centerB.y-centerA.y)));

                if(distance < (this.size+objToCheck.size)) {
                    objToCheck.x = this.x - (canvas.width/4)
                    objToCheck.fillRect = function(){
                        return 'red'
                    }
                }
            }
        }

    canvas.addChild(logo)

    var parseXML = function() {
        xmlDoc = $.parseXML(xmlData)
        xml = $(xmlDoc)

        xml.find('project').each(function(i){
                    xmlObj[i] = new rectObj()
                    xmlObj[i].fillerText = $(this).attr('name')
                    xmlObj[i].x = (logo.x + logo.radius * Math.cos((360*Math.PI) / (i + 1)) + padding) + ((xmlObj[i].width / 2) + (i+1));
                    xmlObj[i].y = (logo.y + logo.radius * Math.sin((360*Math.PI) / (i + 1)) + padding);
        });

                for(i = 0; i < xmlObj.length; i++) {
                    for(a = i+1; a < xmlObj.length; a++) {
                        xmlObj[i].checkCollisions(xmlObj[a])
                    }
                    canvas.addChild(xmlObj[i].drawRect())
                }
    }

//

$(document).ready(function(){
    parseXML()
})

//扩展对象
Array.prototype.min=函数（数组）{
返回Math.min.apply（数学，数组）；
}
Array.prototype.max=函数（数组）{
返回Math.max.apply（数学，数组）
}
//
//全球的
var xmlData=“”
var xmlObj=[]
var-xmlDoc，xml；
变量填充=15
var canvas=oCanvas.create({
画布：“#我的画布”
})
var c_width=canvas.width
var c_height=canvas.height
var logo=canvas.display.eliple({
x:c_宽度/2，
y:c_高度/3，
半径：80，
填写：“#d15851”
})
var rectObj=函数（）{
这个.x=0；
这个。y=0；
这个宽度=100；
这个高度=100；
this.size=this.width+this.height；//如果处理圆，这将等于圆的半径
this.fillerText=null；
this.fillRect=函数（hexVal）{
如果（！hexVal）
返回'#'+'0123456789abcdef'.split（''）.map（函数（v，i，a）{
返回i>5？null:a[Math.floor（Math.random（）*16）]）.join（“”）
其他的
返回hexVal
};
this.drawRect=函数（）{
返回canvas.display.rectangle({
宽度：这个。宽度，
高度：这个高度，
fill:this.fillRect（），
x:这个，
y:这个，y
})
};
this.checkCollisions=函数（objToCheck）{
var centerA={x:this.x+（this.size/2），y:this.y+（this.size/2）}；
var centerB={x:objToCheck.x+（objToCheck.size/2），y:objToCheck.y+（objToCheck.size/2）}；
var distance=Math.sqrt（（（centerB.x-centerA.x）*（centerB.x-centerA.x）+（centerB.y-centerA.y）*（centerB.y-centerA.y））；
if（距离<（此尺寸+目标尺寸））{
objToCheck.x=this.x-（canvas.width/4）
objToCheck.fillRect=函数（）{
返回“红色”
}
}
}
}
canvas.addChild（徽标）
var parseXML=function（）{
xmlDoc=$.parseXML（xmlData）
xml=$（xmlDoc）
find（'project'）。每个（函数（i）{
xmlObj[i]=新的rectObj（）
xmlObj[i].fillerText=$（this.attr（'name'））
xmlObj[i].x=（logo.x+logo.radius*Math.cos（（360*Math.PI）/（i+1））+填充）+（xmlObj[i].width/2）+（i+1））；
xmlObj[i].y=（logo.y+logo.radius*Math.sin（（360*Math.PI）/（i+1））+填充）；
});
对于（i=0；i// EXTENDING OBJECTS
    Array.prototype.min = function(array) {
        return Math.min.apply(Math, array);
    }

    Array.prototype.max = function(array) {
        return Math.max.apply(Math, array)
    }
//

// GLOBALS
    var xmlData = '<?xml version="1.0" encoding="UTF-8"?><root name="CompanyName"><projects><project name="Project1"></project><project name="Project2"></project><project name="Project3"></project></projects></root>'

    var xmlObj = []
        var xmlDoc, xml;
    var padding = 15
    var canvas = oCanvas.create({
        canvas: '#myCanvas'
    })
    var c_width = canvas.width
    var c_height = canvas.height

    var logo = canvas.display.ellipse({
        x: c_width / 2,
        y: c_height / 3,
        radius: 80,
        fill: '#d15851'
    })

        var rectObj = function(){
            this.x =  0;
            this.y =  0;
            this.width =  100;
            this.height = 100;
            this.size = this.width + this.height; //this would equate to a circles radius if dealing with circles
            this.fillerText =  null;
            this.fillRect = function(hexVal){
                if(!hexVal)
                    return '#'+'0123456789abcdef'.split('').map(function(v,i,a){
                return i>5 ? null : a[Math.floor(Math.random()*16)] }).join('')
                else
                    return hexVal

            };
            this.drawRect = function(){
                return canvas.display.rectangle({
                    width: this.width,
                    height: this.height,
                    fill: this.fillRect(),
                    x: this.x,
                    y: this.y
                })
            };
            this.checkCollisions = function(objToCheck) {
                var centerA = { x: this.x+(this.size/2), y: this.y+(this.size/2) };
                var centerB = { x:objToCheck.x+(objToCheck.size/2), y: objToCheck.y+(objToCheck.size/2) };
                var distance = Math.sqrt(((centerB.x-centerA.x)*(centerB.x-centerA.x) + (centerB.y-centerA.y)*(centerB.y-centerA.y)));

                if(distance < (this.size+objToCheck.size)) {
                    objToCheck.x = this.x - (canvas.width/4)
                    objToCheck.fillRect = function(){
                        return 'red'
                    }
                }
            }
        }

    canvas.addChild(logo)

    var parseXML = function() {
        xmlDoc = $.parseXML(xmlData)
        xml = $(xmlDoc)

        xml.find('project').each(function(i){
                    xmlObj[i] = new rectObj()
                    xmlObj[i].fillerText = $(this).attr('name')
                    xmlObj[i].x = (logo.x + logo.radius * Math.cos((360*Math.PI) / (i + 1)) + padding) + ((xmlObj[i].width / 2) + (i+1));
                    xmlObj[i].y = (logo.y + logo.radius * Math.sin((360*Math.PI) / (i + 1)) + padding);
        });

                for(i = 0; i < xmlObj.length; i++) {
                    for(a = i+1; a < xmlObj.length; a++) {
                        xmlObj[i].checkCollisions(xmlObj[a])
                    }
                    canvas.addChild(xmlObj[i].drawRect())
                }
    }

//

$(document).ready(function(){
    parseXML()
})