Question

我为管理一些工作项目的形形形景象,建造了一个信库图书馆。每种形状都是一种带有与之相关的绘画方法的物体。在“血管”的复习中,每一条形形状都是 drawn。形状可能带有典型的 mo变性事件,它们都围绕着大概的红外线活动进行。

我发现,野生生物中有一些技术用于探测单个形状的湿度,每个形状体都有作用,但有些则带有很严重的热点。

一种经过清除的幽灵信片本身被用来形成一种个人形态。然后,我用<代码>getImageData()储存“幽灵”。你们可以想象,当有许多点发生 mo事件时(960x800 canvas的100个可点击的形状是记忆中的300MB)。
为了回避记忆问题,我开始掌握六氯苯数据,并只把地址储存到有非零甲的六氯苯。这很好地减少了记忆,但大大增加了邮联的负荷。我只按每4个指数(RGBA)分类,任何与非零甲型六氯环己烷相配的六氯乙烯单都储存在移动期间作为快速 look的关键。它在10+秒钟中仍然超载移动浏览器和短链氯化石蜡。
我阅读了一种技术,即所有形状都用彩色打成一只影子,以区别形成每张钢.。我对这一想法感到非常高兴,因为从理论上讲,它应当能够区分数百万种形状。

不幸的是,这被反恐怖行动所破坏,因为大多数血管都无法致残。每一 f子都会产生几十种可安全忽略的颜色,但可以融和/或相互重叠。当有人跨越边界的暴动时,我想发生的最后一件事是,为了与因AA而出现的混杂物有关的无关联的形状,对半暴动事件开火。

I know that this not a new problem for video game developers and there must be fast algorithms for this kind of thing. If anyone is aware of an algorithm that can resolve (realistically) hundreds of shapes without occupying the CPU for more than a few seconds or blowing up RAM consumption dramatically, I would be very grateful.

There are two other Stack Overflow topics on mouseover detection, both of which discuss this topic, but they go no further than the 3 methods I describe. Detect mouseover of certain points within an HTML canvas? and mouseover circle HTML5 canvas.

EDIT: 2011/10/21

我测试了另一种更有活力的方法,它确实需要储存任何东西,但因业绩问题而 cr。这种方法基本上可以超越形状,并且: (1) 湿度下1x1 克料,2) draw形,3) 湿度下1x1 克。令人惊讶的是,这部作品在 Chrome和伊埃语中表现得很好,但根据诺言而是错误的。

显然,如果你只想要一个小的平坐区,那么 Chrome和伊埃能够优化,但 Firefox似乎完全根据预期的平坐区优化。也许在内部,它会得到整个信道,然后回到了你的餐厅。

Code and raw output here: http://pastebin.com/aW3xr2eB.

“Canvas

Answer 1

如果我正确理解这个问题,那么你想要发现,当摩擦进入/穿透面时,那是正确的吗?

如果是的话,那么你可以采用简单的几何计算方法,即MUCH简单易懂,而且比使用六氯苯数据更快。你的成像算法已经列出了所有可见的形状,因此,你知道每种形态的位置、范围和类型。

假设你有某种种类的形状,类似于“本雅mmmin”描述的,你可以穿透可见的形状,并做点对:

// Track which shape is currently under the mouse cursor, and raise
// mouse enter/leave events
function trackHoverShape(mousePos) {
    var shape;
    for (var i = 0, len = visibleShapes.length; i < len; i++) {
        shape = visibleShapes[i];
        switch (shape.type ) {
            case  arc :
                if (pointInCircle(mousePos, shape) &&
                    _currentHoverShape !== shape) {
                        raiseEvent(_currentHoverShape,  mouseleave );
                        _currentHoverShape = shape;
                        raiseEvent(_currentHoverShape,  mouseenter );
                    return;
                }
                break;
            case  rect :
                if (pointInRect(mousePos, shape) &&
                    _currentHoverShape !== shape) {
                       raiseEvent(_currentHoverShape,  mouseleave );
                       _currentHoverShape = shape;
                       raiseEvent(_currentHoverShape,  mouseenter );
                }
                break;
        }
    }
}

function raiseEvent(shape, eventName) {
    var handler = shape.events[eventName];
    if (handler)
        handler();
}

// Check if the distance between the point and the shape s
// center is greater than the circle s radius. (Pythagorean theroem)
function pointInCircle(point, shape) {
    var distX = Math.abs(point.x - shape.center.x),
        distY = Math.abs(point.y - shape.center.y),
        dist = Math.sqrt(distX * distX + distY * distY);
    return dist < shape.radius;
}

因此,仅称作waysHoverShape, 载于mousemove活动,它将跟踪目前使用的形状。

我希望这一帮助。

Answer 2

评论:

Personally I would just switch to using SVG. It s more what it was made for. However it may be worth looking at EaselJS source. There s a method Stage.getObjectUnderPoint(), and their demo s of this seem to work perfectly fine.

我最后看看了来文方,图书馆利用了你的第一个办法——每个物体的单独隐蔽信库。

人们想到的一个想法是试图创建某种内容意识算法,以发现反他人的ix子及其所属的形状。我很快驳斥了这一想法。

然而,我确实有另外一种理论。似乎没有办法利用幽灵信,但可能只有在必要时才能产生。

www.un.org/Depts/DGACM/index_spanish.htm 请指出以下概念是所有理论和未经测试的。也许我可能忽视了意味着这种方法不会奏效的东西。

除提标外,还储存你引出该物体的方法。然后,使用提标的方法,你可以计算出该物体的粗包。在点击Sevas时,通过你在信封上的所有物体,并抽取用箱子拦截的物体。对于其中每一种提取的物体,均使用该物体的参照法,分别将其提上“幽灵”。确定该运动是否位于非白色的粉末上,清除了vas,重复。

举例来说,我认为我已经提出了两个目标。我将储存以可读的方式 drawing取和循环的方法。

circ = [ beginPath , [ arc , 75, 75, 10], closePath , fill ]
rect = [ beginPath , [ rect , 150, 5, 30, 40], closePath , fill ]

(你可能希望淡化所节约的数据,或使用另一种合成物,如SVG syntax)

As I am drawing these circles for the first time, I will also keep note of the dimensional values and use them to determine a bounding box (Note: you will need to compensate for stroke widths).

circ = {left: 65, top: 65, right: 85, bottom: 85}
rect = {left: 150, top: 5, right: 180, bottom: 45}

现场发生了点击事件。点数为<代码>{x:70, y: 80}。

通过这两个物体,我们认为, mo化坐标属于圈子。因此,我们把圈子作为可能的碰撞候选国。

通过分析圈子的绘画方法,我们可以重新采用“幽灵”法,然后测试,如果 mo岩坐标落在非白色的纸浆上。

After determining if it does or does not, we can clear the ghost canvas to prepare for any more objects to be drawn on it.

由于你可以看到这一点,因此不需要储存960×800×100个餐厅,而只有960×800x2。

This idea would best be implemented as some kind of API for automatically handling the data storage (such as the method of drawing, dimensions...).

友情链接