I want to allow the user to draw a rectangle on the canvas with Draw2D library. The canvas location of mouse-down will be top-left and the canvas location of mouse-up should become the bottom right. However, I am unable to catch the mouse-up and mouse-down events on the canvas.
Here is the code I am trying, but there is no output:
var canvas = new draw2d.Canvas("canvas-div");
var policy = new draw2d.policy.canvas.CanvasPolicy();
policy.onClick = function(canvas, mouseX, mouseY) {
console.log("Mouse click:" + mouseX + "," + mouseY);
}
canvas.installEditPolicy(policy);
In Draw2D-js you need always to extend Classes if you want to do something new. ( you are redefining method with the wrong way )
in your exemple you can create this:
var MyPolicy = draw2d.policy.canvas.CanvasPolicy.extend({
NAME: 'MyPolicy',
init: function() {
this._super();
alert("done");
},
onClick: function(the, mouseX, mouseY, shiftKey, ctrlKey) {
this._super(the, mouseX, mouseY, shiftKey, ctrlKey);
alert("MyPolicy click:" + mouseX + "," + mouseY);
}
});
and than use it like this:
var policy = new MyPolicy();
canvas.installEditPolicy(policy);
another method is to use JQuery directly:
$('#draw2Did').click(function(ev) {
alert("Mouse click:" + ev.clientX + "," +ev.clientY); }
);
Reference:
http://draw2d.org/draw2d_touch/jsdoc_5/#!/api/draw2d.policy.canvas.CanvasPolicy
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.