Documentation 3d handler
This commit is contained in:
@@ -2,19 +2,22 @@
|
|||||||
|
|
||||||
var util = require('./util');
|
var util = require('./util');
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handles 3d image of canvas products.
|
||||||
|
* @param {canvas}
|
||||||
|
*/
|
||||||
function ThreeDHandler(canvas) {
|
function ThreeDHandler(canvas) {
|
||||||
var _overlay = new fabric.Group();
|
var _overlay = new fabric.Group();
|
||||||
var _image;
|
var _image;
|
||||||
|
|
||||||
function init() {
|
function init() {
|
||||||
|
|
||||||
// Width is made bigger as this works better with resizing the editor
|
|
||||||
_overlay
|
_overlay
|
||||||
.set({
|
.set({
|
||||||
visible: false,
|
visible: false,
|
||||||
left: 0
|
left: 0
|
||||||
})
|
})
|
||||||
.addWithUpdate(new fabric.Rect({
|
.addWithUpdate(new fabric.Rect({
|
||||||
|
// Width is made bigger as this works better with resizing the editor
|
||||||
width: canvas.width * 2,
|
width: canvas.width * 2,
|
||||||
height: canvas.height,
|
height: canvas.height,
|
||||||
top: 0,
|
top: 0,
|
||||||
@@ -28,6 +31,7 @@ function ThreeDHandler(canvas) {
|
|||||||
init();
|
init();
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
* Disables the 3d image by removing visibility
|
||||||
* @return {ThreeDHandler}
|
* @return {ThreeDHandler}
|
||||||
*/
|
*/
|
||||||
this.disable = function () {
|
this.disable = function () {
|
||||||
@@ -36,6 +40,8 @@ function ThreeDHandler(canvas) {
|
|||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
* Enables the 3d image by setting the width and visibility of the overlay and moving elements which
|
||||||
|
* needs to be visible to the front.
|
||||||
* @return {ThreeDHandler}
|
* @return {ThreeDHandler}
|
||||||
*/
|
*/
|
||||||
this.enable = function () {
|
this.enable = function () {
|
||||||
@@ -50,10 +56,17 @@ function ThreeDHandler(canvas) {
|
|||||||
return this;
|
return this;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Checks if 3d mode is enabled/visible.
|
||||||
|
* @returns {boolean}
|
||||||
|
*/
|
||||||
this.isEnabled = function () {
|
this.isEnabled = function () {
|
||||||
return _overlay.visible;
|
return _overlay.visible;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Refreshes the image. This is mostly done upon resize of the window
|
||||||
|
*/
|
||||||
this.refreshImage = function() {
|
this.refreshImage = function() {
|
||||||
if (util.isMobile()) {
|
if (util.isMobile()) {
|
||||||
this.disable();
|
this.disable();
|
||||||
@@ -79,6 +92,10 @@ function ThreeDHandler(canvas) {
|
|||||||
this.applyImage();
|
this.applyImage();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* (Re)adds the new/existing image with new configuration to the overlay.
|
||||||
|
* @param {img}
|
||||||
|
*/
|
||||||
this.applyImage = function(img) {
|
this.applyImage = function(img) {
|
||||||
img = img || _image;
|
img = img || _image;
|
||||||
|
|
||||||
@@ -88,6 +105,8 @@ function ThreeDHandler(canvas) {
|
|||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
* Sets the image and enables 3d mode.
|
||||||
|
* @param {img}
|
||||||
* @return {ThreeDHandler}
|
* @return {ThreeDHandler}
|
||||||
*/
|
*/
|
||||||
this.setImage = function (img) {
|
this.setImage = function (img) {
|
||||||
|
|||||||
+1
-1
@@ -1,11 +1,11 @@
|
|||||||
'use strict';
|
'use strict';
|
||||||
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* This is just an example usage of the image editor. Also this is used for testing.
|
* This is just an example usage of the image editor. Also this is used for testing.
|
||||||
* This code can be pretty messy, but that is fine because nothing of this will come to
|
* This code can be pretty messy, but that is fine because nothing of this will come to
|
||||||
* production.
|
* production.
|
||||||
*/
|
*/
|
||||||
|
|
||||||
(function() {
|
(function() {
|
||||||
var $document = $(document);
|
var $document = $(document);
|
||||||
var $window = $(window);
|
var $window = $(window);
|
||||||
|
|||||||
Reference in New Issue
Block a user