问使用javascript的Bliff运数据分析解决方案

EN

    // Create our images: torpedo (object) and background (context)

var object = "    +\n    +\n   +++\n +++++++\n ++   ++\n++  +  ++\n++ +++ ++\n++  +  ++\n ++   ++\n +++++++\n   +++",
    context = "              + +    +              ++           +       +++    +     +\n +  ++     +   + ++++    + +       +         +          +  +   +++     +++ +\n     +            + +   ++      ++  ++    + ++       +     +      +  +   +\n+   ++      +  ++       +          + +       ++        ++  +           +\n ++++++ + +    +   ++  +  +   +   +  ++      +         +                     +\n  + +   +      +               +      ++     +  ++            +   +    + +\n+++   + ++   +  +            +  +++       + +       ++                     +\n  +++++  +      +                            +  + +            +   +  +\n +   +   +              +    +      +            +  +   +      +    +     +\n ++    +              +     +       ++   +          +       +           ++ ";


    var c = document.getElementById("test_canvas"),
        ctx = c.getContext("2d"),
        scale = 10;

// Draw a pixel on canvas
function draw_pixel(x, y, fill_style) {
    ctx.fillStyle = fill_style;
    ctx.fillRect(x * scale, y * scale, scale, scale);
}

// Receive an array of coordinates, draw pixels
function draw_image(serialized_image, fill_style) {
    for (var i = 0, len = serialized_image.length; i < len; i++) {
        draw_pixel(serialized_image[i][0], serialized_image[i][1], fill_style);
    }
}

// Receive a text string, turn it into an array of coordinates of filled in pixels
function serialize_map(char_map) {
    var x = 0,
        y = 0,
        c,
        map = [];
    for (var i = 0, len = char_map.length; i < len; i++) {
        c = char_map[i];
        if (c == '+') {
            map.push([x, y])
        }
        x += 1;
        if (c == '\n') {
            x = 0;
            y += 1;
        }
    }
    return map;
}

// Find number of intersections between two images
function array_intersect() {
    var a, d, b, e, h = [],
        f = {},
        g;
    g = arguments.length - 1;
    b = arguments[0].length;
    for (a = d = 0; a <= g; a++) {
        e = arguments[a].length, e < b && (d = a, b = e);
    }
    for (a = 0; a <= g; a++) {
        e = a === d ? 0 : a || d;
        b = arguments[e].length;
        for (var l = 0; l < b; l++) {
            var k = arguments[e][l];
            f[k] === a - 1 ? a === g ? (h.push(k), f[k] = 0) : f[k] = a : 0 === a && (f[k] = 0);
        }
    }
    return h;
}

// Translate the coordinates of a serialized image
function translate(coords, ix, iy) {
    return [coords[0] + ix, coords[1] + iy];
}

// Find in which position the object has more intersections with the background
function get_best_position(context, object) {

    // Calculate image dimensions
    context_width = context.sort(function(a, b) {
        return b[0] - a[0];
    })[0][0];
    context_height = context.sort(function(a, b) {
        return b[1] - a[1];
    })[0][1];
    object_width = object.sort(function(a, b) {
        return b[0] - a[0];
    })[0][0];
    object_height = object.sort(function(a, b) {
        return b[1] - a[1];
    })[0][1];

    // Swipe context, store amount of matches for each patch position
    similaritudes = [];
    for (var cx = 0; cx < context_width; cx++) {
        for (var cy = 0; cy < context_height; cy++) {
            translated_object = object.map(function(coords) {
                return translate(coords, cx, cy);
            })
            intersection = array_intersect(context, translated_object);
            // console.log(translated_object);
            similaritudes[intersection.length] = [cx, cy];

        }
    }
    // Return position for which number of matches was greater
    return similaritudes.slice(-1)[0];
}

// Parse our images from the text strings
var serialized_context = serialize_map(context);
var serialized_object = serialize_map(object);

// Find best position for our torpedo
var best_position = get_best_position(serialized_context, serialized_object);

// Translate torpedo to best position
positioned_object = serialized_object.map(function(coords) {
    return translate(coords, best_position[0], best_position[1]);
});

// Draw background and torpedo 
draw_image(serialized_context, "gray");
draw_image(positioned_object, "rgba(0, 255, 0, 0.5)");

<canvas id="test_canvas" width="800" height="120" style="border:1px solid #000000;">
</canvas>