Finding the coordinates of a given letter using html5 canvas

[Enas Abosaefan]

hi,

in flash cs using as3 to find the position of a character we used getCharBoundaries(index).x is it possible to find a character of a label.innerHTML using adobe animate html5 canvas?? thanks.

[kglad]

you're trying to find a letter where?  on stage? 

if so, is it text?

and what's the point?  is this a game?

[Enas Abosaefan]

it's a label on stage

yes, I want to get rectangle for certain letter inside label innerHTML 

it's an education website and I want to add hidden bin for the letter inside the word and the child hold the item to match the correct answer

thank's alot 🙂

[kglad]

@Enas Abosaefan 

i'm certain you can accomplish what you want, but i'm not sure you can do it with your current approach.

paste a screenshot of the stage showing what's on it and what you're trying to detect.

[Enas Abosaefan]

@Enas Abosaefan 

i'm certain you can accomplish what you want, but i'm not sure you can do it with your current approach.

paste a screenshot of the stage showing what's on it and what you're trying to detect.

By @kglad

[Enas Abosaefan]

I want to put the bin (the grey movieclip ) on certain letter inside label

[kglad]

you can't put a movieclip inside a label component.  do you mean you intend to put bin under a letter in the label component and then try and retrieve the letter overlying bin?

are you planning to assign the text of the label component with easeljs/js code?

[Enas Abosaefan]

yes,I mean but it under the letter same x,y and width

and yes assign innerHTML and all the code using easeljs code

or can I add another script inside easel code?

[kglad]

what do your users to?

identify the letter that's overlying the bin?

[Enas Abosaefan]

yes, the child hold another movieclip and hit the correct letter

[kglad]

ok

i'll sketch how to do this in a few hours.  i'm away from my computer and on my mobile right now

[Enas Abosaefan]

thank's alot in advance for your time 🙂

[kglad]

is using a label component critical?

i ask because it's problematic: afaik, there's no way to dynamically create instances of it. 

[Enas Abosaefan]

yes using label essential because I need to color the letter also I can't doing using text 

no need for dynamic creation the label on the stage

[Enas Abosaefan]

if you can color the letter also using text field no proplem to use text 

[kglad]

each "turn" of your game will display a word with several letters, one of which is colored differently, and the user is supposed to drop bin over or under that different colored letter?

[kglad · Accepted solution]

create a movieclip that contains a textfield.  right align the text if you're going to use right-to-left language like arabic, left align the text for left-to-right languages.  assign the textfield an instance name, eg tf.  assign the movieclip a linkage id, eg tf_mc.

your can then use:

// [word or phrase to be display, character index where bin should be placed for a correct answer]var wordA = [["first word",2],["second word",5]];
var index,i,mc;

// add your drag and drop listeners. bind(this) to all function calls.

// sample drop listener function dropF() is below.

step1F.bind(this)();

function step1F(){
if(!index){
index = 0;
} else {
index++;
}
if(wordA.length==index){
endF();
} else {
step2F.bind(this)();
}
}
function step2F(){
var startX = 0;
for(i=0;i<wordA[index][0].length;i++){
mc = new lib.tf_mc();
mc.name= "mc_"+i
mc.tf.text = wordA[index][0].charAt(i);
if(i==wordA[index][1]){
mc.tf.color = "#00ff00";
mc.name = "selected_"+i;
} else {
mc.tf.color = "#000000";
mc.name= "mc_"+i
}
mc.x = startX;

// below for right-to-left
startX -= mc.getBounds().width;

// below for left-to-right
// startX += mc.getBounds().width;
this.p.addChild(mc);
}
}
function dropF(){
for(i=0;i<wordA[index][0].length;i++){
if(this.bin.hitTest(this.p.getChildAt(i))){
if(this.p.getChildAt(i).name.indexOf("selected")>-1){
correctF.bind(this)();
} else {
incorrectF.bind(this)();
}
}
}
}
function correctF(){
// do whatever. when ready for next word/phrase execute cleanF.bind(this)()
}
function incorrectF(){
// do whatever else. when ready for next word/phrase execute cleanF.bind(this)()
}

function cleanF(){
for(i=this.p.numChildren;i>=0;i--){
this.p.removeChildAt(i);
}
step1F.bind(this)()
}
function endF(){
// game over
}

[Enas Abosaefan]

first of all really thank's alot for your effort,but this way is complicated to use for my learning website because it's contain alot of arabic word and not work for arabic word because Arabic letters are written connected like

عنكبوت

but this work good for english letter thank's again for your Help 🙂

[kglad]

you're welcome.

but, if letters are connected, how do arabic typewriters work?  eg, if you type (in arabic ) a letter you would see one kind of glyph and then if you type another, the first glyph has to change, doesn't it?

if it does not, then you should be able to just decrease the letter spacing to have letters connect.

[kglad]

how did arabic writers use mechanical typewritters and real paper?

[Enas Abosaefan]

firstly Arabic written fro RTL and not spaced evenly and the number of the character over 600 leter that take on different forms depending if the letter in the beginning,middle or in the final of a word and many many cases there's arabic typewriter and arabic font for windows 

so it's very complicated..

is there a way to use other language inside easeljs like

var t = document.getElementById("tf");
alert(t.getExtentOfChar(0).width + " " + t.getExtentOfChar(3).width);

[kglad]

if there's a mechanical arabic typewritter that can write arabic, it should be possible to do the same in animate.

but, i understand you don't want to pursue that.

if you have an element's id, you can determine its width and height by using the element's offsetWidth and offsetHeight properties.  even more helpful would probably be the getBoundingClientRect() method which has x,y,bottom,top,width,height,left and right properties.

[Enas Abosaefan]

yes getBoundingClientRect() for the element not for certain letter 😞

[kglad]

@Enas Abosaefan 

correct.  i made that clear.  

look, if you're not going to pursue the path i suggested, you're going to create a (or use someone else's) method for arabic optical character recognizition.  

[Enas Abosaefan]

you know previously using actionscript3 I Just use 

this["main_mc"]["mc1"]["tf1"].getCharBoundaries(let).x it was desktop application using adobe flash cs

now many thing's I can't do it easly