draw an A line By hand

Contributor ,
Apr 23, 2021 Apr 23, 2021

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

 

2021-04-23_16-17-55.jpg

Views

256

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct Answer

Adobe Community Professional , Apr 23, 2021 Apr 23, 2021
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...

Likes

Translate

Translate
Adobe Community Professional ,
Apr 23, 2021 Apr 23, 2021

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)

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Apr 23, 2021 Apr 23, 2021

Copy link to clipboard

Copied

Why not work?

https://drive.google.com/file/d/1jVCAs35ScEBB6mngqy7XfxI0jmHPukHJ/view?usp=sharing

2021-04-24_0-52-01.jpg

 

 

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);
}

 

@kglad @JoãoCésar 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 23, 2021 Apr 23, 2021

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. 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Apr 23, 2021 Apr 23, 2021

Copy link to clipboard

Copied

@Colin Holgate 

thank you for your reply
But I try to draw the line with the movement of the hand, it is like drawing 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 23, 2021 Apr 23, 2021

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");
}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Apr 23, 2021 Apr 23, 2021

Copy link to clipboard

Copied

Many thanks, creative
I wish you a good and happy life (^_^)

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 23, 2021 Apr 23, 2021

Copy link to clipboard

Copied

you're welcome.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 23, 2021 Apr 23, 2021

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Apr 23, 2021 Apr 23, 2021

Copy link to clipboard

Copied

Many thanks for your kind response and knowledge.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Apr 24, 2021 Apr 24, 2021

Copy link to clipboard

Copied

@Colin Holgate  @kglad 

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 {}
}

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 24, 2021 Apr 24, 2021

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Apr 24, 2021 Apr 24, 2021

Copy link to clipboard

Copied

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Apr 24, 2021 Apr 24, 2021

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Contributor ,
Apr 24, 2021 Apr 24, 2021

Copy link to clipboard

Copied

LATEST

Ok i will try it

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines