Copy link to clipboard
Copied
I have
3 pens
I want to draw an A line and a diagram in the scene
I got a bunch of codes, but they don't work
I want one that is easy and simple to draw lines by hand
In a scheme without what goes out of the frame
Does anyone have something like you?
many thanks
var s = new createjs.Shape();
this.addChild(s);
var g = s.graphics;
styleF();
var startF = start.bind(this);
var drawF = draw.bind(this);
var stopF= stop.bind(this);
var initDrawF = initDraw.bind(this);
// b is the instance name of the white drawing utensil
this.b.addEventListener("click", initWhiteDrawF);
// c is the instance name of the clear button.
this.c.addEventListener("click", clear.bind(this));
function initWhiteDraw() {
whiteStyleF();
this.b.removeEventListener("click", initDrawF);
stage.a
Copy link to clipboard
Copied
use the drawing api (as3 or createjs) lineto (in a loop) and moveto methods with mouse down and stage mouse up listeners.
eg with createjs, EaselJS v1.0.0 API Documentation : Graphics (createjs.com)
Copy link to clipboard
Copied
Why not work?
https://drive.google.com/file/d/1jVCAs35ScEBB6mngqy7XfxI0jmHPukHJ/view?usp=sharing
var clearButton = document.querySelector("clear");
var stroke_weight = document.querySelector("stroke-weight");
var canvas = document.querySelector("canvas");
var ctx = canvas.getContext("2d");
var isDrawing = false;
canvas.addEventListener("mousedown", start);
canvas.addEventListener("mousemove", draw);
canvas.addEventListener("mouseup", stop);
this.clearButton.addEventListener("click", clearCanvas.bind(this));
function start(e) {
isDrawing = true;
draw(e);
}
function draw(x,y) {
if (!isDrawing) return;
ctx.lineWidth = 3;
ctx.lineCap = "round";
ctx.strokeStyle = "#FFFFFF";
ctx.lineTo(x, y);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(x, y);
}
function stop() {
isDrawing = false;
ctx.beginPath();
}
function clearCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
}
Copy link to clipboard
Copied
There are various things wrong, but the first one is that you are taking a mouse event and putting it into the x variable. Try this instead:
function draw(e) {
var x = e.x;
var y = e.y;
After that you should start to see why it only draws a line from the corner, then fix those issues.
Copy link to clipboard
Copied
thank you for your reply
But I try to draw the line with the movement of the hand, it is like drawing
Copy link to clipboard
Copied
var s = new createjs.Shape();
this.addChild(s);
var g = s.graphics;
styleF();
var startF = start.bind(this);
var drawF = draw.bind(this);
var stopF= stop.bind(this);
var initDrawF = initDraw.bind(this);
// b is the instance name of the white drawing utensil
this.b.addEventListener("click", initWhiteDrawF);
// c is the instance name of the clear button.
this.c.addEventListener("click", clear.bind(this));
function initWhiteDraw() {
whiteStyleF();
this.b.removeEventListener("click", initDrawF);
stage.addEventListener("stagemousedown",startF);
}
function start() {
stage.removeEventListener("stagemousedown",startF);
stage.addEventListener("stagemousemove",drawF);
stage.addEventListener("stagemouseup",stopF);
g.moveTo(stage.mouseX,stage.mouseY);
}
function draw(){
g.lineTo(stage.mouseX,stage.mouseY)
}
function stop() {
stage.removeEventListener("stagemousemove",drawF);
stage.removeEventListener("stagemouseup",stopF);
this.b.addEventListener("click", initDrawF);
}
function clear() {
g.clear();
}
function whiteStyleF(){
g.setStrokeStyle(1);
g.beginStroke("#ffffff");
}
Copy link to clipboard
Copied
Many thanks, creative
I wish you a good and happy life (^_^)
Copy link to clipboard
Copied
you're welcome.
Copy link to clipboard
Copied
Right, I was only telling you the main problem. kglad went over everything else. Note how he used stage.mouseX, stage.mouseY, that's similar to the e.x and e.y I was showing.
Copy link to clipboard
Copied
Many thanks for your kind response and knowledge.
Copy link to clipboard
Copied
Sorry again
But I tried
For the drawing to be in the blue area only and not in the whole stage?
function draw() {
g.lineTo(ctx.mouseX, ctx.mouseY);
if (((g.lineTo(ctx.mouseX)) <= -9.35) || ((g.lineTo(ctx.mouseY)) >= 427)) {
g.clear();
} else {}
}
Copy link to clipboard
Copied
Can you show your current script? It would be easier to suggest what to change in your script, because you will have modified kglad's script to work for your instances.
Copy link to clipboard
Copied
I am trying the same as kglad code
https://drive.google.com/file/d/14oQb6D6tbnquBHTAZpn5-E3cquA7oMwu/view?usp=sharing
Copy link to clipboard
Copied
i don't know what is the blue area but if it's a rectangle, you can check stage.mouseX and stage.mouseY thsee if they're inyour blue rectangle before executing lineTo
Copy link to clipboard
Copied
Ok i will try it