Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.02.2017, 13:33
Интересующийся
Отправить личное сообщение для o5andrey Посмотреть профиль Найти все сообщения от o5andrey
 
Регистрация: 03.01.2017
Сообщений: 13

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.
Может быть у Вас нехилое количество опыта и это кажется смешным, но я не могу разгадать задумки разработчиков... Вот что значит быть одиночкой-самоучкой, порой хоть убейся об стену...
Дайте ссылки на примеры по-проще, хоть в англоязычном Интернете.
Ответить с цитированием
  #2 (permalink)  
Старый 22.02.2017, 19:31
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 912

Сообщение от o5andrey Посмотреть сообщение
я не могу разгадать задумки разработчиков...
По задумке разработчиков Point это не фигура (shape), а некая сущность (entity), нужна для всяких манипуляций над себе подобными - сложение, вычитание, умножение, деление, и тд, смотри Methods, а также используется как передаваемое и возвращаемое значение в методах и классах, где встретишь в Docs тип fabric.Point это оно. А что есть точка - круг или квадрат:
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 что еще надо...

Последний раз редактировалось Rise, 22.02.2017 в 19:39.
Ответить с цитированием
  #3 (permalink)  
Старый 23.02.2017, 06:15
Интересующийся
Отправить личное сообщение для o5andrey Посмотреть профиль Найти все сообщения от o5andrey
 
Регистрация: 03.01.2017
Сообщений: 13

Спасибо, обдумаю. Туториал я смотрел, может быть ничего более и не надо, но только вот что точка это некая сущность до меня не дошло и примера непосредственно с fabric.Point я пока не нашёл. Поэтому и подозрения: если я простой вещи не понял, могут быть и другие загвоздки...
Ответить с цитированием
  #4 (permalink)  
Старый 23.02.2017, 14:12
Профессор
Отправить личное сообщение для Rise Посмотреть профиль Найти все сообщения от Rise
 
Регистрация: 07.11.2013
Сообщений: 912

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();
Ответить с цитированием
  #5 (permalink)  
Старый 24.02.2017, 14:00
Интересующийся
Отправить личное сообщение для o5andrey Посмотреть профиль Найти все сообщения от o5andrey
 
Регистрация: 03.01.2017
Сообщений: 13

Ага, понял как пользоваться, спасибо.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск