Morphic Properties
var ellipse = this.get('Ellipse1') alert(ellipse.getFill())
Introduction
What if you wanted to access the properties of a morph on the world? Either to get them or set them, you'd want access to the size, shape, colour, positions, borders, and many other things. In this lesson, we explore some of these properties and how to read and manipulate them.
Scale
Red
Green
Blue
Colour
Feel free to play with the list and slider above and watch what happens to the ellipse. In this lesson, you will learn how to do this and many other things.
Inspecting Properties
Of course, there are more properties to a morph than we will be able to enumerate in this lesson, so in addition to explaining a few in detail to teach you the patterns to follow, we will explore how to discover which properties exist. Let's start by looking at the properties of this ellipse:
First, let's open the inspector on the ellipse. Type the word 'this' into the bottom box followed by a . and press CMD/CTRL + SHIFT + P In the search box, type 'get'. This brings up all the properties and functions possessed by the ellipse object. You'll see a list of functions that will return information about the properties of the shape. Try getting the fill of the ellipse by typing 'getFill' into the search box and pressing enter, then evaluating the expression with CMD/CTRL+P to print it out. You should see the text 'rgb(105,116,105)', which is the rgb value of the colour of the ellipse. Note, also, that you are invoking a function here:
This function returns the value of the 'fill' property of the ellipse.
This time, let's try setting the fill of the ellipse. Again, let's open the inspector and this time, instead of getting the fill, let's set it. Examine and then evaluate the box below:
Setting Properties
var ellipse = this.get('Ellipse2') ellipse.setFill(Color.rgb(205,216,205))
//Temporary: Resets to default values var ellipse = this.get('Ellipse2') ellipse.setFill(Color.rgb(105,116,105))
Notice that the colour got lighter?
Now suppose, very realistically, that you don't know the exact rgb values for a colour you want. For example, let's say you wanted to make the ellipse red. Instead of passing in the rgb values, lively allows you to pick a color:
alert(Color.red)
var ellipse = this.get('Ellipse2') ellipse.setFill(Color.red)
This works, because "Color.red" can also be evaluated. Try evaluating the box below:
You can either pass the Color.red or its associated rgb values, and either will work, because the former is a shortcut to the latter.
Colour Properties
There are many ways to get a color object, some of which are listed below with examples: Hex String - #00AB12 rgb string - (240,240,245) You will also see here a color picker. Please feel free to click around on it and see how the strings change.
6A7375
RGB Hex value:
Alpha value:
(106,115,117)
RGB Triple
In addition to fill, you can change the colour of the border of the morph, as well, using the same argument:
var ellipse = this.get('Ellipse3') ellipse.setBorderColor(Color.red)
//Temporary: Resets to default values var ellipse = this.get('Ellipse3') ellipse.setBorderColor(Color.rgb(0,0,0))
Other Properties
Of course, colour is not the only property of a morph that can be changed. We are also able to change, for instance, the width and style of the border of a morph:
var ellipse = this.get('Ellipse3') var outStr = 'Border: \n' + 'Width: ' + (ellipse.getBorderWidth()) outStr += '\nStyle: ' + ellipse.getBorderStyle() alert(outStr)
When setting a property, if you aren't sure what argument to pass, try getting it first. In the above example, getting width gives you a floating point number and the style is a string. So when setting them, the same argument types would be sent.
/home/lively/LivelyKernel/users/robertkrahn/csc130/tutorials.css
X
–
Menu