avatar

JSXGraph — введение

Опубликовал в блог Новости IT технологий
0
Эта статья — о JSXGraph, написанной на JavaScript библиотеке для отображения геометрических чертежей в веб-браузере

Интерактивные геометрические среды

Одной из задач, которые необходимо решать при преподавании геометрии, это обеспечение наглядности, в частности, наглядности геометрических чертежей. Двумя современными способами обеспечения наглядности геометрических чертежей являются динамичность и интерактивность:

  • Динамические геометрические чертежи — это по своей сути геометрические модели, которые содержат в себе не просто изображение, а весь алгоритм, на основе которого это изображение строится. В результате чертёж может изменяться при изменении положения его элементов, а связи между элементами остаются при этом неизменными. Поэтому ученик имеет дело фактически не с одной геометрической фигурой, а с целым классом фигур.
  • Интерактивные геометрические чертежи — это чертежи, которые могут изменяться как учителем, так и учениками в процессе и после окончания построения. Это позволяет организовать взаимодействие между учеником и учителем через такой чертёж.
Существует большое количество так называемых интерактивных геометрических сред, которые позволяют создавать геометрические чертежи, являющиеся и интерактивными, и динамическими.

Первой интерактивной геометрической средой была программа Geometric Supposer, разработанная командой из Массачусетского технологического института под руководством Иуды Л. Шварца для компьютеров Apple II в начале восьмидесятых годов прошлого века. Развитие этой программы продолжается в Израиле для Windows, но сведений о ней очень мало.

Второй такой программой стала Cabri, разаработанная в 1986 году. Она до сих пор активно развивается и является одной из самых распространённых.

Третьей интерактивной геометрической средой стала The Geometer's Sketchpad, которую разработал Nick Jackiw в 1991 году. Тоже активно развивается и является самой популярной в США.

Обо всех геометрических средах рассказывать не буду — их много, многие из них мало распространены, да и не обо всех я знаю. Упомяну ещё о GeoGebra, GEONExT, Cinderella, TracenPoche. Почему именно эти, дальше станет понятно. Ну и по патриотическим соображениям упомяну ещё 1С: Математический конструктор. По своим характеристикам, кстати, она ничуть не хуже других. Правда, на мой взгляд, и не лучше. Того же класса.

Разработку Геогебры начал в 2001 году Markus Hohenwarter в Зальцбургском университете и сейчас продолжает Michael Borcherds в Университете Иоганна Кеплера в Линце.

