The code runs as you move the mouse because jCanvas is redrawing the canvas on mousemove
. This is due to the presence of a draggable layer or a layer with a mousemove
callback defined somewhere. Additionally, the load()
callback runs whenever the image is drawn or redrawn (not just when it is initially drawn).
The fix is actually quite simple:
Store a boolean property (initially set to false
) in the data
object of your image layer. Then, in your load()
callback, wrap your code in an if
statement which checks if the property's value is false
then. If so, set its value to true
and run the code. If not, then you know the callback has already run, and therefore you don't do anything.
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)
}
})