Как вызвать JavaScript для рисования на холсте для каждой строки таблицы?

Question

У меня есть ASP.NET Razor View следующим образом:

@{
    this.Layout = null;
}
<script type="text/javascript">

    function drawWindArrow(canvas, windDirection) {
        // Draw something
}

</script>

<table style="width: 100%">
    @foreach (var weather in ViewBag.WeatherForecastList)
    {
        double windDirection = weather.WindDirection;
        <tr>
            <td>
                <canvas width="32" height="32"></canvas>
                How can I call drawWindArrow with the canvas and the windDirection as a parameter???
            </td>
        </tr>
    }
</table>

Я хотел бы нарисовать что-то на холсте, которое отличается для каждой строки в таблице.Оно должно выглядеть примерно так, как показано здесь: http://www.yr.no/sted/Norge/Oslo/Oslo/Oslo/,, но я не хочу использовать статические изображения, поскольку мне нужно рисовать разными цветами на основе некоторых стилей CSS3.

Как я могувызвать функцию drawWindArrow JavaScript с холстом и windDirection в качестве параметра?

Answer 1

Я наконец-то написал хорошо работающий код.

Вот как я это сделал:

1) Определите мой холст внутри элемента в моем ASP.NET Razor View. Обратите внимание на использование атрибутов данных HTML5 в элементе Canvas. Они используются для передачи значений в мою функцию JavaScript, которая будет рисовать стрелки погоды внутри элемента canvas:

<td>
    @string.Format("{0:f1}m/s ", weather.WindSpeed)
    <canvas width="32" height="32" data-windSpeed="@(weather.WindSpeed)" data-windDirection="@(weather.WindDirection)">
    </canvas>
    <br />
    @weather.WindSpeedName
</td>

2) Функция JavaScript вызывается после загрузки содержимого HTML, чтобы отобразить содержимое во всех элементах canvas, расположенных под определенным элементом таблицы:

function drawWindArrows() {
    $('#weather canvas').each(function () {
        var parent = this.parentNode;
        var style = window.getComputedStyle(parent, null); 
        var color = style.color;
        var windSpeed = $(this).attr('data-windSpeed');
        var windDirection = $(this).attr('data-windDirection');
        drawWindArrow(this, color, windSpeed, windDirection);
    });

}

function drawWindArrow(canvas, color, windSpeed, windDirection) {
    // Draw inside the canvas
}

Вы можете увидеть готовую веб-страницу здесь:

http://olavtlocation.cloudapp.net/weather

Answer 2

Вы хотите создать объект для вашей стрелы. Это должно привести вас к правильной ноге.

    var TableCanvasObject = function (arrowDirection, arrowType, container, id) {
    this.container = container;
    this.canvas = null;
    this.ctx = null;
    this.createArrow = function () {
        if (arrowType == "foo") {
            //draw arrow foo
        } else if (arrowType = "boo") {
            //draw arrow boo
        }
    };
    this.create = function () {
        this.canvas = document.createElement("canvas");
        this.canvas.id = id;
        this.ctx = this.canvas.getContext("2d");
        this.createArrow();
    };
    this.create();
    this.display = function () {
        container.append(this.canvas);
    }
};


window.onload = function () {
    var obj = new TableCanvasObject(90, "foo", document.getElementById("con"), "my thing");
    obj.display();
};