GEONExT разработал Alfred Wassermann в Байротском университете на основе программы GEONET (http://did.mat.uni-bayreuth.de/geonet/index.html), прототип которой был создан в 1997 году.

Программу Cinderella написали Ulrich Kortenkamp и Jurgen Richter-Gebert в 1998 году.

TracenPoche написали Jean-Philippe Vanroyen и Emmanuel Ostenne, в каком году, установить не удалось.

Большинство ИГС написаны на Яве или имеют написанный на Яве просмотрщик. Это позволяет работать с такими чертежами в любом современном браузере, что обеспечивает практически всеплатформенность. Однако аплеты имеют некоторые недостатки, не будем о них здесь говорить подробно, они хорошо известны. Это во-первых.
Во-вторых, у каждой такой программы свой формат файла чертежа. Это приводит к даже не к дублированию, а к многократному повторению одной и той же работы.
Поэтому разработки интерактивных геометрических сред продолжаются.

JSXGraph

JSXGraph — написанная на JavaScript библиотека для отображения геометрических чертежей в веб-браузере. Она предоставляет API, используемый в скриптах, импортирующих файлы геометрических чертежей на страницу. JSXGraph, как и GEONExT, разработана в Байротском университете. Собственно, JSXGraph как раз в первую очередь и предназначена для отображения чертежей, созданных в GEONExT. Поэтому этот фотмат практически полностью поддерживается. Кроме того, поддерживаются форматы GeoGebra, Cinderella, TracenPoche (поэтому я и упомянул эти программы в предыдущем разделе) и Intergeo. Intergeo – это общеевропейский проект, цель которого заключается в разработке универсального форамата файла геометрического чертежа. Таким образом получается, что эта библиотека проктически всеплатформенная во всех смыслах этого слова.

Тот же самый API может быть использован для построения чертежей с нуля или для изменения загруженных готовых чертежей, то есть для создания полноценной он лайн интерактивной геометрической среды.

Инициализация
Итак, что же нужно сделать, чтобы включить интерактивный геометрический чертеж в веб страницу? Нужны три действия:

  1. Подключить файлы JSXGraph. Это файлы jsxgraph.css и jsxgraphcore.js. Делаем это как обычно:
    <code class="html"><link rel="stylesheet" type="text/css" href="domain/jsxgraph.css"/>
    <script type="text/javascript" src="domain/jsxgraphcore.js"></script></code>
    domain
    — это место расположения файлов JSXGraph. Это может быть локальная директория или jsxgraph.uni-bayreuth.de/distrib/
  2. Создать HTML элемент, содержащий чертёж:
    <code class="html"><div id="elementID"></div>,</code>
    где
    elementID
    — идентификатор элемента,
    elementClass
    — класс элемента. Естественно, может быть задан стиль элемента любым известным способом.
  3. Инициализировать “чертёжную доску”:
    <code class="javascript">var brd = JXG.JSXGraph.initBoard('elementClass',{attributes}),</code>
    где
    elementClass
    – класс элемента,
    attributes
    – атрибуты “доски”, которые задают её свойства: размеры, сохранение пропорций, видимость осей, сетки, кнопок навигации и уведомления о правах.
Построение геометрических объектов
Существуют две основные команды:
  1. Команда создания элемента
    <code class="javascript">var el = brd.create('type',[parents],{attributes});</code>
    где
    type
    — тип объекта (точка, линия и так далее),
    [parents] 
    — массив родительских элеметнтов (например, две точки для линии),
    attributes
    — атрибуты (их рассмотрим позже).
  2. Команда задания свойств элемента
    <code class="javascript">el.setProperty({key1:value1,key2:value2,...});</code>
    где
    keyN
    — имя энного свойства, valueN — значение энного свойства.
Точка
Простейшая команда создания точки выглядит так:
<code class="javascript">var el = brd.create('point',[x, y]);</code>
Имя точки задаётся с помощью атрибута
name
(например,
{name:'A'}
).

Точки могут быть свободными (их можно двигать мышкой), фиксированными (их двигать мышкой невозможно) и зависимыми (их движение зависит от движения другого объекта, а мышкой их двигать тоже невозможно).

По умолчанию создаётся свободная точка:
<code class="javascript">var p0 = board.create('point',[-1, 1], {name:'A'});</code>
Если атрибуту
fixed
присвоить значение
true
, то будет создана фиксированная точка:
<code class="javascript">var pl = board.create('point',[1, -1], {name:'B', fixed:true});</code>
Если в качестве значения хотя бы одной из коордитнат точки задать функцию без параметров, возвращающую число, то будет создана зависимая точка:
<code class="javascript">var p2 = board.create('point',[function(){return p0.X()}, -2], {name:'С'});</code>
Вот так это выглядит в JSFiddle: jsfiddle.net/AndreyDolgov/fbha4/embedded/result%2Chtml%2Cjs/.
На чертеже точка
A
— свободная, точка
B
— фиксированная, точка
C
— зависимая от точки
A
.

Прямая, луч, отрезок
Прямая может быть задана двумя способами:
  • Двумя точками
    <code class="javascript">board.create('line',[point1, point2])</code>
    Точки могут быть заданы или именами объектов, или непосредственно координатами (в этом случае точка невидима).
  • Уравенением
    ax+by+c=0
    (обратите внимание на порядок коэффициентов в команде)
    <code class="javascript"> board.create('line',[c, a, b]) </code>
Примеры:
<code class="javascript">var p1 = board.create('point',[0,0],{name:'A'});
var p2 = board.create('point',[3,2],{name:'B'});
var l1 = board.create('line',[p1,p2]);
var l2 = board.create('line',[p1,[1,5]]);
</code>
В JSFiddle: fiddle.jshell.net/AndreyDolgov/tybTW/show/light/.
<code class="javascript">var l3 = board.create('line',[-1.0,-2.0,1.0]);</code>
В JSFiddle: fiddle.jshell.net/AndreyDolgov/2A8Xa/show/light/.

Луч и отрезок с точки зрения JSXGraph – это те же прямые, но с другими атрибутами
straightFirst
и
straightLast
. Если один из этих атрибутов равен
false
, то мы получим луч, если оба – отрезок.

Пример:
<code class="javascript">var p1 = board.create('point',[-2,-1],{name:'A'});
var p2 = board.create('point',[3,-2],{name:'B'});
var p3 = board.create('point',[-3,2],{name:'C'});
var l1 = board.create('line',[p1,p2],{straightFirst:false});
var l2 = board.create('line',[p1,p3],{straightLast:false});
var l3 = board.create('line',[p2,p3],{straightFirst:false,straightLast:false});</code>
В JSFiddle: fiddle.jshell.net/AndreyDolgov/yKxku/show/light/.

Окружность
Окружность может быть построена четырьмя способами:
  1. По центру и точке на окружности.
    <code class="javascript">board.create('circle',[centerPoint,pointOnCircle]);</code>
    Если аргументов два, то они интерпретинуются как центр и точка на окружнсти.
    Например:
    <code class="javascript">var center = board.create('point',[3,3],{name:'O'});
    var ptOnCir = board.create('point',[4,5],{name:'A'});
    var с = board.create('circle',[center,ptOnCir]);</code>
    В JSFiddle: fiddle.jshell.net/AndreyDolgov/A3JMq/show/light/.
    Как всегда, точка может быть задана или именем переменной, или непосредственно координатами. Если точка задана непосредственно координатами, она не видна.
    Например:
    <code class="javascript">var theCircle = board.create('circle',[[3,3],[4,5]]);</code>
    В JSFiddle: fiddle.jshell.net/AndreyDolgov/9FgfW/show/light/.
  2. По центру и радиусу.
    <code class="javascript">board.create('circle',[centerPoint,radiusOfCircle]);</code>
    Когда второй аргумент является числом, оно интерпретируется как радиус.
    Например:
    <code class="javascript">var center = board.create('point',[3,3]);var theCircle = board.create('circle',[center,1]);</code>
    В JSFiddle: fiddle.jshell.net/AndreyDolgov/VSRUx/show/light/.
  3. По центру и другой окружности с известным радиусом.
    <code class="javascript">board.create('circle',[centerPoint,circleWithDesiredRadius]);</code>
    Если второй аргумент – это окружность, то ее радиус используется для построения новой окружности.
    Например:
    <code class="javascript">var circle1 = board.create('circle',[[0,1],[0,2]]);var circle2 = board.create('circle',[[0,3],circle1]);</code>
    В JSFiddle: fiddle.jshell.net/AndreyDolgov/aYezn/show/light/.
  4. По трём точкам.
    <code class="javascript">board.create('circle',[point1,point2,point3]);</code>
    Если аргументов три, то они интерпретируются как три точки, через которые строится окружность.
    Например:
    <code class="javascript">var p1 = board.create('point',[2,1],{name:'p1',size:2});
    var p2 = board.create('point',[2,5],{name:'p2',size:2});
    var p3 = board.create('point',[4,3],{name:'p3',size:2});
    var c = board.create('circle',[p1,p2,p3]);</code>
    В JSFiddle: fiddle.jshell.net/AndreyDolgov/vRW3z/show/light/
Многоугольник
Многоугольник задают массивом вершин.
<code class="javascript">board.create('polygon',[ptVertex1,ptVertex2,...]);</code>
При этом первым и последним элементом массива должна былть одна и та же вершина. Если этого не сделать, то первая вершина автоматически дублируются в качестве последней.
Пример:
<code class="javascript">p1 = board.create('point',[0,0],{name:''});
p2 = board.create('point',[1,3],{name:''});
p3 = board.create('point',[5,5],{name:''});
p4 = board.create('point',[4,2],{name:''});
board.create('polygon',[p1,p2,p3,p4]);</code>
В JSFiddle: jsfiddle.net/AndreyDolgov/Fp3VM/show/light/.

Коническое сечение
Может быть задано двумя способами:
  1. Пятью точками
    <code class="javascript">board.create('conic',[point1,point2,point3,point4,point5]);</code>
  2. Шестью элементами матрицы
    <code class="javascript">board.create('conic',[a11,a22,a33,a21,a31,a32]);</code>
Примеры:
<code class="javascript">p1 = board.create('point',[0,0],{name:'p1'});
p2 = board.create('point',[1,1],{name:'p2'});
board.create('line',[p1,p2],{strokeWidth:1, color:'yellow'});
p3 = board.create('point',[2,3],{name:'p3'});
p4 = board.create('point',[3,4],{name:'p4'});
p5 = board.create('point',[4,1],{name:'p5'});
board.create('conic',[p1,p2,p3,p4,p5], {strokeWidth:4,strokeColor:'green'});</code>
Получим (JSFiddle): jsfiddle.net/AndreyDolgov/DdqvM/show/light/
<code class="javascript">board.create('conic',[9,4,-11,0,-9,-8]);</code>
Получим: jsfiddle.net/AndreyDolgov/4jTQY/show/light/.

Кривая
Существуют три типа кривых:
  1. Параметрические кривые.
    <code class="javascript">board.create('curve',[x,y,a,b]);</code>
    где
    x
    и
    y
    — функции с одним параметром, возвращающие число,
    a
    и
    b
    задают интервал значений параметра.
  2. Полярные кривые.
    <code class="javascript">board.create('curve',[functionOfTheta,[xOrigin,yOrigin],optBegValTheta,optEndValTheta]);</code>
    где
    functionOfTheta
    — функция, аргумент которой — это угол и которая возвращает расстояние от полюса;
    [xOrigin,yOrigin]
    — координаты полюса;
    optBegValTheta
    и
    optEndValTheta
    задают интервал значений угла..
  3. Графическое представление данных в виде ломаной линии.
    <code class="javascript">board.create('curve',[xArray,yArray]);</code>
    где
    xArray
    и
    yArray
    — массив иксов и массив игреков..
Примеры:
<code class="javascript">board.create('curve', [function(t){return 3*Math.cos(t);}, function(t){ return 3*Math.sin(t);}, 0, Math.PI/2]);</code>
Вот так это будет выглядеть в JSFiddle: jsfiddle.net/AndreyDolgov/9mcAs/show/light/.
<code class="javascript">board.create('curve', [function(theta){return theta/17;}, [-2,-1], -8*Math.PI, 8*Math.PI]);</code>
Вот так это будет выглядеть в JSFiddle: jsfiddle.net/AndreyDolgov/XKH6Q/show/light/.
<code class="javascript">x = [-4,-3,-2,-1,0,1,2,3,5];
y = [-3,2,3,-1,0,2,1,4,0];
board.create('curve',[x,y]); </code>
Вот так это будет выглядеть в JSFiddle: jsfiddle.net/AndreyDolgov/uKFFV/show/light/.

График функции
<code class="javascript">board.create('functiongraph',[functionRule,a,b]);</code>
где
functionRule
— функция одного аргумента, возвращающая число,
a
и
b
задают интервал, на котором определена функция.
Пример:
<code class="javascript">board.create('functiongraph', [function(x){ return (x+1)%(x-1);},1,3]);</code>
Вот так это будет выглядеть: jsfiddle.net/AndreyDolgov/gkfqj/show/light/.

Текст
<code class="javascript">board.create('text',[x,y,stringText]);</code>
где первые два аргумента задают положение левого нижнего угла области текста, stringText — строка или функция, возвращающая строку.
Пример:
<code class="javascript">board.create('text',[-5, 2, "<span style='color:yellow;background-color:blue; font-size:50px;'>Это<br>текст.</span>"]);</code>
Получим: jsfiddle.net/AndreyDolgov/YpQkL/show/light/.

Ну вот, мы познакомились с простыми элементами геометрических чертежей, создаваемых с помощью библиотеки JSXGraph. Я думаю, что для введения этого достаточно.
Дальше — серия «JSXGraph в примерах».

Источник: habrahabr.ru,
получено с помощью rss-farm.ru


1 комментарий RSS
avatar
Очень интересно написано про JSXGraph thumbsup
Дальше — серия «JSXGraph в примерах» — хотелось бы узнать, где это можно найти. eyes
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.