flaats.js는 토폴로지맵 또는 실내지도 모니터링을 시각화 해주거나, 저작도구를 만들 수 있도록 도와주는 canvas 기반의 javascript 라이브러리입니다.
Flaats.js is a canvas-based javascript library that helps you visualize your topology map or indoor map monitoring, or create authoring tools.
사용된 플러그인은 jQuery 이며, 이후 jQuery를 걷어낸 순수한 javascript library로 완성할 예정입니다.
The plug-in used is jQuery, and we plan to complete it with a pure javascript library that has been removed from jQuery.
- IE: 9+
- Chrome, Firefox, Safari, IE Edge
flaats.js는 npm을 통해 install 하실 수 있습니다.
Flaats.js can be installed via npm.
$ npm install flaatsCommonJs를 이용하여 플러그인을 불러올 수 있습니다.
You can use CommonJs to load plug-ins.
import flaats from 'flaats';
var flaats = require('flaats');HTML에 직접 삽입도 가능합니다.
You can also insert it directly into HTML.
<script src="path/to/flaats.min.js"></script>플러그인을 로드하면, new 생성자를 통해 옵션값으로 canvas를 세팅할 수 있습니다.
When you load the plugin, you can set the canvas as an option value via the new constructor.
var map = new Flaats({
// Draw canvas wrapper element query string
base: '.map',
// If you want to put an image in the background, write down the path.
image: 'path/to/image',
// The function to call after the canvas has been set.
onInitialize: function (layer) {},
// Put the layer you want to use into an array.
layer: [{
id: 'layer id',
name: 'layer name'
}],
// Zoom level step
step: 4,
// canvas scale
scale: 0.5,
// Zoom level
zoomLevel: 0
});Flaats를 생성한 상태에서, 폴리곤을 그리는 function을 호출합니다. 호출되는 function은 다른 모드로 바꾸지 않는 이상,계속해서 사용 가능합니다.
map.drawingPolygon({
// draw layer id
layerId: 'common-layer',
// setting mode (true is enable drawing polygon)
isSet: true,
// group id
section: this.objType,
// option
option: {
// fill color
fill: '#6d5cae',
// stroke color
stroke: '#000000',
// stroke width
strokeWidth: 2,
// opacity
opacity: 1
},
// draw start callback function
onDrawStart: function (position) {
},
// draw move callback function
onDraw: function (position) {
},
// draw finished callback function
onFinished: function (position) {
}
});Flaats를 생성한 상태에서 오브젝트를 생성할 수 있습니다. (현재 image를 통한 오브젝트 그리기가 가능합니다.)
You can create objects with Flaats created. (You can draw objects through the current image.)
map.drawingShape({
// layer id
layerId: 'common-layer',
// setting mode
isSet: true,
// section
section: 'section',
// option
option: {
// object type : image ? circle ? rect ? etc..
type: 'image',
// image url
url: 'path/to/image',
// fill color
fill: '#bdbdbd',
// stroke color (default black)
stroke: '#000000',
// stroke width(default 1)
strokeWidth: 2,
// opacity (default 0.5)
opacity: 1
},
// on drag move callback function
onDragMove: function (position) {
},
// on draw finished callback function
onFinished: function (position) {
}
});After you create Flaats.js, you can connect the lines between objects. The connected line moves accordingly when the object moves.
let linkObj = {
// layer id
layerId: 'common-layer',
// start point object (flaats object)
target: {},
// end point objects (flaats object array)
link: []
};
map.linkShape(linkObj);현재까지 개발되어 있는 모드는 선택, 이동, 에디트 모드입니다. 각 모드는 flaats내의 함수를 통해 변경할 수 있습니다.
The modes that have been developed so far are select, move, and edit modes. Each mode can be changed through a function in flaats.
// select mode
map.changeMode('select');
// edit mode
map.changeMode('edit');
// move mode
map.changeMode('move');MIT © KernYoo