fabric.js: не хватает простых примеров
Как нарисовать точку? По аналогии с Line или Circle не выходит...
var hjk=new fabric.Point(10,10).set({ stroke: 'black', strokeWidth: 6, fill: 'black', }); cnvs.add(hjk); var hjk=new fabric.Point([10,10], { stroke: 'black', strokeWidth: 6, fill: 'black', }); cnvs.add(hjk); и другие варианты были. Сейчас у меня отладчик хрома останавливается внутри библиотеки на строке №6794. Может быть у Вас нехилое количество опыта и это кажется смешным, но я не могу разгадать задумки разработчиков... Вот что значит быть одиночкой-самоучкой, порой хоть убейся об стену...:) Дайте ссылки на примеры по-проще, хоть в англоязычном Интернете. |
Цитата:
var circle = new fabric.Circle({ left: 20, top: 20, fill: 'green', radius: 0.5 }); var rect = new fabric.Rect({ left: 10, top: 10, fill: 'red', width: 1, height: 1 }); На их сайте же есть простые примеры в переводе даже Tutorial что еще надо... |
Спасибо, обдумаю. Туториал я смотрел, может быть ничего более и не надо, но только вот что точка это некая сущность до меня не дошло и примера непосредственно с fabric.Point я пока не нашёл. Поэтому и подозрения: если я простой вещи не понял, могут быть и другие загвоздки...
|
o5andrey, даже в графических редакторах нет однозначного способа нарисовать точку, есть фигуры, контур, кисть, карандаш, текст, и любым из этих способов можно сделать некую точку и здесь также. Примеры непосредственно с fabric.Point все переменные pointN здесь данного типа:
// Canvas class var canvas = new fabric.Canvas('c'); // Point class var point1 = new fabric.Point(10, 10); // { x: 10, y: 10 } // Point class var point2 = new fabric.Point(20, 20); // { x: 20, y: 20 } // Rectangle class var rect = new fabric.Rect({ left: point1.x, top: point1.y, width: 40, height: 40 }); // Adds objects to collection, Canvas or Group, then renders canvas... canvas.add(rect); // Checks if point is inside the object var inside = rect.containsPoint(point2); // true // Adds another point to this one and returns another one var point3 = point1.add(point2); // { x: 30, y: 30 } // Subtracts value from this point and returns a new one var point4 = point3.scalarSubtract(25); // { x: 5, y: 5 } // Returns the real center coordinates of the object var point5 = rect.getCenterPoint(); // { x: 30.5, y: 30.5 } // Returns the point between this point and another one var point6 = point4.midPointFrom(point5); // { x: 17.75, y: 17.75 } // Sets object's left position rect.setLeft(point6.x); // Sets object's top position rect.setTop(point6.y); // Renders both the top canvas and the secondary container canvas canvas.renderAll(); |
Ага, понял как пользоваться, спасибо.
|
Часовой пояс GMT +3, время: 11:39. |