0

私のアプリケーションでは、キャンバスに画像を描画し、ラベル用に円とテキストを追加します。追加の描画コードを drawImage の load メソッドに移動したところ、マウスをキャンバス上に移動すると同じコードが繰り返し呼び出されることがわかりました。問題を特定するために、さまざまなブロックを選択的にコメントアウトしようとしましたが、実際には絞り込んでいません。

このブロックは、画像を描画するメイン コードです。変数の多くは自明です。使用されるさまざまな ID は、データベースの識別に使用されます。マウスをキャンバス上に移動すると、「コールバック」が繰り返し出力されることに気付きました。

canvasObject.drawImage({
        layer: true,
        name: 'image',
        source: imageSize.url,
        x: (600-imageSize.width)/2,
        y: 0,
        fromCenter: false,
        data: {
            id : image.id
        },
        load: function() {
            // now draw the labels and stuff on top
            console.log("callback")
            for (var imageLabelIndex in image.image_label_locations) {
                var labelLocation = image.image_label_locations[imageLabelIndex]
                console.log("draw " + imageLabelIndex)

                drawLabelLine(canvasObject, {
                    index : imageLabelIndex,
                    from : {
                        x : labelLocation.location_x,
                        y : labelLocation.location_y
                    },
                    to : {
                        x : labelLocation.label.location_x,
                        y : labelLocation.label.location_y
                    }
                })
                drawSmallLabel(canvasObject, {
                    index : imageLabelIndex,
                    x : labelLocation.location_x,
                    y : labelLocation.location_y,
                    id : labelLocation.id
                })
                drawLargeLabel(canvasObject, {
                    index : imageLabelIndex,
                    x : labelLocation.label.location_x,
                    y : labelLocation.label.location_y,
                    id : labelLocation.label.id
                })
            }
        },
        click: function(layer) {
            console.log("click")

            // check whether the mouse is on an existing object
            var canvasObject = $(layer.canvas)
            var parentOffset = canvasObject.offset();
            var canvasWidth = canvasObject.attr("width")
            var space = 24

            mouseDownPosition = {"x" : layer.eventX, "y" : layer.eventY }

            var labelPosition = { "x" : (mouseDownPosition.x < canvasWidth/2) ? space : canvasWidth-space, "y" : mouseDownPosition.y }
            drawLabelLine(canvasObject, {
                index : countAnswers(),
                from: {
                    x : labelPosition.x,
                    y : labelPosition.y
                },
                to: {
                    x : mouseDownPosition.x,
                    y : mouseDownPosition.y
                }
            })

            drawSmallLabel(canvasObject, {
                index : countAnswers(),
                x : mouseDownPosition.x,
                y : mouseDownPosition.y
            })

            drawLargeLabel(canvasObject, {
                index : countAnswers(),
                x : labelPosition.x,
                y : labelPosition.y
            })

            // also add an answer to the question page
            addLabelAnswer(countAnswers(), mouseDownPosition, labelPosition)
        }
    })
4

1 に答える 1

1

jCanvas は でキャンバスを再描画しているため、マウスを動かすとコードが実行されますmousemove。これは、ドラッグ可能なレイヤーまたはmousemoveコールバックが定義されたレイヤーが存在するためです。さらに、load()コールバックは、イメージが描画または再描画されるたびに実行されます (最初に描画されたときだけではありません)。

修正は実際には非常に簡単です。

イメージ レイヤーのオブジェクトにブール値のプロパティ (最初は に設定false) を格納します。data次に、コールバックで、プロパティの値がthenであるかどうかをチェックload()するステートメントでコードをラップします。その場合は、その値を に設定してコードを実行します。そうでない場合は、コールバックが既に実行されていることがわかり、何もしません。iffalsetrue

canvasObject.drawImage({
    layer: true,
    name: 'image',
    source: imageSize.url,
    x: (600-imageSize.width)/2,
    y: 0,
    fromCenter: false,
    data: {
        id : image.id,
        loaded: false
    },
    load: function(layer) {
        if (layer.data.loaded === false) {
            layer.data.loaded = true;
            // now draw the labels and stuff on top
            console.log("callback")
            for (var imageLabelIndex in image.image_label_locations) {
                var labelLocation = image.image_label_locations[imageLabelIndex]
                console.log("draw " + imageLabelIndex)

                drawLabelLine(canvasObject, {
                    index : imageLabelIndex,
                    from : {
                        x : labelLocation.location_x,
                        y : labelLocation.location_y
                    },
                    to : {
                        x : labelLocation.label.location_x,
                        y : labelLocation.label.location_y
                    }
                })
                drawSmallLabel(canvasObject, {
                    index : imageLabelIndex,
                    x : labelLocation.location_x,
                    y : labelLocation.location_y,
                    id : labelLocation.id
                })
                drawLargeLabel(canvasObject, {
                    index : imageLabelIndex,
                    x : labelLocation.label.location_x,
                    y : labelLocation.label.location_y,
                    id : labelLocation.label.id
                })
            }
        }
    },
    click: function(layer) {
        console.log("click")

        // check whether the mouse is on an existing object
        var canvasObject = $(layer.canvas)
        var parentOffset = canvasObject.offset();
        var canvasWidth = canvasObject.attr("width")
        var space = 24

        mouseDownPosition = {"x" : layer.eventX, "y" : layer.eventY }

        var labelPosition = { "x" : (mouseDownPosition.x < canvasWidth/2) ? space : canvasWidth-space, "y" : mouseDownPosition.y }
        drawLabelLine(canvasObject, {
            index : countAnswers(),
            from: {
                x : labelPosition.x,
                y : labelPosition.y
            },
            to: {
                x : mouseDownPosition.x,
                y : mouseDownPosition.y
            }
        })

        drawSmallLabel(canvasObject, {
            index : countAnswers(),
            x : mouseDownPosition.x,
            y : mouseDownPosition.y
        })

        drawLargeLabel(canvasObject, {
            index : countAnswers(),
            x : labelPosition.x,
            y : labelPosition.y
        })

        // also add an answer to the question page
        addLabelAnswer(countAnswers(), mouseDownPosition, labelPosition)
    }
})
于 2014-03-08T23:39:39.750 に答える