2269 lines
97 KiB
JavaScript
2269 lines
97 KiB
JavaScript
/*
|
|
* (c) Copyright Ascensio System SIA 2010-2014
|
|
*
|
|
* This program is a free software product. You can redistribute it and/or
|
|
* modify it under the terms of the GNU Affero General Public License (AGPL)
|
|
* version 3 as published by the Free Software Foundation. In accordance with
|
|
* Section 7(a) of the GNU AGPL its Section 15 shall be amended to the effect
|
|
* that Ascensio System SIA expressly excludes the warranty of non-infringement
|
|
* of any third-party rights.
|
|
*
|
|
* This program is distributed WITHOUT ANY WARRANTY; without even the implied
|
|
* warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. For
|
|
* details, see the GNU AGPL at: http://www.gnu.org/licenses/agpl-3.0.html
|
|
*
|
|
* You can contact Ascensio System SIA at Lubanas st. 125a-25, Riga, Latvia,
|
|
* EU, LV-1021.
|
|
*
|
|
* The interactive user interfaces in modified source and object code versions
|
|
* of the Program must display Appropriate Legal Notices, as required under
|
|
* Section 5 of the GNU AGPL version 3.
|
|
*
|
|
* Pursuant to Section 7(b) of the License you must retain the original Product
|
|
* logo when distributing the program. Pursuant to Section 7(e) we decline to
|
|
* grant you any rights under trademark law for use of our trademarks.
|
|
*
|
|
* All the Product's GUI elements, including illustrations and icon sets, as
|
|
* well as technical writing content are licensed under the terms of the
|
|
* Creative Commons Attribution-ShareAlike 4.0 International. See the License
|
|
* terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode
|
|
*
|
|
*/
|
|
function CCacheSlideImage() {
|
|
this.Image = null;
|
|
this.Color = {
|
|
r: 0,
|
|
g: 0,
|
|
b: 0
|
|
};
|
|
}
|
|
var __nextFrame = (function () {
|
|
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
|
|
function (callback) {
|
|
return setTimeout(callback, 25);
|
|
};
|
|
})();
|
|
var __cancelFrame = (function () {
|
|
return window.cancelRequestAnimationFrame || window.webkitCancelAnimationFrame || window.webkitCancelRequestAnimationFrame || window.mozCancelRequestAnimationFrame || window.oCancelRequestAnimationFrame || window.msCancelRequestAnimationFrame || clearTimeout;
|
|
})();
|
|
function CTransitionAnimation(htmlpage) {
|
|
this.HtmlPage = htmlpage;
|
|
this.Type = 0;
|
|
this.Param = 0;
|
|
this.Duration = 0;
|
|
this.StartTime = 0;
|
|
this.EndTime = 0;
|
|
this.CurrentTime = 0;
|
|
this.CacheImage1 = new CCacheSlideImage();
|
|
this.CacheImage2 = new CCacheSlideImage();
|
|
this.Rect = new _rect();
|
|
this.Params = null;
|
|
this.IsBackward = false;
|
|
this.DemonstrationObject = null;
|
|
this.TimerId = null;
|
|
var oThis = this;
|
|
this.CalculateRect = function () {
|
|
var _page = this.HtmlPage;
|
|
var w = _page.m_oEditor.HtmlElement.width;
|
|
var _px_h = _page.m_oEditor.HtmlElement.height;
|
|
if (this.HtmlPage.bIsRetinaSupport) {
|
|
w >>= 1;
|
|
_px_h >>= 1;
|
|
}
|
|
var h = (((_page.m_oBody.AbsolutePosition.B - _page.m_oBody.AbsolutePosition.T) - (_page.m_oTopRuler.AbsolutePosition.B - _page.m_oTopRuler.AbsolutePosition.T)) * g_dKoef_mm_to_pix) >> 0;
|
|
var _pageWidth = _page.m_oLogicDocument.Width * g_dKoef_mm_to_pix;
|
|
var _pageHeight = _page.m_oLogicDocument.Height * g_dKoef_mm_to_pix;
|
|
var _hor_Zoom = 100;
|
|
if (0 != _pageWidth) {
|
|
_hor_Zoom = (100 * (w - 2 * _page.SlideDrawer.CONST_BORDER)) / _pageWidth;
|
|
}
|
|
var _ver_Zoom = 100;
|
|
if (0 != _pageHeight) {
|
|
_ver_Zoom = (100 * (h - 2 * _page.SlideDrawer.CONST_BORDER)) / _pageHeight;
|
|
}
|
|
var _new_value = (Math.min(_hor_Zoom, _ver_Zoom) - 0.5) >> 0;
|
|
if (_new_value < 5) {
|
|
_new_value = 5;
|
|
}
|
|
var dKoef = (_new_value * g_dKoef_mm_to_pix / 100);
|
|
var _slideW = (dKoef * _page.m_oLogicDocument.Width) >> 0;
|
|
var _slideH = (dKoef * _page.m_oLogicDocument.Height) >> 0;
|
|
var _centerX = (w / 2) >> 0;
|
|
var _centerSlideX = (dKoef * _page.m_oLogicDocument.Width / 2) >> 0;
|
|
var _hor_width_left = Math.min(0, _centerX - (_centerSlideX) - _page.SlideDrawer.CONST_BORDER);
|
|
var _hor_width_right = Math.max(w - 1, _centerX + (_slideW - _centerSlideX) + _page.SlideDrawer.CONST_BORDER);
|
|
var _centerY = (_px_h / 2) >> 0;
|
|
var _centerSlideY = (dKoef * _page.m_oLogicDocument.Height / 2) >> 0;
|
|
var _ver_height_top = Math.min(0, _centerY - _centerSlideY - _page.SlideDrawer.CONST_BORDER);
|
|
var _ver_height_bottom = Math.max(_px_h - 1, _centerX + (_slideH - _centerSlideY) + _page.SlideDrawer.CONST_BORDER);
|
|
this.Rect.x = _centerX - _centerSlideX - _hor_width_left;
|
|
this.Rect.y = _centerY - _centerSlideY - _ver_height_top;
|
|
this.Rect.w = _slideW;
|
|
this.Rect.h = _slideH;
|
|
};
|
|
this.CalculateRectDemonstration = function () {
|
|
var _width = this.HtmlPage.DemonstrationManager.Canvas.width;
|
|
var _height = this.HtmlPage.DemonstrationManager.Canvas.height;
|
|
var _w_mm = this.HtmlPage.m_oLogicDocument.Width;
|
|
var _h_mm = this.HtmlPage.m_oLogicDocument.Height;
|
|
var aspectDisplay = _width / _height;
|
|
var aspectPres = _w_mm / _h_mm;
|
|
var _l = 0;
|
|
var _t = 0;
|
|
var _w = 0;
|
|
var _h = 0;
|
|
if (aspectPres > aspectDisplay) {
|
|
_w = _width;
|
|
_h = _w / aspectPres;
|
|
_l = 0;
|
|
_t = (_height - _h) >> 1;
|
|
} else {
|
|
_h = _height;
|
|
_w = _h * aspectPres;
|
|
_t = 0;
|
|
_l = (_width - _w) >> 1;
|
|
}
|
|
this.Rect.x = _l >> 0;
|
|
this.Rect.y = _t >> 0;
|
|
this.Rect.w = _w >> 0;
|
|
this.Rect.h = _h >> 0;
|
|
};
|
|
this.DrawImage1 = function (slide_num, _not_use_prev) {
|
|
if (undefined === slide_num) {
|
|
if (null == this.DemonstrationObject) {
|
|
slide_num = this.HtmlPage.m_oDrawingDocument.SlideCurrent;
|
|
if (slide_num >= this.HtmlPage.m_oDrawingDocument.SlidesCount) {
|
|
slide_num = this.HtmlPage.m_oDrawingDocument.SlidesCount - 1;
|
|
}
|
|
} else {
|
|
slide_num = this.DemonstrationObject.SlideNum;
|
|
if (slide_num >= this.HtmlPage.m_oDrawingDocument.SlidesCount) {
|
|
slide_num = this.HtmlPage.m_oDrawingDocument.SlidesCount - 1;
|
|
}
|
|
}
|
|
}
|
|
if (slide_num > 0 && (_not_use_prev !== true)) {
|
|
var _w = this.Rect.w;
|
|
var _h = this.Rect.h;
|
|
var _w_mm = this.HtmlPage.m_oLogicDocument.Width;
|
|
var _h_mm = this.HtmlPage.m_oLogicDocument.Height;
|
|
this.CacheImage1.Image = this.CreateImage(_w, _h);
|
|
var g = new CGraphics();
|
|
g.init(this.CacheImage1.Image.getContext("2d"), _w, _h, _w_mm, _h_mm);
|
|
g.m_oFontManager = g_fontManager;
|
|
g.transform(1, 0, 0, 1, 0, 0);
|
|
g.IsNoDrawingEmptyPlaceholder = true;
|
|
this.HtmlPage.m_oLogicDocument.DrawPage(slide_num - 1, g);
|
|
}
|
|
};
|
|
this.DrawImage2 = function (slide_num) {
|
|
if (undefined === slide_num) {
|
|
if (null == this.DemonstrationObject) {
|
|
slide_num = this.HtmlPage.m_oDrawingDocument.SlideCurrent;
|
|
if (slide_num >= this.HtmlPage.m_oDrawingDocument.SlidesCount) {
|
|
slide_num = this.HtmlPage.m_oDrawingDocument.SlidesCount - 1;
|
|
}
|
|
} else {
|
|
slide_num = this.DemonstrationObject.SlideNum;
|
|
if (slide_num >= this.HtmlPage.m_oDrawingDocument.SlidesCount) {
|
|
slide_num = this.HtmlPage.m_oDrawingDocument.SlidesCount - 1;
|
|
}
|
|
}
|
|
}
|
|
if (slide_num >= 0) {
|
|
var _w = this.Rect.w;
|
|
var _h = this.Rect.h;
|
|
var _w_mm = this.HtmlPage.m_oLogicDocument.Width;
|
|
var _h_mm = this.HtmlPage.m_oLogicDocument.Height;
|
|
this.CacheImage2.Image = this.CreateImage(_w, _h);
|
|
var g = new CGraphics();
|
|
g.init(this.CacheImage2.Image.getContext("2d"), _w, _h, _w_mm, _h_mm);
|
|
g.m_oFontManager = g_fontManager;
|
|
g.transform(1, 0, 0, 1, 0, 0);
|
|
g.IsNoDrawingEmptyPlaceholder = true;
|
|
this.HtmlPage.m_oLogicDocument.DrawPage(slide_num, g);
|
|
}
|
|
};
|
|
this.Start = function (isButtonPreview) {
|
|
if (true == isButtonPreview) {
|
|
this.CalculateRect();
|
|
var _currentSlide = 0;
|
|
if (null == this.DemonstrationObject) {
|
|
_currentSlide = this.HtmlPage.m_oDrawingDocument.SlideCurrent;
|
|
if (_currentSlide >= this.HtmlPage.m_oDrawingDocument.SlidesCount) {
|
|
_currentSlide = this.HtmlPage.m_oDrawingDocument.SlidesCount - 1;
|
|
}
|
|
} else {
|
|
_currentSlide = this.DemonstrationObject.SlideNum;
|
|
if (_currentSlide >= this.HtmlPage.m_oDrawingDocument.SlidesCount) {
|
|
_currentSlide = this.HtmlPage.m_oDrawingDocument.SlidesCount - 1;
|
|
}
|
|
}
|
|
this.DrawImage1(_currentSlide, false);
|
|
this.DrawImage2(_currentSlide);
|
|
}
|
|
this.StartTime = new Date().getTime();
|
|
this.EndTime = this.StartTime + this.Duration;
|
|
if (this.HtmlPage.bIsRetinaSupport) {
|
|
var ctx1 = oThis.HtmlPage.m_oEditor.HtmlElement.getContext("2d");
|
|
ctx1.setTransform(2, 0, 0, 2, 0, 0);
|
|
}
|
|
switch (this.Type) {
|
|
case c_oAscSlideTransitionTypes.Fade:
|
|
this._startFade();
|
|
break;
|
|
case c_oAscSlideTransitionTypes.Push:
|
|
this._startPush();
|
|
break;
|
|
case c_oAscSlideTransitionTypes.Wipe:
|
|
this._startWipe();
|
|
break;
|
|
case c_oAscSlideTransitionTypes.Split:
|
|
this._startSplit();
|
|
break;
|
|
case c_oAscSlideTransitionTypes.UnCover:
|
|
this._startUnCover();
|
|
break;
|
|
case c_oAscSlideTransitionTypes.Cover:
|
|
this._startCover();
|
|
break;
|
|
case c_oAscSlideTransitionTypes.Clock:
|
|
this._startClock();
|
|
break;
|
|
case c_oAscSlideTransitionTypes.Zoom:
|
|
this._startZoom();
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
};
|
|
this.End = function (bIsAttack) {
|
|
if (bIsAttack === true && null != this.TimerId) {
|
|
__cancelFrame(this.TimerId);
|
|
}
|
|
this.TimerId = null;
|
|
this.Params = null;
|
|
if (this.DemonstrationObject != null) {
|
|
this.DemonstrationObject.OnEndTransition(bIsAttack);
|
|
this.CacheImage1.Image = null;
|
|
this.CacheImage2.Image = null;
|
|
return;
|
|
}
|
|
this.CacheImage1.Image = null;
|
|
this.CacheImage2.Image = null;
|
|
var ctx1 = this.HtmlPage.m_oEditor.HtmlElement.getContext("2d");
|
|
ctx1.setTransform(1, 0, 0, 1, 0, 0);
|
|
this.HtmlPage.OnScroll();
|
|
};
|
|
this.IsPlaying = function () {
|
|
return (null != this.TimerId) ? true : false;
|
|
};
|
|
this.CreateImage = function (w, h) {
|
|
var _im = document.createElement("canvas");
|
|
_im.width = w;
|
|
_im.height = h;
|
|
return _im;
|
|
};
|
|
this._startFade = function () {
|
|
oThis.CurrentTime = new Date().getTime();
|
|
if (oThis.CurrentTime >= oThis.EndTime) {
|
|
oThis.End(false);
|
|
return;
|
|
}
|
|
if (oThis.TimerId === null) {
|
|
oThis.Params = {
|
|
IsFirstAfterHalf: true
|
|
};
|
|
var _ctx1 = null;
|
|
if (null == oThis.DemonstrationObject) {
|
|
_ctx1 = oThis.HtmlPage.m_oEditor.HtmlElement.getContext("2d");
|
|
_ctx1.fillStyle = "#B0B0B0";
|
|
_ctx1.fillRect(0, 0, oThis.HtmlPage.m_oEditor.HtmlElement.width, oThis.HtmlPage.m_oEditor.HtmlElement.height);
|
|
} else {
|
|
_ctx1 = oThis.DemonstrationObject.Canvas.getContext("2d");
|
|
_ctx1.fillStyle = "#000000";
|
|
_ctx1.fillRect(0, 0, oThis.DemonstrationObject.Canvas.width, oThis.DemonstrationObject.Canvas.height);
|
|
}
|
|
if (null != oThis.CacheImage1.Image) {
|
|
_ctx1.drawImage(oThis.CacheImage1.Image, oThis.Rect.x, oThis.Rect.y, oThis.Rect.w, oThis.Rect.h);
|
|
} else {
|
|
var _c = oThis.CacheImage1.Color;
|
|
_ctx1.fillStyle = "rgb(" + _c.r + "," + _c.g + "," + _c.b + ")";
|
|
_ctx1.fillRect(oThis.Rect.x, oThis.Rect.y, oThis.Rect.w, oThis.Rect.h);
|
|
_ctx1.beginPath();
|
|
}
|
|
}
|
|
var _ctx2 = null;
|
|
if (oThis.DemonstrationObject == null) {
|
|
oThis.HtmlPage.m_oOverlayApi.Clear();
|
|
oThis.HtmlPage.m_oOverlayApi.CheckRect(oThis.Rect.x, oThis.Rect.y, oThis.Rect.w, oThis.Rect.h);
|
|
_ctx2 = oThis.HtmlPage.m_oOverlayApi.m_oContext;
|
|
} else {
|
|
_ctx2 = oThis.DemonstrationObject.Overlay.getContext("2d");
|
|
_ctx2.clearRect(oThis.Rect.x, oThis.Rect.y, oThis.Rect.w, oThis.Rect.h);
|
|
}
|
|
var _part = (oThis.CurrentTime - oThis.StartTime) / oThis.Duration;
|
|
if (oThis.IsBackward) {
|
|
_part = 1 - _part;
|
|
}
|
|
if (oThis.Param == c_oAscSlideTransitionParams.Fade_Smoothly) {
|
|
_ctx2.globalAlpha = _part;
|
|
if (null != oThis.CacheImage2.Image) {
|
|
_ctx2.drawImage(oThis.CacheImage2.Image, oThis.Rect.x, oThis.Rect.y, oThis.Rect.w, oThis.Rect.h);
|
|
} else {
|
|
var _c = oThis.CacheImage2.Color;
|
|
_ctx2.fillStyle = "rgb(" + _c.r + "," + _c.g + "," + _c.b + ")";
|
|
_ctx2.fillRect(oThis.Rect.x, oThis.Rect.y, oThis.Rect.w, oThis.Rect.h);
|
|
_ctx2.beginPath();
|
|
}
|
|
_ctx2.globalAlpha = 1;
|
|
} else {
|
|
if (oThis.Param == c_oAscSlideTransitionParams.Fade_Through_Black) {
|
|
if (oThis.Params.IsFirstAfterHalf) {
|
|
if (_part > 0.5) {
|
|
var _ctx1 = null;
|
|
if (null == oThis.DemonstrationObject) {
|
|
_ctx1 = oThis.HtmlPage.m_oEditor.HtmlElement.getContext("2d");
|
|
} else {
|
|
_ctx1 = oThis.DemonstrationObject.Canvas.getContext("2d");
|
|
}
|
|
_ctx1.fillStyle = "rgb(0,0,0)";
|
|
_ctx1.fillRect(oThis.Rect.x, oThis.Rect.y, oThis.Rect.w, oThis.Rect.h);
|
|
_ctx1.beginPath();
|
|
oThis.Params.IsFirstAfterHalf = false;
|
|
}
|
|
}
|
|
if (oThis.Params.IsFirstAfterHalf) {
|
|
_ctx2.globalAlpha = (2 * _part);
|
|
_ctx2.fillStyle = "rgb(0,0,0)";
|
|
_ctx2.fillRect(oThis.Rect.x, oThis.Rect.y, oThis.Rect.w, oThis.Rect.h);
|
|
_ctx2.beginPath();
|
|
} else {
|
|
_ctx2.globalAlpha = (2 * (_part - 0.5));
|
|
if (null != oThis.CacheImage2.Image) {
|
|
_ctx2.drawImage(oThis.CacheImage2.Image, oThis.Rect.x, oThis.Rect.y, oThis.Rect.w, oThis.Rect.h);
|
|
} else {
|
|
var _c = oThis.CacheImage2.Color;
|
|
_ctx2.fillStyle = "rgb(" + _c.r + "," + _c.g + "," + _c.b + ")";
|
|
_ctx2.fillRect(oThis.Rect.x, oThis.Rect.y, oThis.Rect.w, oThis.Rect.h);
|
|
_ctx2.beginPath();
|
|
}
|
|
}
|
|
_ctx2.globalAlpha = 1;
|
|
}
|
|
}
|
|
oThis.TimerId = __nextFrame(oThis._startFade);
|
|
};
|
|
this._startPush = function () {
|
|
oThis.CurrentTime = new Date().getTime();
|
|
if (oThis.CurrentTime >= oThis.EndTime) {
|
|
oThis.End(false);
|
|
return;
|
|
}
|
|
var _xDst = oThis.Rect.x;
|
|
var _yDst = oThis.Rect.y;
|
|
var _wDst = oThis.Rect.w;
|
|
var _hDst = oThis.Rect.h;
|
|
if (oThis.TimerId === null) {
|
|
oThis.Params = {
|
|
IsFirstAfterHalf: true
|
|
};
|
|
if (null == oThis.DemonstrationObject) {
|
|
var _ctx1 = oThis.HtmlPage.m_oEditor.HtmlElement.getContext("2d");
|
|
_ctx1.fillStyle = "#B0B0B0";
|
|
_ctx1.fillRect(0, 0, oThis.HtmlPage.m_oEditor.HtmlElement.width, oThis.HtmlPage.m_oEditor.HtmlElement.height);
|
|
} else {
|
|
var _ctx1 = oThis.DemonstrationObject.Canvas.getContext("2d");
|
|
_ctx1.fillStyle = "#000000";
|
|
_ctx1.fillRect(0, 0, oThis.DemonstrationObject.Canvas.width, oThis.DemonstrationObject.Canvas.height);
|
|
}
|
|
}
|
|
var _xSrc = 0;
|
|
var _ySrc = 0;
|
|
var _xDstO = oThis.Rect.x;
|
|
var _yDstO = oThis.Rect.y;
|
|
var _wDstO = oThis.Rect.w;
|
|
var _hDstO = oThis.Rect.h;
|
|
var _xSrcO = 0;
|
|
var _ySrcO = 0;
|
|
var _part = (oThis.CurrentTime - oThis.StartTime) / oThis.Duration;
|
|
if (oThis.IsBackward) {
|
|
_part = 1 - _part;
|
|
}
|
|
var _offX = (_wDst * (1 - _part)) >> 0;
|
|
var _offY = (_hDst * (1 - _part)) >> 0;
|
|
switch (oThis.Param) {
|
|
case c_oAscSlideTransitionParams.Param_Left:
|
|
_xSrc = _offX;
|
|
_wDst -= _offX;
|
|
_xDstO += _wDst;
|
|
_wDstO -= _wDst;
|
|
break;
|
|
case c_oAscSlideTransitionParams.Param_Right:
|
|
_xDst += _offX;
|
|
_wDst -= _offX;
|
|
_xSrcO = _wDst;
|
|
_wDstO -= _wDst;
|
|
break;
|
|
case c_oAscSlideTransitionParams.Param_Top:
|
|
_ySrc = _offY;
|
|
_hDst -= _offY;
|
|
_yDstO += _hDst;
|
|
_hDstO -= _hDst;
|
|
break;
|
|
case c_oAscSlideTransitionParams.Param_Bottom:
|
|
_yDst += _offY;
|
|
_hDst -= _offY;
|
|
_ySrcO = _hDst;
|
|
_hDstO -= _hDst;
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
var _ctx2 = null;
|
|
if (null == oThis.DemonstrationObject) {
|
|
oThis.HtmlPage.m_oOverlayApi.Clear();
|
|
oThis.HtmlPage.m_oOverlayApi.CheckRect(oThis.Rect.x, oThis.Rect.y, oThis.Rect.w, oThis.Rect.h);
|
|
_ctx2 = oThis.HtmlPage.m_oOverlayApi.m_oContext;
|
|
} else {
|
|
_ctx2 = oThis.DemonstrationObject.Overlay.getContext("2d");
|
|
}
|
|
if (_wDstO > 0 && _hDstO > 0) {
|
|
if (null != oThis.CacheImage1.Image) {
|
|
_ctx2.drawImage(oThis.CacheImage1.Image, _xSrcO, _ySrcO, _wDstO, _hDstO, _xDstO, _yDstO, _wDstO, _hDstO);
|
|
} else {
|
|
var _c = oThis.CacheImage2.Color;
|
|
_ctx2.fillStyle = "rgb(" + _c.r + "," + _c.g + "," + _c.b + ")";
|
|
_ctx2.fillRect(_xDstO, _yDstO, _wDstO, _hDstO);
|
|
_ctx2.beginPath();
|
|
}
|
|
}
|
|
if (_wDst > 0 && _hDst > 0) {
|
|
if (null != oThis.CacheImage2.Image) {
|
|
_ctx2.drawImage(oThis.CacheImage2.Image, _xSrc, _ySrc, _wDst, _hDst, _xDst, _yDst, _wDst, _hDst);
|
|
} else {
|
|
var _c = oThis.CacheImage2.Color;
|
|
_ctx2.fillStyle = "rgb(" + _c.r + "," + _c.g + "," + _c.b + ")";
|
|
_ctx2.fillRect(_xDst, _yDst, _wDst, _hDst);
|
|
_ctx2.beginPath();
|
|
}
|
|
}
|
|
oThis.TimerId = __nextFrame(oThis._startPush);
|
|
};
|
|
this._startWipe = function () {
|
|
oThis.CurrentTime = new Date().getTime();
|
|
if (oThis.CurrentTime >= oThis.EndTime) {
|
|
oThis.End(false);
|
|
return;
|
|
}
|
|
if (oThis.TimerId === null) {
|
|
var _ctx1 = null;
|
|
if (null == oThis.DemonstrationObject) {
|
|
_ctx1 = oThis.HtmlPage.m_oEditor.HtmlElement.getContext("2d");
|
|
_ctx1.fillStyle = "#B0B0B0";
|
|
_ctx1.fillRect(0, 0, oThis.HtmlPage.m_oEditor.HtmlElement.width, oThis.HtmlPage.m_oEditor.HtmlElement.height);
|
|
} else {
|
|
_ctx1 = oThis.DemonstrationObject.Canvas.getContext("2d");
|
|
_ctx1.fillStyle = "#000000";
|
|
_ctx1.fillRect(0, 0, oThis.DemonstrationObject.Canvas.width, oThis.DemonstrationObject.Canvas.height);
|
|
}
|
|
if (null != oThis.CacheImage1.Image) {
|
|
_ctx1.drawImage(oThis.CacheImage1.Image, oThis.Rect.x, oThis.Rect.y, oThis.Rect.w, oThis.Rect.h);
|
|
} else {
|
|
var _c = oThis.CacheImage1.Color;
|
|
_ctx1.fillStyle = "rgb(" + _c.r + "," + _c.g + "," + _c.b + ")";
|
|
_ctx1.fillRect(oThis.Rect.x, oThis.Rect.y, oThis.Rect.w, oThis.Rect.h);
|
|
_ctx1.beginPath();
|
|
}
|
|
}
|
|
var _xDst = oThis.Rect.x;
|
|
var _yDst = oThis.Rect.y;
|
|
var _wDst = oThis.Rect.w;
|
|
var _hDst = oThis.Rect.h;
|
|
var _part = (oThis.CurrentTime - oThis.StartTime) / oThis.Duration;
|
|
if (oThis.IsBackward) {
|
|
_part = 1 - _part;
|
|
}
|
|
var _ctx2 = null;
|
|
if (oThis.DemonstrationObject == null) {
|
|
oThis.HtmlPage.m_oOverlayApi.Clear();
|
|
oThis.HtmlPage.m_oOverlayApi.CheckRect(_xDst, _yDst, _wDst, _hDst);
|
|
_ctx2 = oThis.HtmlPage.m_oOverlayApi.m_oContext;
|
|
_ctx2.setTransform(1, 0, 0, 1, 0, 0);
|
|
} else {
|
|
_ctx2 = oThis.DemonstrationObject.Overlay.getContext("2d");
|
|
_ctx2.clearRect(_xDst, _yDst, _wDst, _hDst);
|
|
}
|
|
var _koefWipeLen = 1;
|
|
switch (oThis.Param) {
|
|
case c_oAscSlideTransitionParams.Param_Left:
|
|
if (null == oThis.TimerId) {
|
|
var _canvasTmp = document.createElement("canvas");
|
|
_canvasTmp.width = 256;
|
|
_canvasTmp.height = 1;
|
|
var _canvasTmpCtx = _canvasTmp.getContext("2d");
|
|
var _data = _canvasTmpCtx.createImageData(256, 1);
|
|
for (var i = 0; i < 256; i++) {
|
|
_data.data[4 * i + 3] = 255 - i;
|
|
}
|
|
_canvasTmpCtx.putImageData(_data, 0, 0);
|
|
oThis.Params = {
|
|
GradImage: _canvasTmp
|
|
};
|
|
}
|
|
var _xPosStart = (_xDst - _koefWipeLen * _wDst) >> 0;
|
|
var _xPos = (_xPosStart + (_part * (1 + _koefWipeLen) * _wDst)) >> 0;
|
|
var _gradW = (_koefWipeLen * _wDst) >> 0;
|
|
if (_xPos > _xDst) {
|
|
if ((_xPos + _gradW) > (_xDst + _wDst)) {
|
|
_ctx2.beginPath();
|
|
_ctx2.fillStyle = "#000000";
|
|
_ctx2.fillRect(_xDst, _yDst, _xPos - _xDst + 1, _hDst);
|
|
_ctx2.beginPath();
|
|
var _srcImageW = (256 * (_wDst - _xPos + _xDst) / _gradW) >> 0;
|
|
if (_srcImageW > 0 && (_wDst - _xPos + _xDst) > 0) {
|
|
_ctx2.drawImage(oThis.Params.GradImage, 0, 0, _srcImageW, 1, _xPos, _yDst, _wDst - _xPos + _xDst, _hDst);
|
|
}
|
|
} else {
|
|
_ctx2.beginPath();
|
|
_ctx2.fillStyle = "#000000";
|
|
_ctx2.fillRect(_xDst, _yDst, _xPos - _xDst + 1, _hDst);
|
|
_ctx2.beginPath();
|
|
if (_gradW > 0) {
|
|
_ctx2.drawImage(oThis.Params.GradImage, _xPos, _yDst, _gradW, _hDst);
|
|
}
|
|
}
|
|
} else {
|
|
var _srcImageW = _xPos + _gradW - _xDst;
|
|
var _srcImageWW = 256 * (_xPos + _gradW - _xDst) / _gradW;
|
|
if (_srcImageW > 0 && _srcImageWW > 0) {
|
|
_ctx2.drawImage(oThis.Params.GradImage, 256 - _srcImageWW, 0, _srcImageWW, 1, _xDst, _yDst, _srcImageW, _hDst);
|
|
}
|
|
}
|
|
break;
|
|
case c_oAscSlideTransitionParams.Param_Right:
|
|
if (null == oThis.TimerId) {
|
|
var _canvasTmp = document.createElement("canvas");
|
|
_canvasTmp.width = 256;
|
|
_canvasTmp.height = 1;
|
|
var _canvasTmpCtx = _canvasTmp.getContext("2d");
|
|
var _data = _canvasTmpCtx.createImageData(256, 1);
|
|
for (var i = 0; i < 256; i++) {
|
|
_data.data[4 * i + 3] = i;
|
|
}
|
|
_canvasTmpCtx.putImageData(_data, 0, 0);
|
|
oThis.Params = {
|
|
GradImage: _canvasTmp
|
|
};
|
|
}
|
|
var _rDst = _xDst + _wDst;
|
|
var _xPosStart = (_rDst + _koefWipeLen * _wDst) >> 0;
|
|
var _xPos = (_xPosStart - (_part * (1 + _koefWipeLen) * _wDst)) >> 0;
|
|
var _gradW = (_koefWipeLen * _wDst) >> 0;
|
|
if (_xPos < _rDst) {
|
|
if ((_xPos - _gradW) < _xDst) {
|
|
_ctx2.beginPath();
|
|
_ctx2.fillStyle = "#000000";
|
|
_ctx2.fillRect(_xPos, _yDst, _rDst - _xPos, _hDst);
|
|
_ctx2.beginPath();
|
|
var _srcImageW = (256 * (_xDst - _xPos + _gradW) / _gradW) >> 0;
|
|
if (_srcImageW > 0 && (_xPos - _xDst) > 0) {
|
|
_ctx2.drawImage(oThis.Params.GradImage, _srcImageW, 0, 256 - _srcImageW, 1, _xDst, _yDst, _xPos - _xDst, _hDst);
|
|
}
|
|
} else {
|
|
_ctx2.beginPath();
|
|
_ctx2.fillStyle = "#000000";
|
|
_ctx2.fillRect(_xPos, _yDst, _rDst - _xPos + 1, _hDst);
|
|
_ctx2.beginPath();
|
|
if (_gradW > 0) {
|
|
_ctx2.drawImage(oThis.Params.GradImage, _xPos - _gradW, _yDst, _gradW, _hDst);
|
|
}
|
|
}
|
|
} else {
|
|
var _gradWW = _xPosStart - _xPos;
|
|
if (_gradWW > 0) {
|
|
var _srcImageW = 256 * _gradWW / _gradW;
|
|
if (_srcImageW > 0 && (_rDst - _xPos + _gradW) > 0) {
|
|
_ctx2.drawImage(oThis.Params.GradImage, 0, 0, _srcImageW, 1, _xPos - _gradW, _yDst, _rDst - _xPos + _gradW, _hDst);
|
|
}
|
|
}
|
|
}
|
|
break;
|
|
case c_oAscSlideTransitionParams.Param_Top:
|
|
if (null == oThis.TimerId) {
|
|
var _canvasTmp = document.createElement("canvas");
|
|
_canvasTmp.width = 1;
|
|
_canvasTmp.height = 256;
|
|
var _canvasTmpCtx = _canvasTmp.getContext("2d");
|
|
var _data = _canvasTmpCtx.createImageData(1, 256);
|
|
for (var i = 0; i < 256; i++) {
|
|
_data.data[4 * i + 3] = 255 - i;
|
|
}
|
|
_canvasTmpCtx.putImageData(_data, 0, 0);
|
|
oThis.Params = {
|
|
GradImage: _canvasTmp
|
|
};
|
|
}
|
|
var _yPosStart = (_yDst - _koefWipeLen * _hDst) >> 0;
|
|
var _yPos = (_yPosStart + (_part * (1 + _koefWipeLen) * _hDst)) >> 0;
|
|
var _gradH = (_koefWipeLen * _hDst) >> 0;
|
|
if (_yPos > _yDst) {
|
|
if ((_yPos + _gradH) > (_yDst + _hDst)) {
|
|
_ctx2.beginPath();
|
|
_ctx2.fillStyle = "#000000";
|
|
_ctx2.fillRect(_xDst, _yDst, _wDst, _yPos - _yDst + 1);
|
|
_ctx2.beginPath();
|
|
var _srcImageH = (256 * (_hDst - _yPos + _yDst) / _gradH) >> 0;
|
|
if (_srcImageH > 0 && (_hDst - _yPos + _yDst) > 0) {
|
|
_ctx2.drawImage(oThis.Params.GradImage, 0, 0, 1, _srcImageH, _xDst, _yPos, _wDst, _hDst - _yPos + _yDst);
|
|
}
|
|
} else {
|
|
_ctx2.beginPath();
|
|
_ctx2.fillStyle = "#000000";
|
|
_ctx2.fillRect(_xDst, _yDst, _wDst, _yPos - _yDst + 1);
|
|
_ctx2.beginPath();
|
|
if (_gradH > 0) {
|
|
_ctx2.drawImage(oThis.Params.GradImage, _xDst, _yPos, _wDst, _gradH);
|
|
}
|
|
}
|
|
} else {
|
|
var _srcImageH = _yPos + _gradH - _yDst;
|
|
var _srcImageHH = 256 * (_yPos + _gradH - _yDst) / _gradH;
|
|
if (_srcImageH > 0 && _srcImageHH > 0) {
|
|
_ctx2.drawImage(oThis.Params.GradImage, 0, 256 - _srcImageHH, 1, _srcImageHH, _xDst, _yDst, _wDst, _srcImageH);
|
|
}
|
|
}
|
|
break;
|
|
case c_oAscSlideTransitionParams.Param_Bottom:
|
|
if (null == oThis.TimerId) {
|
|
var _canvasTmp = document.createElement("canvas");
|
|
_canvasTmp.width = 1;
|
|
_canvasTmp.height = 256;
|
|
var _canvasTmpCtx = _canvasTmp.getContext("2d");
|
|
var _data = _canvasTmpCtx.createImageData(1, 256);
|
|
for (var i = 0; i < 256; i++) {
|
|
_data.data[4 * i + 3] = i;
|
|
}
|
|
_canvasTmpCtx.putImageData(_data, 0, 0);
|
|
oThis.Params = {
|
|
GradImage: _canvasTmp
|
|
};
|
|
}
|
|
var _bDst = _yDst + _hDst;
|
|
var _yPosStart = (_bDst + _koefWipeLen * _hDst) >> 0;
|
|
var _yPos = (_yPosStart - (_part * (1 + _koefWipeLen) * _hDst)) >> 0;
|
|
var _gradH = (_koefWipeLen * _hDst) >> 0;
|
|
if (_yPos < _bDst) {
|
|
if ((_yPos - _gradH) < _yDst) {
|
|
_ctx2.beginPath();
|
|
_ctx2.fillStyle = "#000000";
|
|
_ctx2.fillRect(_xDst, _yPos, _wDst, _bDst - _yPos);
|
|
_ctx2.beginPath();
|
|
var _srcImageH = (256 * (_yPos - _yDst) / _gradH) >> 0;
|
|
if (_srcImageH > 0 && (_yPos - _yDst) > 0) {
|
|
_ctx2.drawImage(oThis.Params.GradImage, 0, 256 - _srcImageH, 1, _srcImageH, _xDst, _yDst, _wDst, _yPos - _yDst);
|
|
}
|
|
} else {
|
|
_ctx2.beginPath();
|
|
_ctx2.fillStyle = "#000000";
|
|
_ctx2.fillRect(_xDst, _yPos, _wDst, _bDst - _yPos);
|
|
_ctx2.beginPath();
|
|
if (_gradH > 0) {
|
|
_ctx2.drawImage(oThis.Params.GradImage, _xDst, _yPos - _gradH, _wDst, _gradH);
|
|
}
|
|
}
|
|
} else {
|
|
var _srcImageH = _bDst - (_yPos - _gradH);
|
|
var _srcImageHH = 256 * _srcImageH / _gradH;
|
|
if (_srcImageH > 0 && _srcImageHH > 0) {
|
|
_ctx2.drawImage(oThis.Params.GradImage, 0, 0, 1, _srcImageHH, _xDst, _bDst - _srcImageH, _wDst, _srcImageH);
|
|
}
|
|
}
|
|
break;
|
|
case c_oAscSlideTransitionParams.Param_TopLeft:
|
|
if (null == oThis.TimerId) {
|
|
var _canvasTmp = document.createElement("canvas");
|
|
_canvasTmp.width = 256;
|
|
_canvasTmp.height = 1;
|
|
var _canvasTmpCtx = _canvasTmp.getContext("2d");
|
|
var _data = _canvasTmpCtx.createImageData(256, 1);
|
|
for (var i = 0; i < 256; i++) {
|
|
_data.data[4 * i + 3] = 255 - i;
|
|
}
|
|
_canvasTmpCtx.putImageData(_data, 0, 0);
|
|
oThis.Params = {
|
|
GradImage: _canvasTmp
|
|
};
|
|
}
|
|
var _ang = Math.atan(_hDst / _wDst);
|
|
var _sin = Math.sin(_ang);
|
|
var _cos = Math.cos(_ang);
|
|
var _hDstN2 = _wDst * _sin;
|
|
var _hDstN = 2 * _hDstN2;
|
|
var _wDstN = _wDst * _cos + _hDst * _sin;
|
|
var _e_off_x = -_sin;
|
|
var _e_off_y = -_cos;
|
|
var _gradW = (_koefWipeLen * _hDstN) >> 0;
|
|
var _cX = _xDst + _wDst / 2;
|
|
var _cY = _yDst + _hDst / 2;
|
|
var _cStartX = _cX + (_hDstN2 + _gradW / 2) * _e_off_x;
|
|
var _cStartY = _cY + (_hDstN2 + _gradW / 2) * _e_off_y;
|
|
var _cPosX = _cStartX - _e_off_x * _part * (_gradW + _hDstN);
|
|
var _cPosY = _cStartY - _e_off_y * _part * (_gradW + _hDstN);
|
|
_ctx2.save();
|
|
_ctx2.beginPath();
|
|
_ctx2.rect(_xDst, _yDst, _wDst, _hDst);
|
|
_ctx2.clip();
|
|
_ctx2.beginPath();
|
|
_ctx2.translate(_cPosX, _cPosY);
|
|
_ctx2.rotate(Math.PI / 2 - _ang);
|
|
_ctx2.fillStyle = "#000000";
|
|
_ctx2.fillRect(-_hDstN2 - _gradW, -_wDstN / 2, _gradW, _wDstN);
|
|
_ctx2.beginPath();
|
|
_ctx2.drawImage(oThis.Params.GradImage, -_hDstN2, -_wDstN / 2, _hDstN, _wDstN);
|
|
_ctx2.restore();
|
|
break;
|
|
case c_oAscSlideTransitionParams.Param_TopRight:
|
|
if (null == oThis.TimerId) {
|
|
var _canvasTmp = document.createElement("canvas");
|
|
_canvasTmp.width = 256;
|
|
_canvasTmp.height = 1;
|
|
var _canvasTmpCtx = _canvasTmp.getContext("2d");
|
|
var _data = _canvasTmpCtx.createImageData(256, 1);
|
|
for (var i = 0; i < 256; i++) {
|
|
_data.data[4 * i + 3] = i;
|
|
}
|
|
_canvasTmpCtx.putImageData(_data, 0, 0);
|
|
oThis.Params = {
|
|
GradImage: _canvasTmp
|
|
};
|
|
}
|
|
var _ang = Math.atan(_hDst / _wDst);
|
|
var _sin = Math.sin(_ang);
|
|
var _cos = Math.cos(_ang);
|
|
var _wDstN2 = _wDst * _sin;
|
|
var _wDstN = 2 * _wDstN2;
|
|
var _hDstN = _wDst * _cos + _hDst * _sin;
|
|
var _e_off_x = _sin;
|
|
var _e_off_y = -_cos;
|
|
var _gradW = (_koefWipeLen * _wDstN) >> 0;
|
|
var _cX = _xDst + _wDst / 2;
|
|
var _cY = _yDst + _hDst / 2;
|
|
var _cStartX = _cX + (_wDstN2 + _gradW / 2) * _e_off_x;
|
|
var _cStartY = _cY + (_wDstN2 + _gradW / 2) * _e_off_y;
|
|
var _cPosX = _cStartX - _e_off_x * _part * (_gradW + _wDstN);
|
|
var _cPosY = _cStartY - _e_off_y * _part * (_gradW + _wDstN);
|
|
_ctx2.save();
|
|
_ctx2.beginPath();
|
|
_ctx2.rect(_xDst, _yDst, _wDst, _hDst);
|
|
_ctx2.clip();
|
|
_ctx2.beginPath();
|
|
_ctx2.translate(_cPosX, _cPosY);
|
|
_ctx2.rotate(_ang - Math.PI / 2);
|
|
_ctx2.fillStyle = "#000000";
|
|
_ctx2.fillRect(_wDstN2, -_hDstN / 2, _gradW, _hDstN);
|
|
_ctx2.beginPath();
|
|
_ctx2.drawImage(oThis.Params.GradImage, -_wDstN2, -_hDstN / 2, _wDstN, _hDstN);
|
|
_ctx2.restore();
|
|
break;
|
|
case c_oAscSlideTransitionParams.Param_BottomLeft:
|
|
if (null == oThis.TimerId) {
|
|
var _canvasTmp = document.createElement("canvas");
|
|
_canvasTmp.width = 256;
|
|
_canvasTmp.height = 1;
|
|
var _canvasTmpCtx = _canvasTmp.getContext("2d");
|
|
var _data = _canvasTmpCtx.createImageData(256, 1);
|
|
for (var i = 0; i < 256; i++) {
|
|
_data.data[4 * i + 3] = 255 - i;
|
|
}
|
|
_canvasTmpCtx.putImageData(_data, 0, 0);
|
|
oThis.Params = {
|
|
GradImage: _canvasTmp
|
|
};
|
|
}
|
|
var _ang = Math.atan(_hDst / _wDst);
|
|
var _sin = Math.sin(_ang);
|
|
var _cos = Math.cos(_ang);
|
|
var _wDstN2 = _wDst * _sin;
|
|
var _wDstN = 2 * _wDstN2;
|
|
var _hDstN = _wDst * _cos + _hDst * _sin;
|
|
var _e_off_x = _sin;
|
|
var _e_off_y = -_cos;
|
|
var _gradW = (_koefWipeLen * _wDstN) >> 0;
|
|
var _cX = _xDst + _wDst / 2;
|
|
var _cY = _yDst + _hDst / 2;
|
|
var _cStartX = _cX - (_wDstN2 + _gradW / 2) * _e_off_x;
|
|
var _cStartY = _cY - (_wDstN2 + _gradW / 2) * _e_off_y;
|
|
var _cPosX = _cStartX + _e_off_x * _part * (_gradW + _wDstN);
|
|
var _cPosY = _cStartY + _e_off_y * _part * (_gradW + _wDstN);
|
|
_ctx2.save();
|
|
_ctx2.beginPath();
|
|
_ctx2.rect(_xDst, _yDst, _wDst, _hDst);
|
|
_ctx2.clip();
|
|
_ctx2.beginPath();
|
|
_ctx2.translate(_cPosX, _cPosY);
|
|
_ctx2.rotate(_ang - Math.PI / 2);
|
|
_ctx2.fillStyle = "#000000";
|
|
_ctx2.fillRect(-_wDstN2 - _gradW, -_hDstN / 2, _gradW, _hDstN);
|
|
_ctx2.beginPath();
|
|
_ctx2.drawImage(oThis.Params.GradImage, -_wDstN2, -_hDstN / 2, _wDstN, _hDstN);
|
|
_ctx2.restore();
|
|
break;
|
|
case c_oAscSlideTransitionParams.Param_BottomRight:
|
|
if (null == oThis.TimerId) {
|
|
var _canvasTmp = document.createElement("canvas");
|
|
_canvasTmp.width = 256;
|
|
_canvasTmp.height = 1;
|
|
var _canvasTmpCtx = _canvasTmp.getContext("2d");
|
|
var _data = _canvasTmpCtx.createImageData(256, 1);
|
|
for (var i = 0; i < 256; i++) {
|
|
_data.data[4 * i + 3] = i;
|
|
}
|
|
_canvasTmpCtx.putImageData(_data, 0, 0);
|
|
oThis.Params = {
|
|
GradImage: _canvasTmp
|
|
};
|
|
}
|
|
var _ang = Math.atan(_hDst / _wDst);
|
|
var _sin = Math.sin(_ang);
|
|
var _cos = Math.cos(_ang);
|
|
var _hDstN2 = _wDst * _sin;
|
|
var _hDstN = 2 * _hDstN2;
|
|
var _wDstN = _wDst * _cos + _hDst * _sin;
|
|
var _e_off_x = _sin;
|
|
var _e_off_y = _cos;
|
|
var _gradW = (_koefWipeLen * _hDstN) >> 0;
|
|
var _cX = _xDst + _wDst / 2;
|
|
var _cY = _yDst + _hDst / 2;
|
|
var _cStartX = _cX + (_hDstN2 + _gradW / 2) * _e_off_x;
|
|
var _cStartY = _cY + (_hDstN2 + _gradW / 2) * _e_off_y;
|
|
var _cPosX = _cStartX - _e_off_x * _part * (_gradW + _hDstN);
|
|
var _cPosY = _cStartY - _e_off_y * _part * (_gradW + _hDstN);
|
|
_ctx2.save();
|
|
_ctx2.beginPath();
|
|
_ctx2.rect(_xDst, _yDst, _wDst, _hDst);
|
|
_ctx2.clip();
|
|
_ctx2.beginPath();
|
|
_ctx2.translate(_cPosX, _cPosY);
|
|
_ctx2.rotate(Math.PI / 2 - _ang);
|
|
_ctx2.fillStyle = "#000000";
|
|
_ctx2.fillRect(_hDstN2, -_wDstN / 2, _gradW, _wDstN);
|
|
_ctx2.beginPath();
|
|
_ctx2.drawImage(oThis.Params.GradImage, -_hDstN2, -_wDstN / 2, _hDstN, _wDstN);
|
|
_ctx2.restore();
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
_ctx2.globalCompositeOperation = "source-atop";
|
|
if (null != oThis.CacheImage2.Image) {
|
|
_ctx2.drawImage(oThis.CacheImage2.Image, _xDst, _yDst, _wDst, _hDst);
|
|
} else {
|
|
var _c = oThis.CacheImage2.Color;
|
|
_ctx2.fillStyle = "rgb(" + _c.r + "," + _c.g + "," + _c.b + ")";
|
|
_ctx2.fillRect(_xDst, _yDst, _wDst, _hDst);
|
|
_ctx2.beginPath();
|
|
}
|
|
_ctx2.globalCompositeOperation = "source-over";
|
|
oThis.TimerId = __nextFrame(oThis._startWipe);
|
|
};
|
|
this._startSplit = function () {
|
|
oThis.CurrentTime = new Date().getTime();
|
|
if (oThis.CurrentTime >= oThis.EndTime) {
|
|
oThis.End(false);
|
|
return;
|
|
}
|
|
var _xDst = oThis.Rect.x;
|
|
var _yDst = oThis.Rect.y;
|
|
var _wDst = oThis.Rect.w;
|
|
var _hDst = oThis.Rect.h;
|
|
var _part = (oThis.CurrentTime - oThis.StartTime) / oThis.Duration;
|
|
if (oThis.IsBackward) {
|
|
_part = 1 - _part;
|
|
}
|
|
var _ctx2 = null;
|
|
if (oThis.DemonstrationObject == null) {
|
|
oThis.HtmlPage.m_oOverlayApi.Clear();
|
|
oThis.HtmlPage.m_oOverlayApi.CheckRect(_xDst, _yDst, _wDst, _hDst);
|
|
_ctx2 = oThis.HtmlPage.m_oOverlayApi.m_oContext;
|
|
_ctx2.setTransform(1, 0, 0, 1, 0, 0);
|
|
} else {
|
|
_ctx2 = oThis.DemonstrationObject.Overlay.getContext("2d");
|
|
_ctx2.clearRect(_xDst, _yDst, _wDst, _hDst);
|
|
}
|
|
if (oThis.TimerId === null) {
|
|
var _ctx1 = null;
|
|
if (null == oThis.DemonstrationObject) {
|
|
_ctx1 = oThis.HtmlPage.m_oEditor.HtmlElement.getContext("2d");
|
|
_ctx1.fillStyle = "#B0B0B0";
|
|
_ctx1.fillRect(0, 0, oThis.HtmlPage.m_oEditor.HtmlElement.width, oThis.HtmlPage.m_oEditor.HtmlElement.height);
|
|
} else {
|
|
_ctx1 = oThis.DemonstrationObject.Canvas.getContext("2d");
|
|
_ctx1.fillStyle = "#000000";
|
|
_ctx1.fillRect(0, 0, oThis.DemonstrationObject.Canvas.width, oThis.DemonstrationObject.Canvas.height);
|
|
}
|
|
if (null != oThis.CacheImage1.Image) {
|
|
_ctx1.drawImage(oThis.CacheImage1.Image, oThis.Rect.x, oThis.Rect.y, oThis.Rect.w, oThis.Rect.h);
|
|
} else {
|
|
var _c = oThis.CacheImage1.Color;
|
|
_ctx1.fillStyle = "rgb(" + _c.r + "," + _c.g + "," + _c.b + ")";
|
|
_ctx1.fillRect(oThis.Rect.x, oThis.Rect.y, oThis.Rect.w, oThis.Rect.h);
|
|
_ctx1.beginPath();
|
|
}
|
|
}
|
|
var _koefWipeLen = 1;
|
|
switch (oThis.Param) {
|
|
case c_oAscSlideTransitionParams.Split_VerticalOut:
|
|
if (oThis.TimerId === null) {
|
|
var _canvasTmp = document.createElement("canvas");
|
|
var __w = 256 + 255;
|
|
_canvasTmp.width = __w;
|
|
_canvasTmp.height = 1;
|
|
var _canvasTmpCtx = _canvasTmp.getContext("2d");
|
|
var _data = _canvasTmpCtx.createImageData(_canvasTmp.width, 1);
|
|
for (var i = 0; i < 256; i++) {
|
|
_data.data[4 * i + 3] = i;
|
|
}
|
|
for (var i = 256; i < __w; i++) {
|
|
_data.data[4 * i + 3] = __w - i - 1;
|
|
}
|
|
_canvasTmpCtx.putImageData(_data, 0, 0);
|
|
oThis.Params = {
|
|
GradImage: _canvasTmp
|
|
};
|
|
}
|
|
var _cX = _xDst + _wDst / 2;
|
|
if (_part <= 0.5) {
|
|
var _w = (_part * 2 * _wDst) >> 0;
|
|
var _w2 = _w >> 1;
|
|
if (_w > 0 && _w2 > 0) {
|
|
_ctx2.beginPath();
|
|
_ctx2.fillStyle = "#000000";
|
|
_ctx2.fillRect(Math.max(_xDst, _cX - _w2 / 2 - 1), _yDst, Math.min(_w2 + 2, _wDst), _hDst);
|
|
_ctx2.beginPath();
|
|
var _w4 = _w2 >> 1;
|
|
var _x = _cX - _w2;
|
|
var _r = _cX + _w4;
|
|
_ctx2.drawImage(oThis.Params.GradImage, 0, 0, 255, 1, _x, _yDst, _w4, _hDst);
|
|
_ctx2.drawImage(oThis.Params.GradImage, 255, 0, 255, 1, _r, _yDst, _w4, _hDst);
|
|
}
|
|
} else {
|
|
var _w = (_part * _wDst) >> 0;
|
|
var _w2 = _w >> 1;
|
|
_ctx2.beginPath();
|
|
_ctx2.fillStyle = "#000000";
|
|
_ctx2.fillRect(Math.max(_xDst, _cX - _w2 - 1), _yDst, Math.min(_w + 2, _wDst), _hDst);
|
|
_ctx2.beginPath();
|
|
var _gradWW = (_wDst - _w) >> 1;
|
|
var _gradW = (_wDst / 4) >> 0;
|
|
var _srcOff = 256 * _gradWW / _gradW;
|
|
if (_gradWW > 0) {
|
|
_ctx2.drawImage(oThis.Params.GradImage, 0, 0, 255, 1, _xDst, _yDst, _gradWW, _hDst);
|
|
_ctx2.drawImage(oThis.Params.GradImage, 255, 0, 255, 1, _cX + _w2, _yDst, _gradWW, _hDst);
|
|
}
|
|
}
|
|
break;
|
|
case c_oAscSlideTransitionParams.Split_VerticalIn:
|
|
if (oThis.TimerId === null) {
|
|
var _canvasTmp = document.createElement("canvas");
|
|
var __w = 256 + 255;
|
|
_canvasTmp.width = __w;
|
|
_canvasTmp.height = 1;
|
|
var _canvasTmpCtx = _canvasTmp.getContext("2d");
|
|
var _data = _canvasTmpCtx.createImageData(_canvasTmp.width, 1);
|
|
for (var i = 0; i < 256; i++) {
|
|
_data.data[4 * i + 3] = i;
|
|
}
|
|
for (var i = 256; i < __w; i++) {
|
|
_data.data[4 * i + 3] = __w - i - 1;
|
|
}
|
|
_canvasTmpCtx.putImageData(_data, 0, 0);
|
|
oThis.Params = {
|
|
GradImage: _canvasTmp
|
|
};
|
|
}
|
|
var _cX = _xDst + _wDst / 2;
|
|
if (_part <= 0.5) {
|
|
var _w = (_part * 2 * _wDst) >> 0;
|
|
var _w2 = _w >> 1;
|
|
var _w4 = _w2 >> 1;
|
|
if (_w4 > 0) {
|
|
_ctx2.beginPath();
|
|
_ctx2.fillStyle = "#000000";
|
|
_ctx2.fillRect(_xDst, _yDst, _w4 + 1, _hDst);
|
|
_ctx2.beginPath();
|
|
_ctx2.fillRect(_xDst + _wDst - _w4 - 1, _yDst, _w4 + 1, _hDst);
|
|
_ctx2.beginPath();
|
|
var _x = _xDst + _w4;
|
|
var _r = _xDst + _wDst - _w2;
|
|
_ctx2.drawImage(oThis.Params.GradImage, 255, 0, 255, 1, _x, _yDst, _w4, _hDst);
|
|
_ctx2.drawImage(oThis.Params.GradImage, 0, 0, 255, 1, _r, _yDst, _w4, _hDst);
|
|
}
|
|
} else {
|
|
var _w = (_part * _wDst) >> 0;
|
|
var _w2 = _w >> 1;
|
|
_ctx2.beginPath();
|
|
_ctx2.fillStyle = "#000000";
|
|
_ctx2.fillRect(_xDst, _yDst, _w2 + 1, _hDst);
|
|
_ctx2.beginPath();
|
|
_ctx2.fillRect(_xDst + _wDst - _w2 - 1, _yDst, _w2 + 1, _hDst);
|
|
_ctx2.beginPath();
|
|
var _gradWW = (_wDst - _w) >> 1;
|
|
var _gradW = (_wDst / 4) >> 0;
|
|
var _srcOff = 256 * _gradWW / _gradW;
|
|
if (_gradWW > 0) {
|
|
_ctx2.drawImage(oThis.Params.GradImage, 255, 0, 255, 1, _xDst + _w2, _yDst, _gradWW, _hDst);
|
|
_ctx2.drawImage(oThis.Params.GradImage, 0, 0, 255, 1, _cX, _yDst, _gradWW, _hDst);
|
|
}
|
|
}
|
|
break;
|
|
case c_oAscSlideTransitionParams.Split_HorizontalOut:
|
|
if (oThis.TimerId === null) {
|
|
var _canvasTmp = document.createElement("canvas");
|
|
var __w = 256 + 255;
|
|
_canvasTmp.width = 1;
|
|
_canvasTmp.height = __w;
|
|
var _canvasTmpCtx = _canvasTmp.getContext("2d");
|
|
var _data = _canvasTmpCtx.createImageData(1, __w);
|
|
for (var i = 0; i < 256; i++) {
|
|
_data.data[4 * i + 3] = i;
|
|
}
|
|
for (var i = 256; i < __w; i++) {
|
|
_data.data[4 * i + 3] = __w - i - 1;
|
|
}
|
|
_canvasTmpCtx.putImageData(_data, 0, 0);
|
|
oThis.Params = {
|
|
GradImage: _canvasTmp
|
|
};
|
|
}
|
|
var _cY = _yDst + _hDst / 2;
|
|
if (_part <= 0.5) {
|
|
var _h = (_part * 2 * _hDst) >> 0;
|
|
var _h2 = _h >> 1;
|
|
if (_h > 0 && _h2 > 0) {
|
|
_ctx2.beginPath();
|
|
_ctx2.fillStyle = "#000000";
|
|
_ctx2.fillRect(_xDst, Math.max(_cY - _h2 / 2 - 1), _wDst, Math.min(_h2 + 2, _hDst));
|
|
_ctx2.beginPath();
|
|
var _h4 = _h2 >> 1;
|
|
var _y = _cY - _h2;
|
|
var _b = _cY + _h4;
|
|
_ctx2.drawImage(oThis.Params.GradImage, 0, 0, 1, 255, _xDst, _y, _wDst, _h4);
|
|
_ctx2.drawImage(oThis.Params.GradImage, 0, 255, 1, 255, _xDst, _b, _wDst, _h4);
|
|
}
|
|
} else {
|
|
var _h = (_part * _hDst) >> 0;
|
|
var _h2 = _h >> 1;
|
|
_ctx2.beginPath();
|
|
_ctx2.fillStyle = "#000000";
|
|
_ctx2.fillRect(_xDst, Math.max(_yDst, _cY - _h2 - 1), _wDst, Math.min(_h + 2, _hDst));
|
|
_ctx2.beginPath();
|
|
var _gradHH = (_hDst - _h) >> 1;
|
|
var _gradH = (_hDst / 4) >> 0;
|
|
if (_gradHH > 0) {
|
|
_ctx2.drawImage(oThis.Params.GradImage, 0, 0, 1, 255, _xDst, _yDst, _wDst, _gradHH);
|
|
_ctx2.drawImage(oThis.Params.GradImage, 0, 255, 1, 255, _xDst, _cY + _h2, _wDst, _gradHH);
|
|
}
|
|
}
|
|
break;
|
|
case c_oAscSlideTransitionParams.Split_HorizontalIn:
|
|
if (oThis.TimerId === null) {
|
|
var _canvasTmp = document.createElement("canvas");
|
|
var __w = 256 + 255;
|
|
_canvasTmp.width = 1;
|
|
_canvasTmp.height = __w;
|
|
var _canvasTmpCtx = _canvasTmp.getContext("2d");
|
|
var _data = _canvasTmpCtx.createImageData(1, __w);
|
|
for (var i = 0; i < 256; i++) {
|
|
_data.data[4 * i + 3] = i;
|
|
}
|
|
for (var i = 256; i < __w; i++) {
|
|
_data.data[4 * i + 3] = __w - i - 1;
|
|
}
|
|
_canvasTmpCtx.putImageData(_data, 0, 0);
|
|
oThis.Params = {
|
|
GradImage: _canvasTmp
|
|
};
|
|
}
|
|
var _cY = _yDst + _hDst / 2;
|
|
if (_part <= 0.5) {
|
|
var _h = (_part * 2 * _hDst) >> 0;
|
|
var _h2 = _h >> 1;
|
|
var _h4 = _h2 >> 1;
|
|
if (_h4 > 0) {
|
|
_ctx2.beginPath();
|
|
_ctx2.fillStyle = "#000000";
|
|
_ctx2.fillRect(_xDst, _yDst, _wDst, _h4 + 1);
|
|
_ctx2.beginPath();
|
|
_ctx2.fillRect(_xDst, _yDst + _hDst - _h4 - 1, _wDst, _h4 + 1);
|
|
_ctx2.beginPath();
|
|
var _y = _yDst + _h4;
|
|
var _b = _yDst + _hDst - _h2;
|
|
_ctx2.drawImage(oThis.Params.GradImage, 0, 255, 1, 255, _xDst, _y, _wDst, _h4);
|
|
_ctx2.drawImage(oThis.Params.GradImage, 0, 0, 1, 255, _xDst, _b, _wDst, _h4);
|
|
}
|
|
} else {
|
|
var _h = (_part * _hDst) >> 0;
|
|
var _h2 = _h >> 1;
|
|
_ctx2.beginPath();
|
|
_ctx2.fillStyle = "#000000";
|
|
_ctx2.fillRect(_xDst, _yDst, _wDst, _h2 + 1);
|
|
_ctx2.beginPath();
|
|
_ctx2.fillRect(_xDst, _yDst + _hDst - _h2 - 1, _wDst, _h2 + 1);
|
|
_ctx2.beginPath();
|
|
var _gradHH = (_hDst - _h) >> 1;
|
|
var _gradH = (_hDst / 4) >> 0;
|
|
if (_gradHH > 0) {
|
|
_ctx2.drawImage(oThis.Params.GradImage, 0, 255, 1, 255, _xDst, _yDst + _h2, _wDst, _gradHH);
|
|
_ctx2.drawImage(oThis.Params.GradImage, 0, 0, 1, 255, _xDst, _cY, _wDst, _gradHH);
|
|
}
|
|
}
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
_ctx2.globalCompositeOperation = "source-atop";
|
|
if (null != oThis.CacheImage2.Image) {
|
|
_ctx2.drawImage(oThis.CacheImage2.Image, _xDst, _yDst, _wDst, _hDst);
|
|
} else {
|
|
var _c = oThis.CacheImage2.Color;
|
|
_ctx2.fillStyle = "rgb(" + _c.r + "," + _c.g + "," + _c.b + ")";
|
|
_ctx2.fillRect(_xDst, _yDst, _wDst, _hDst);
|
|
_ctx2.beginPath();
|
|
}
|
|
_ctx2.globalCompositeOperation = "source-over";
|
|
oThis.TimerId = __nextFrame(oThis._startSplit);
|
|
};
|
|
this._startUnCover = function () {
|
|
oThis.CurrentTime = new Date().getTime();
|
|
if (oThis.CurrentTime >= oThis.EndTime) {
|
|
oThis.End(false);
|
|
return;
|
|
}
|
|
if (oThis.TimerId === null) {
|
|
var _ctx1 = null;
|
|
if (null == oThis.DemonstrationObject) {
|
|
_ctx1 = oThis.HtmlPage.m_oEditor.HtmlElement.getContext("2d");
|
|
_ctx1.fillStyle = "#B0B0B0";
|
|
_ctx1.fillRect(0, 0, oThis.HtmlPage.m_oEditor.HtmlElement.width, oThis.HtmlPage.m_oEditor.HtmlElement.height);
|
|
} else {
|
|
_ctx1 = oThis.DemonstrationObject.Canvas.getContext("2d");
|
|
_ctx1.fillStyle = "#000000";
|
|
_ctx1.fillRect(0, 0, oThis.DemonstrationObject.Canvas.width, oThis.DemonstrationObject.Canvas.height);
|
|
}
|
|
if (null != oThis.CacheImage2.Image) {
|
|
_ctx1.drawImage(oThis.CacheImage2.Image, oThis.Rect.x, oThis.Rect.y, oThis.Rect.w, oThis.Rect.h);
|
|
} else {
|
|
var _c = oThis.CacheImage2.Color;
|
|
_ctx1.fillStyle = "rgb(" + _c.r + "," + _c.g + "," + _c.b + ")";
|
|
_ctx1.fillRect(oThis.Rect.x, oThis.Rect.y, oThis.Rect.w, oThis.Rect.h);
|
|
_ctx1.beginPath();
|
|
}
|
|
}
|
|
var _xDst = oThis.Rect.x;
|
|
var _yDst = oThis.Rect.y;
|
|
var _wDst = oThis.Rect.w;
|
|
var _hDst = oThis.Rect.h;
|
|
var _xSrc = 0;
|
|
var _ySrc = 0;
|
|
var _part = (oThis.CurrentTime - oThis.StartTime) / oThis.Duration;
|
|
if (oThis.IsBackward) {
|
|
_part = 1 - _part;
|
|
}
|
|
var _offX = (_wDst * _part) >> 0;
|
|
var _offY = (_hDst * _part) >> 0;
|
|
switch (oThis.Param) {
|
|
case c_oAscSlideTransitionParams.Param_Left:
|
|
_xDst += _offX;
|
|
_wDst -= _offX;
|
|
break;
|
|
case c_oAscSlideTransitionParams.Param_Right:
|
|
_xSrc = _offX;
|
|
_wDst -= _offX;
|
|
break;
|
|
case c_oAscSlideTransitionParams.Param_Top:
|
|
_yDst += _offY;
|
|
_hDst -= _offY;
|
|
break;
|
|
case c_oAscSlideTransitionParams.Param_Bottom:
|
|
_ySrc = _offY;
|
|
_hDst -= _offY;
|
|
break;
|
|
case c_oAscSlideTransitionParams.Param_TopLeft:
|
|
_xDst += _offX;
|
|
_yDst += _offY;
|
|
_wDst -= _offX;
|
|
_hDst -= _offY;
|
|
break;
|
|
case c_oAscSlideTransitionParams.Param_TopRight:
|
|
_xSrc = _offX;
|
|
_yDst += _offY;
|
|
_wDst -= _offX;
|
|
_hDst -= _offY;
|
|
break;
|
|
case c_oAscSlideTransitionParams.Param_BottomLeft:
|
|
_xDst += _offX;
|
|
_ySrc = _offY;
|
|
_wDst -= _offX;
|
|
_hDst -= _offY;
|
|
break;
|
|
case c_oAscSlideTransitionParams.Param_BottomRight:
|
|
_xSrc = _offX;
|
|
_ySrc = _offY;
|
|
_wDst -= _offX;
|
|
_hDst -= _offY;
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
var _ctx2 = null;
|
|
if (oThis.DemonstrationObject == null) {
|
|
oThis.HtmlPage.m_oOverlayApi.Clear();
|
|
oThis.HtmlPage.m_oOverlayApi.CheckRect(oThis.Rect.x, oThis.Rect.y, oThis.Rect.w, oThis.Rect.h);
|
|
_ctx2 = oThis.HtmlPage.m_oOverlayApi.m_oContext;
|
|
} else {
|
|
_ctx2 = oThis.DemonstrationObject.Overlay.getContext("2d");
|
|
_ctx2.clearRect(oThis.Rect.x, oThis.Rect.y, oThis.Rect.w, oThis.Rect.h);
|
|
}
|
|
if (_wDst > 0 && _hDst > 0) {
|
|
if (null != oThis.CacheImage1.Image) {
|
|
_ctx2.drawImage(oThis.CacheImage1.Image, _xSrc, _ySrc, _wDst, _hDst, _xDst, _yDst, _wDst, _hDst);
|
|
} else {
|
|
var _c = oThis.CacheImage1.Color;
|
|
_ctx2.fillStyle = "rgb(" + _c.r + "," + _c.g + "," + _c.b + ")";
|
|
_ctx2.fillRect(_xDst, _yDst, _wDst, _hDst);
|
|
_ctx2.beginPath();
|
|
}
|
|
}
|
|
oThis.TimerId = __nextFrame(oThis._startUnCover);
|
|
};
|
|
this._startCover = function () {
|
|
oThis.CurrentTime = new Date().getTime();
|
|
if (oThis.CurrentTime >= oThis.EndTime) {
|
|
oThis.End(false);
|
|
return;
|
|
}
|
|
if (oThis.TimerId === null) {
|
|
var _ctx1 = null;
|
|
if (null == oThis.DemonstrationObject) {
|
|
_ctx1 = oThis.HtmlPage.m_oEditor.HtmlElement.getContext("2d");
|
|
_ctx1.fillStyle = "#B0B0B0";
|
|
_ctx1.fillRect(0, 0, oThis.HtmlPage.m_oEditor.HtmlElement.width, oThis.HtmlPage.m_oEditor.HtmlElement.height);
|
|
} else {
|
|
_ctx1 = oThis.DemonstrationObject.Canvas.getContext("2d");
|
|
_ctx1.fillStyle = "#000000";
|
|
_ctx1.fillRect(0, 0, oThis.DemonstrationObject.Canvas.width, oThis.DemonstrationObject.Canvas.height);
|
|
}
|
|
if (null != oThis.CacheImage1.Image) {
|
|
_ctx1.drawImage(oThis.CacheImage1.Image, oThis.Rect.x, oThis.Rect.y, oThis.Rect.w, oThis.Rect.h);
|
|
} else {
|
|
var _c = oThis.CacheImage1.Color;
|
|
_ctx1.fillStyle = "rgb(" + _c.r + "," + _c.g + "," + _c.b + ")";
|
|
_ctx1.fillRect(oThis.Rect.x, oThis.Rect.y, oThis.Rect.w, oThis.Rect.h);
|
|
_ctx1.beginPath();
|
|
}
|
|
}
|
|
var _xDst = oThis.Rect.x;
|
|
var _yDst = oThis.Rect.y;
|
|
var _wDst = oThis.Rect.w;
|
|
var _hDst = oThis.Rect.h;
|
|
var _xSrc = 0;
|
|
var _ySrc = 0;
|
|
var _part = (oThis.CurrentTime - oThis.StartTime) / oThis.Duration;
|
|
if (oThis.IsBackward) {
|
|
_part = 1 - _part;
|
|
}
|
|
var _offX = (_wDst * (1 - _part)) >> 0;
|
|
var _offY = (_hDst * (1 - _part)) >> 0;
|
|
switch (oThis.Param) {
|
|
case c_oAscSlideTransitionParams.Param_Left:
|
|
_xSrc = _offX;
|
|
_wDst -= _offX;
|
|
break;
|
|
case c_oAscSlideTransitionParams.Param_Right:
|
|
_xDst += _offX;
|
|
_wDst -= _offX;
|
|
break;
|
|
case c_oAscSlideTransitionParams.Param_Top:
|
|
_ySrc = _offY;
|
|
_hDst -= _offY;
|
|
break;
|
|
case c_oAscSlideTransitionParams.Param_Bottom:
|
|
_yDst += _offY;
|
|
_hDst -= _offY;
|
|
break;
|
|
case c_oAscSlideTransitionParams.Param_TopLeft:
|
|
_xSrc = _offX;
|
|
_ySrc = _offY;
|
|
_wDst -= _offX;
|
|
_hDst -= _offY;
|
|
break;
|
|
case c_oAscSlideTransitionParams.Param_TopRight:
|
|
_xDst += _offX;
|
|
_ySrc = _offY;
|
|
_wDst -= _offX;
|
|
_hDst -= _offY;
|
|
break;
|
|
case c_oAscSlideTransitionParams.Param_BottomLeft:
|
|
_xSrc = _offX;
|
|
_yDst += _offY;
|
|
_wDst -= _offX;
|
|
_hDst -= _offY;
|
|
break;
|
|
case c_oAscSlideTransitionParams.Param_BottomRight:
|
|
_xDst += _offX;
|
|
_yDst += _offY;
|
|
_wDst -= _offX;
|
|
_hDst -= _offY;
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
var _ctx2 = null;
|
|
if (oThis.DemonstrationObject == null) {
|
|
oThis.HtmlPage.m_oOverlayApi.Clear();
|
|
oThis.HtmlPage.m_oOverlayApi.CheckRect(oThis.Rect.x, oThis.Rect.y, oThis.Rect.w, oThis.Rect.h);
|
|
_ctx2 = oThis.HtmlPage.m_oOverlayApi.m_oContext;
|
|
} else {
|
|
_ctx2 = oThis.DemonstrationObject.Overlay.getContext("2d");
|
|
_ctx2.clearRect(oThis.Rect.x, oThis.Rect.y, oThis.Rect.w, oThis.Rect.h);
|
|
}
|
|
if (_wDst > 0 && _hDst > 0) {
|
|
if (null != oThis.CacheImage2.Image) {
|
|
_ctx2.drawImage(oThis.CacheImage2.Image, _xSrc, _ySrc, _wDst, _hDst, _xDst, _yDst, _wDst, _hDst);
|
|
} else {
|
|
var _c = oThis.CacheImage2.Color;
|
|
_ctx2.fillStyle = "rgb(" + _c.r + "," + _c.g + "," + _c.b + ")";
|
|
_ctx2.fillRect(_xDst, _yDst, _wDst, _hDst);
|
|
_ctx2.beginPath();
|
|
}
|
|
}
|
|
oThis.TimerId = __nextFrame(oThis._startCover);
|
|
};
|
|
this._startClock = function () {
|
|
oThis.CurrentTime = new Date().getTime();
|
|
if (oThis.CurrentTime >= oThis.EndTime) {
|
|
oThis.End(false);
|
|
return;
|
|
}
|
|
if (oThis.TimerId === null) {
|
|
var _ctx1 = null;
|
|
if (null == oThis.DemonstrationObject) {
|
|
_ctx1 = oThis.HtmlPage.m_oEditor.HtmlElement.getContext("2d");
|
|
_ctx1.fillStyle = "#B0B0B0";
|
|
_ctx1.fillRect(0, 0, oThis.HtmlPage.m_oEditor.HtmlElement.width, oThis.HtmlPage.m_oEditor.HtmlElement.height);
|
|
} else {
|
|
_ctx1 = oThis.DemonstrationObject.Canvas.getContext("2d");
|
|
_ctx1.fillStyle = "#000000";
|
|
_ctx1.fillRect(0, 0, oThis.DemonstrationObject.Canvas.width, oThis.DemonstrationObject.Canvas.height);
|
|
}
|
|
if (null != oThis.CacheImage1.Image) {
|
|
_ctx1.drawImage(oThis.CacheImage1.Image, oThis.Rect.x, oThis.Rect.y, oThis.Rect.w, oThis.Rect.h);
|
|
} else {
|
|
var _c = oThis.CacheImage1.Color;
|
|
_ctx1.fillStyle = "rgb(" + _c.r + "," + _c.g + "," + _c.b + ")";
|
|
_ctx1.fillRect(oThis.Rect.x, oThis.Rect.y, oThis.Rect.w, oThis.Rect.h);
|
|
_ctx1.beginPath();
|
|
}
|
|
}
|
|
var _xDst = oThis.Rect.x;
|
|
var _yDst = oThis.Rect.y;
|
|
var _wDst = oThis.Rect.w;
|
|
var _hDst = oThis.Rect.h;
|
|
var _part = (oThis.CurrentTime - oThis.StartTime) / oThis.Duration;
|
|
if (oThis.IsBackward) {
|
|
_part = 1 - _part;
|
|
}
|
|
var _anglePart1 = Math.atan(_wDst / _hDst);
|
|
var _anglePart2 = Math.PI / 2 - _anglePart1;
|
|
var _offset = 0;
|
|
var _ctx2 = null;
|
|
if (oThis.DemonstrationObject == null) {
|
|
oThis.HtmlPage.m_oOverlayApi.Clear();
|
|
oThis.HtmlPage.m_oOverlayApi.CheckRect(oThis.Rect.x, oThis.Rect.y, oThis.Rect.w, oThis.Rect.h);
|
|
_ctx2 = oThis.HtmlPage.m_oOverlayApi.m_oContext;
|
|
} else {
|
|
_ctx2 = oThis.DemonstrationObject.Overlay.getContext("2d");
|
|
_ctx2.clearRect(oThis.Rect.x, oThis.Rect.y, oThis.Rect.w, oThis.Rect.h);
|
|
}
|
|
_ctx2.save();
|
|
_ctx2.beginPath();
|
|
var _cX = _xDst + _wDst / 2;
|
|
var _cY = _yDst + _hDst / 2;
|
|
switch (oThis.Param) {
|
|
case c_oAscSlideTransitionParams.Clock_Clockwise:
|
|
var _angle = 2 * Math.PI * _part;
|
|
var _x = 0;
|
|
var _y = 0;
|
|
var _mainPart = (2 * _angle / Math.PI) >> 0;
|
|
var _nomainPart = _angle - (_mainPart * Math.PI / 2);
|
|
switch (_mainPart) {
|
|
case 0:
|
|
if (_nomainPart > _anglePart1) {
|
|
_offset = _wDst * Math.tan((Math.PI / 2) - _nomainPart) / 2;
|
|
_x = _xDst + _wDst;
|
|
_y = _cY - _offset;
|
|
_ctx2.moveTo(_cX, _cY);
|
|
_ctx2.lineTo(_cX, _yDst);
|
|
_ctx2.lineTo(_x, _yDst);
|
|
_ctx2.lineTo(_x, _y);
|
|
_ctx2.closePath();
|
|
} else {
|
|
_offset = _hDst * Math.tan(_nomainPart) / 2;
|
|
_x = _cX + _offset;
|
|
_y = _yDst;
|
|
_ctx2.moveTo(_cX, _cY);
|
|
_ctx2.lineTo(_cX, _yDst);
|
|
_ctx2.lineTo(_x, _y);
|
|
_ctx2.closePath();
|
|
}
|
|
break;
|
|
case 1:
|
|
if (_nomainPart > _anglePart2) {
|
|
_offset = _hDst * Math.tan((Math.PI / 2) - _nomainPart) / 2;
|
|
_x = _cX + _offset;
|
|
_y = _yDst + _hDst;
|
|
_ctx2.moveTo(_cX, _cY);
|
|
_ctx2.lineTo(_cX, _yDst);
|
|
_ctx2.lineTo(_xDst + _wDst, _yDst);
|
|
_ctx2.lineTo(_xDst + _wDst, _yDst + _hDst);
|
|
_ctx2.lineTo(_x, _y);
|
|
_ctx2.closePath();
|
|
} else {
|
|
_offset = _wDst * Math.tan(_nomainPart) / 2;
|
|
_x = _xDst + _wDst;
|
|
_y = _cY + _offset;
|
|
_ctx2.moveTo(_cX, _cY);
|
|
_ctx2.lineTo(_cX, _yDst);
|
|
_ctx2.lineTo(_x, _yDst);
|
|
_ctx2.lineTo(_x, _y);
|
|
_ctx2.closePath();
|
|
}
|
|
break;
|
|
case 2:
|
|
if (_nomainPart > _anglePart1) {
|
|
_offset = _wDst * Math.tan((Math.PI / 2) - _nomainPart) / 2;
|
|
_x = _xDst;
|
|
_y = _cY + _offset;
|
|
_ctx2.moveTo(_cX, _cY);
|
|
_ctx2.lineTo(_cX, _yDst);
|
|
_ctx2.lineTo(_xDst + _wDst, _yDst);
|
|
_ctx2.lineTo(_xDst + _wDst, _yDst + _hDst);
|
|
_ctx2.lineTo(_xDst, _yDst + _hDst);
|
|
_ctx2.lineTo(_x, _y);
|
|
_ctx2.closePath();
|
|
} else {
|
|
_offset = _hDst * Math.tan(_nomainPart) / 2;
|
|
_x = _cX - _offset;
|
|
_y = _yDst + _hDst;
|
|
_ctx2.moveTo(_cX, _cY);
|
|
_ctx2.lineTo(_cX, _yDst);
|
|
_ctx2.lineTo(_xDst + _wDst, _yDst);
|
|
_ctx2.lineTo(_xDst + _wDst, _yDst + _hDst);
|
|
_ctx2.lineTo(_x, _y);
|
|
_ctx2.closePath();
|
|
}
|
|
break;
|
|
case 3:
|
|
if (_nomainPart > _anglePart2) {
|
|
_offset = _hDst * Math.tan((Math.PI / 2) - _nomainPart) / 2;
|
|
_x = _cX - _offset;
|
|
_y = _yDst;
|
|
_ctx2.moveTo(_cX, _cY);
|
|
_ctx2.lineTo(_cX, _yDst);
|
|
_ctx2.lineTo(_xDst + _wDst, _yDst);
|
|
_ctx2.lineTo(_xDst + _wDst, _yDst + _hDst);
|
|
_ctx2.lineTo(_xDst, _yDst + _hDst);
|
|
_ctx2.lineTo(_xDst, _yDst);
|
|
_ctx2.lineTo(_x, _y);
|
|
_ctx2.closePath();
|
|
} else {
|
|
_offset = _wDst * Math.tan(_nomainPart) / 2;
|
|
_x = _xDst;
|
|
_y = _cY - _offset;
|
|
_ctx2.moveTo(_cX, _cY);
|
|
_ctx2.lineTo(_cX, _yDst);
|
|
_ctx2.lineTo(_xDst + _wDst, _yDst);
|
|
_ctx2.lineTo(_xDst + _wDst, _yDst + _hDst);
|
|
_ctx2.lineTo(_xDst, _yDst + _hDst);
|
|
_ctx2.lineTo(_x, _y);
|
|
_ctx2.closePath();
|
|
}
|
|
break;
|
|
}
|
|
break;
|
|
case c_oAscSlideTransitionParams.Clock_Counterclockwise:
|
|
var _angle = 2 * Math.PI * _part;
|
|
var _x = 0;
|
|
var _y = 0;
|
|
var _mainPart = (2 * _angle / Math.PI) >> 0;
|
|
var _nomainPart = _angle - (_mainPart * Math.PI / 2);
|
|
switch (_mainPart) {
|
|
case 0:
|
|
if (_nomainPart > _anglePart1) {
|
|
_offset = _wDst * Math.tan((Math.PI / 2) - _nomainPart) / 2;
|
|
_x = _xDst;
|
|
_y = _cY - _offset;
|
|
_ctx2.moveTo(_cX, _cY);
|
|
_ctx2.lineTo(_cX, _yDst);
|
|
_ctx2.lineTo(_x, _yDst);
|
|
_ctx2.lineTo(_x, _y);
|
|
_ctx2.closePath();
|
|
} else {
|
|
_offset = _hDst * Math.tan(_nomainPart) / 2;
|
|
_x = _cX - _offset;
|
|
_y = _yDst;
|
|
_ctx2.moveTo(_cX, _cY);
|
|
_ctx2.lineTo(_cX, _yDst);
|
|
_ctx2.lineTo(_x, _y);
|
|
_ctx2.closePath();
|
|
}
|
|
break;
|
|
case 1:
|
|
if (_nomainPart > _anglePart2) {
|
|
_offset = _hDst * Math.tan((Math.PI / 2) - _nomainPart) / 2;
|
|
_x = _cX - _offset;
|
|
_y = _yDst + _hDst;
|
|
_ctx2.moveTo(_cX, _cY);
|
|
_ctx2.lineTo(_cX, _yDst);
|
|
_ctx2.lineTo(_xDst, _yDst);
|
|
_ctx2.lineTo(_xDst, _yDst + _hDst);
|
|
_ctx2.lineTo(_x, _y);
|
|
_ctx2.closePath();
|
|
} else {
|
|
_offset = _wDst * Math.tan(_nomainPart) / 2;
|
|
_x = _xDst;
|
|
_y = _cY + _offset;
|
|
_ctx2.moveTo(_cX, _cY);
|
|
_ctx2.lineTo(_cX, _yDst);
|
|
_ctx2.lineTo(_x, _yDst);
|
|
_ctx2.lineTo(_x, _y);
|
|
_ctx2.closePath();
|
|
}
|
|
break;
|
|
case 2:
|
|
if (_nomainPart > _anglePart1) {
|
|
_offset = _wDst * Math.tan((Math.PI / 2) - _nomainPart) / 2;
|
|
_x = _xDst + _wDst;
|
|
_y = _cY + _offset;
|
|
_ctx2.moveTo(_cX, _cY);
|
|
_ctx2.lineTo(_cX, _yDst);
|
|
_ctx2.lineTo(_xDst, _yDst);
|
|
_ctx2.lineTo(_xDst, _yDst + _hDst);
|
|
_ctx2.lineTo(_xDst + _wDst, _yDst + _hDst);
|
|
_ctx2.lineTo(_x, _y);
|
|
_ctx2.closePath();
|
|
} else {
|
|
_offset = _hDst * Math.tan(_nomainPart) / 2;
|
|
_x = _cX + _offset;
|
|
_y = _yDst + _hDst;
|
|
_ctx2.moveTo(_cX, _cY);
|
|
_ctx2.lineTo(_cX, _yDst);
|
|
_ctx2.lineTo(_xDst, _yDst);
|
|
_ctx2.lineTo(_xDst, _yDst + _hDst);
|
|
_ctx2.lineTo(_x, _y);
|
|
_ctx2.closePath();
|
|
}
|
|
break;
|
|
case 3:
|
|
if (_nomainPart > _anglePart2) {
|
|
_offset = _hDst * Math.tan((Math.PI / 2) - _nomainPart) / 2;
|
|
_x = _cX + _offset;
|
|
_y = _yDst;
|
|
_ctx2.moveTo(_cX, _cY);
|
|
_ctx2.lineTo(_cX, _yDst);
|
|
_ctx2.lineTo(_xDst, _yDst);
|
|
_ctx2.lineTo(_xDst, _yDst + _hDst);
|
|
_ctx2.lineTo(_xDst + _wDst, _yDst + _hDst);
|
|
_ctx2.lineTo(_xDst + _wDst, _yDst);
|
|
_ctx2.lineTo(_x, _y);
|
|
_ctx2.closePath();
|
|
} else {
|
|
_offset = _wDst * Math.tan(_nomainPart) / 2;
|
|
_x = _xDst + _wDst;
|
|
_y = _cY - _offset;
|
|
_ctx2.moveTo(_cX, _cY);
|
|
_ctx2.lineTo(_cX, _yDst);
|
|
_ctx2.lineTo(_xDst, _yDst);
|
|
_ctx2.lineTo(_xDst, _yDst + _hDst);
|
|
_ctx2.lineTo(_xDst + _wDst, _yDst + _hDst);
|
|
_ctx2.lineTo(_x, _y);
|
|
_ctx2.closePath();
|
|
}
|
|
break;
|
|
}
|
|
break;
|
|
case c_oAscSlideTransitionParams.Clock_Wedge:
|
|
var _angle = Math.PI * _part;
|
|
var _x = 0;
|
|
var _y = 0;
|
|
var _mainPart = (2 * _angle / Math.PI) >> 0;
|
|
var _nomainPart = _angle - (_mainPart * Math.PI / 2);
|
|
switch (_mainPart) {
|
|
case 0:
|
|
if (_nomainPart > _anglePart1) {
|
|
_offset = _wDst * Math.tan((Math.PI / 2) - _nomainPart) / 2;
|
|
_ctx2.moveTo(_cX, _cY);
|
|
_ctx2.lineTo(_xDst, _cY - _offset);
|
|
_ctx2.lineTo(_xDst, _yDst);
|
|
_ctx2.lineTo(_xDst + _wDst, _yDst);
|
|
_ctx2.lineTo(_xDst + _wDst, _cY - _offset);
|
|
_ctx2.closePath();
|
|
} else {
|
|
_offset = _hDst * Math.tan(_nomainPart) / 2;
|
|
_ctx2.moveTo(_cX, _cY);
|
|
_ctx2.lineTo(_cX - _offset, _yDst);
|
|
_ctx2.lineTo(_cX + _offset, _yDst);
|
|
_ctx2.closePath();
|
|
}
|
|
break;
|
|
case 1:
|
|
if (_nomainPart > _anglePart2) {
|
|
_offset = _hDst * Math.tan((Math.PI / 2) - _nomainPart) / 2;
|
|
_ctx2.moveTo(_cX, _cY);
|
|
_ctx2.lineTo(_cX - _offset, _yDst + _hDst);
|
|
_ctx2.lineTo(_xDst, _yDst + _hDst);
|
|
_ctx2.lineTo(_xDst, _yDst);
|
|
_ctx2.lineTo(_xDst + _wDst, _yDst);
|
|
_ctx2.lineTo(_xDst + _wDst, _yDst + _hDst);
|
|
_ctx2.lineTo(_cX + _offset, _yDst + _hDst);
|
|
_ctx2.closePath();
|
|
} else {
|
|
_offset = _wDst * Math.tan(_nomainPart) / 2;
|
|
_ctx2.moveTo(_cX, _cY);
|
|
_ctx2.lineTo(_xDst, _cY + _offset);
|
|
_ctx2.lineTo(_xDst, _yDst);
|
|
_ctx2.lineTo(_xDst + _wDst, _yDst);
|
|
_ctx2.lineTo(_xDst + _wDst, _cY + _offset);
|
|
}
|
|
break;
|
|
}
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
_ctx2.clip();
|
|
if (_wDst > 0 && _hDst > 0) {
|
|
if (null != oThis.CacheImage2.Image) {
|
|
_ctx2.drawImage(oThis.CacheImage2.Image, _xDst, _yDst, _wDst, _hDst);
|
|
} else {
|
|
var _c = oThis.CacheImage2.Color;
|
|
_ctx2.fillStyle = "rgb(" + _c.r + "," + _c.g + "," + _c.b + ")";
|
|
_ctx2.fillRect(_xDst, _yDst, _wDst, _hDst);
|
|
_ctx2.beginPath();
|
|
}
|
|
}
|
|
_ctx2.restore();
|
|
oThis.TimerId = __nextFrame(oThis._startClock);
|
|
};
|
|
this._startZoom = function () {
|
|
oThis.CurrentTime = new Date().getTime();
|
|
if (oThis.CurrentTime >= oThis.EndTime) {
|
|
oThis.End(false);
|
|
return;
|
|
}
|
|
var _xDst = oThis.Rect.x;
|
|
var _yDst = oThis.Rect.y;
|
|
var _wDst = oThis.Rect.w;
|
|
var _hDst = oThis.Rect.h;
|
|
var _part = (oThis.CurrentTime - oThis.StartTime) / oThis.Duration;
|
|
if (oThis.IsBackward) {
|
|
_part = 1 - _part;
|
|
}
|
|
switch (oThis.Param) {
|
|
case c_oAscSlideTransitionParams.Zoom_In:
|
|
var _ctx1 = null;
|
|
if (null == oThis.DemonstrationObject) {
|
|
_ctx1 = oThis.HtmlPage.m_oEditor.HtmlElement.getContext("2d");
|
|
_ctx1.fillStyle = "#B0B0B0";
|
|
_ctx1.fillRect(0, 0, oThis.HtmlPage.m_oEditor.HtmlElement.width, oThis.HtmlPage.m_oEditor.HtmlElement.height);
|
|
} else {
|
|
_ctx1 = oThis.DemonstrationObject.Canvas.getContext("2d");
|
|
_ctx1.fillStyle = "#000000";
|
|
_ctx1.fillRect(0, 0, oThis.DemonstrationObject.Canvas.width, oThis.DemonstrationObject.Canvas.height);
|
|
}
|
|
var _w = ((0.5 * _wDst) * (1 + _part)) >> 0;
|
|
var _h = ((0.5 * _hDst) * (1 + _part)) >> 0;
|
|
var _x = (_wDst - _w) >> 1;
|
|
var _y = (_hDst - _h) >> 1;
|
|
var _x1 = (0.25 * _wDst - _x) >> 0;
|
|
var _y1 = (0.25 * _hDst - _y) >> 0;
|
|
var _w1 = _wDst - 2 * _x1;
|
|
var _h1 = _hDst - 2 * _y1;
|
|
if (_w > 0 && _h > 0) {
|
|
if (null != oThis.CacheImage2.Image) {
|
|
_ctx1.drawImage(oThis.CacheImage2.Image, _xDst + _x, _yDst + _y, _w, _h);
|
|
} else {
|
|
var _c = oThis.CacheImage2.Color;
|
|
_ctx1.fillStyle = "rgb(" + _c.r + "," + _c.g + "," + _c.b + ")";
|
|
_ctx1.fillRect(_xDst + _x, _yDst + _y, _w, _h);
|
|
_ctx1.beginPath();
|
|
}
|
|
}
|
|
_ctx1.globalAlpha = (1 - _part);
|
|
if (null != oThis.CacheImage1.Image) {
|
|
_ctx1.drawImage(oThis.CacheImage1.Image, _x1, _y1, _w1, _h1, _xDst, _yDst, _wDst, _hDst);
|
|
} else {
|
|
var _c = oThis.CacheImage1.Color;
|
|
_ctx1.fillStyle = "rgb(" + _c.r + "," + _c.g + "," + _c.b + ")";
|
|
_ctx1.fillRect(_xDst, _yDst, _wDst, _hDst);
|
|
_ctx1.beginPath();
|
|
}
|
|
_ctx1.globalAlpha = 1;
|
|
break;
|
|
case c_oAscSlideTransitionParams.Zoom_Out:
|
|
var _ctx1 = null;
|
|
if (null == oThis.DemonstrationObject) {
|
|
_ctx1 = oThis.HtmlPage.m_oEditor.HtmlElement.getContext("2d");
|
|
_ctx1.fillStyle = "#B0B0B0";
|
|
_ctx1.fillRect(0, 0, oThis.HtmlPage.m_oEditor.HtmlElement.width, oThis.HtmlPage.m_oEditor.HtmlElement.height);
|
|
} else {
|
|
_ctx1 = oThis.DemonstrationObject.Canvas.getContext("2d");
|
|
_ctx1.fillStyle = "#000000";
|
|
_ctx1.fillRect(0, 0, oThis.DemonstrationObject.Canvas.width, oThis.DemonstrationObject.Canvas.height);
|
|
}
|
|
_part = 1 - _part;
|
|
var _w = ((0.5 * _wDst) * (1 + _part)) >> 0;
|
|
var _h = ((0.5 * _hDst) * (1 + _part)) >> 0;
|
|
var _x = (_wDst - _w) >> 1;
|
|
var _y = (_hDst - _h) >> 1;
|
|
var _x1 = (0.25 * _wDst - _x) >> 0;
|
|
var _y1 = (0.25 * _hDst - _y) >> 0;
|
|
var _w1 = _wDst - 2 * _x1;
|
|
var _h1 = _hDst - 2 * _y1;
|
|
if (_w > 0 && _h > 0) {
|
|
if (null != oThis.CacheImage1.Image) {
|
|
_ctx1.drawImage(oThis.CacheImage1.Image, _xDst + _x, _yDst + _y, _w, _h);
|
|
} else {
|
|
var _c = oThis.CacheImage1.Color;
|
|
_ctx1.fillStyle = "rgb(" + _c.r + "," + _c.g + "," + _c.b + ")";
|
|
_ctx1.fillRect(_xDst + _x, _yDst + _y, _w, _h);
|
|
_ctx1.beginPath();
|
|
}
|
|
}
|
|
_ctx1.globalAlpha = (1 - _part);
|
|
if (null != oThis.CacheImage2.Image) {
|
|
_ctx1.drawImage(oThis.CacheImage2.Image, _x1, _y1, _w1, _h1, _xDst, _yDst, _wDst, _hDst);
|
|
} else {
|
|
var _c = oThis.CacheImage2.Color;
|
|
_ctx1.fillStyle = "rgb(" + _c.r + "," + _c.g + "," + _c.b + ")";
|
|
_ctx1.fillRect(_xDst, _yDst, _wDst, _hDst);
|
|
_ctx1.beginPath();
|
|
}
|
|
_ctx1.globalAlpha = 1;
|
|
break;
|
|
case c_oAscSlideTransitionParams.Zoom_AndRotate:
|
|
if (oThis.TimerId === null) {
|
|
var _ctx1 = null;
|
|
if (null == oThis.DemonstrationObject) {
|
|
_ctx1 = oThis.HtmlPage.m_oEditor.HtmlElement.getContext("2d");
|
|
_ctx1.fillStyle = "#B0B0B0";
|
|
_ctx1.fillRect(0, 0, oThis.HtmlPage.m_oEditor.HtmlElement.width, oThis.HtmlPage.m_oEditor.HtmlElement.height);
|
|
} else {
|
|
_ctx1 = oThis.DemonstrationObject.Canvas.getContext("2d");
|
|
_ctx1.fillStyle = "#000000";
|
|
_ctx1.fillRect(0, 0, oThis.DemonstrationObject.Canvas.width, oThis.DemonstrationObject.Canvas.height);
|
|
}
|
|
if (null != oThis.CacheImage1.Image) {
|
|
_ctx1.drawImage(oThis.CacheImage1.Image, oThis.Rect.x, oThis.Rect.y, oThis.Rect.w, oThis.Rect.h);
|
|
} else {
|
|
var _c = oThis.CacheImage1.Color;
|
|
_ctx1.fillStyle = "rgb(" + _c.r + "," + _c.g + "," + _c.b + ")";
|
|
_ctx1.fillRect(oThis.Rect.x, oThis.Rect.y, oThis.Rect.w, oThis.Rect.h);
|
|
_ctx1.beginPath();
|
|
}
|
|
}
|
|
var _ctx2 = null;
|
|
if (oThis.DemonstrationObject == null) {
|
|
oThis.HtmlPage.m_oOverlayApi.Clear();
|
|
oThis.HtmlPage.m_oOverlayApi.CheckRect(oThis.Rect.x, oThis.Rect.y, oThis.Rect.w, oThis.Rect.h);
|
|
_ctx2 = oThis.HtmlPage.m_oOverlayApi.m_oContext;
|
|
} else {
|
|
_ctx2 = oThis.DemonstrationObject.Overlay.getContext("2d");
|
|
_ctx2.clearRect(oThis.Rect.x, oThis.Rect.y, oThis.Rect.w, oThis.Rect.h);
|
|
}
|
|
var _angle = -45 + 405 * _part;
|
|
var _scale = (0.05 + 0.95 * _part);
|
|
_angle *= (Math.PI / 180);
|
|
_ctx2.save();
|
|
_ctx2.beginPath();
|
|
_ctx2.rect(_xDst, _yDst, _wDst, _hDst);
|
|
_ctx2.clip();
|
|
_ctx2.beginPath();
|
|
var _xC = _xDst + _wDst / 2;
|
|
var _yC = _yDst + _hDst / 2;
|
|
var localTransform = new CMatrixL();
|
|
global_MatrixTransformer.TranslateAppend(localTransform, -_xC, -_yC);
|
|
global_MatrixTransformer.ScaleAppend(localTransform, _scale, _scale);
|
|
global_MatrixTransformer.RotateRadAppend(localTransform, _angle);
|
|
global_MatrixTransformer.TranslateAppend(localTransform, _xC, _yC);
|
|
_ctx2.setTransform(localTransform.sx, localTransform.shy, localTransform.shx, localTransform.sy, localTransform.tx, localTransform.ty);
|
|
if (null != oThis.CacheImage2.Image) {
|
|
_ctx2.drawImage(oThis.CacheImage2.Image, _xDst, _yDst, _wDst, _hDst);
|
|
} else {
|
|
var _c = oThis.CacheImage2.Color;
|
|
_ctx2.fillStyle = "rgb(" + _c.r + "," + _c.g + "," + _c.b + ")";
|
|
_ctx2.fillRect(_xDst, _yDst, _wDst, _hDst);
|
|
_ctx2.beginPath();
|
|
}
|
|
_ctx2.restore();
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
oThis.TimerId = __nextFrame(oThis._startZoom);
|
|
};
|
|
}
|
|
function CDemonstrationManager(htmlpage) {
|
|
this.HtmlPage = htmlpage;
|
|
this.Transition = new CTransitionAnimation(htmlpage);
|
|
this.DivWidth = 0;
|
|
this.DivHeight = 0;
|
|
this.MainDivId = "";
|
|
this.DemonstrationDiv = null;
|
|
this.DivEndPresentation = null;
|
|
this.EndShowMessage = "";
|
|
this.SlideNum = -1;
|
|
this.SlidesCount = 0;
|
|
this.Mode = false;
|
|
this.Canvas = null;
|
|
this.Overlay = null;
|
|
this.SlideImage = null;
|
|
this.IsPlayMode = true;
|
|
this.CheckSlideDuration = -1;
|
|
this.Transition.DemonstrationObject = this;
|
|
this.CacheImagesManager = new CCacheManager();
|
|
this.SlideImages = new Array(2);
|
|
this.SlideImages[0] = null;
|
|
this.SlideImages[1] = null;
|
|
this.SlideIndexes = new Array(2);
|
|
this.SlideIndexes[0] = -1;
|
|
this.SlideIndexes[1] = -1;
|
|
var oThis = this;
|
|
this.CacheSlide = function (slide_num, slide_index) {
|
|
var _w = this.Transition.Rect.w;
|
|
var _h = this.Transition.Rect.h;
|
|
var _w_mm = this.HtmlPage.m_oLogicDocument.Width;
|
|
var _h_mm = this.HtmlPage.m_oLogicDocument.Height;
|
|
var _image = this.CacheImagesManager.Lock(_w, _h);
|
|
var g = new CGraphics();
|
|
g.init(_image.image.getContext("2d"), _w, _h, _w_mm, _h_mm);
|
|
g.m_oFontManager = g_fontManager;
|
|
g.transform(1, 0, 0, 1, 0, 0);
|
|
g.IsNoDrawingEmptyPlaceholder = true;
|
|
this.HtmlPage.m_oLogicDocument.DrawPage(slide_num, g);
|
|
this.SlideImages[slide_index] = new CCacheSlideImage();
|
|
this.SlideImages[slide_index].Image = _image;
|
|
this.SlideIndexes[slide_index] = slide_num;
|
|
};
|
|
this.PrepareTransition = function (is_first, is_backward) {
|
|
var _slide1 = -1;
|
|
var _slide2 = -1;
|
|
this.Transition.IsBackward = false;
|
|
if (is_first) {
|
|
_slide1 = -1;
|
|
_slide2 = this.SlideNum;
|
|
} else {
|
|
if (!is_backward) {
|
|
if (this.SlideNum > 0) {
|
|
_slide1 = this.SlideNum - 1;
|
|
}
|
|
_slide2 = this.SlideNum;
|
|
} else {
|
|
this.Transition.IsBackward = true;
|
|
_slide1 = this.SlideNum - 1;
|
|
_slide2 = this.SlideNum;
|
|
}
|
|
}
|
|
this.Transition.CalculateRectDemonstration();
|
|
if (this.SlideIndexes[0] != -1 && this.SlideIndexes[0] != _slide1 && this.SlideIndexes[0] != _slide2) {
|
|
this.CacheImagesManager.UnLock(this.SlideImages[0]);
|
|
this.SlideImages[0] = null;
|
|
this.SlideIndexes[0] = -1;
|
|
}
|
|
if (this.SlideIndexes[1] != -1 && this.SlideIndexes[1] != _slide1 && this.SlideIndexes[1] != _slide2) {
|
|
this.CacheImagesManager.UnLock(this.SlideImages[1]);
|
|
this.SlideImages[1] = null;
|
|
this.SlideIndexes[1] = -1;
|
|
}
|
|
if (_slide1 == -1) {
|
|
this.Transition.CacheImage1.Image = null;
|
|
} else {
|
|
if (_slide1 == this.SlideIndexes[0]) {
|
|
this.Transition.CacheImage1.Image = this.SlideImages[0].Image.image;
|
|
} else {
|
|
if (_slide1 == this.SlideIndexes[1]) {
|
|
this.Transition.CacheImage1.Image = this.SlideImages[1].Image.image;
|
|
} else {
|
|
if (-1 == this.SlideIndexes[0]) {
|
|
this.CacheSlide(_slide1, 0);
|
|
this.Transition.CacheImage1.Image = this.SlideImages[0].Image.image;
|
|
} else {
|
|
this.CacheSlide(_slide1, 1);
|
|
this.Transition.CacheImage1.Image = this.SlideImages[1].Image.image;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
if (_slide2 == -1) {
|
|
this.Transition.CacheImage2.Image = null;
|
|
} else {
|
|
if (_slide2 == this.SlideIndexes[0]) {
|
|
this.Transition.CacheImage2.Image = this.SlideImages[0].Image.image;
|
|
} else {
|
|
if (_slide2 == this.SlideIndexes[1]) {
|
|
this.Transition.CacheImage2.Image = this.SlideImages[1].Image.image;
|
|
} else {
|
|
if (-1 == this.SlideIndexes[0]) {
|
|
this.CacheSlide(_slide2, 0);
|
|
this.Transition.CacheImage2.Image = this.SlideImages[0].Image.image;
|
|
} else {
|
|
this.CacheSlide(_slide2, 1);
|
|
this.Transition.CacheImage2.Image = this.SlideImages[1].Image.image;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
this.PrepareSlide = function () {
|
|
if (this.SlideNum < 0 || this.SlideNum >= this.SlidesCount) {
|
|
this.SlideImage = -1;
|
|
return;
|
|
} else {
|
|
if (this.SlideNum != this.SlideIndexes[0]) {
|
|
this.CacheImagesManager.UnLock(this.SlideImages[0]);
|
|
this.SlideImages[0] = null;
|
|
this.SlideIndexes[0] = -1;
|
|
}
|
|
if (this.SlideNum != this.SlideIndexes[1]) {
|
|
this.CacheImagesManager.UnLock(this.SlideImages[1]);
|
|
this.SlideImages[1] = null;
|
|
this.SlideIndexes[1] = -1;
|
|
}
|
|
if (this.SlideNum == this.SlideIndexes[0]) {
|
|
this.SlideImage = 0;
|
|
} else {
|
|
if (this.SlideNum == this.SlideIndexes[1]) {
|
|
this.SlideImage = 1;
|
|
} else {
|
|
this.CacheSlide(this.SlideNum, 0);
|
|
this.SlideImage = 0;
|
|
}
|
|
}
|
|
}
|
|
};
|
|
this.Start = function (main_div_id, start_slide_num, is_play_mode) {
|
|
this.SlidesCount = this.HtmlPage.m_oDrawingDocument.SlidesCount;
|
|
this.DemonstrationDiv = document.getElementById(main_div_id);
|
|
if (this.DemonstrationDiv == null || start_slide_num < 0 || start_slide_num >= this.SlidesCount) {
|
|
return;
|
|
}
|
|
this.MainDivId = main_div_id;
|
|
var _width = this.DemonstrationDiv.clientWidth;
|
|
var _height = this.DemonstrationDiv.clientHeight;
|
|
this.DivWidth = _width;
|
|
this.DivHeight = _height;
|
|
this.Mode = true;
|
|
this.Canvas = document.createElement("canvas");
|
|
this.Canvas.setAttribute("style", "position:absolute;margin:0;padding:0;left:0px;top:0px;width:100%;height:100%;zIndex:2;background-color:#000000;");
|
|
this.Canvas.width = _width;
|
|
this.Canvas.height = _height;
|
|
this.SlideNum = start_slide_num;
|
|
this.HtmlPage.m_oApi.sync_DemonstrationSlideChanged(this.SlideNum);
|
|
this.Canvas.onmouseup = this.onMouseUp;
|
|
this.Canvas.onmousewheel = this.onMouseWhell;
|
|
if (this.Canvas.addEventListener) {
|
|
this.Canvas.addEventListener("DOMMouseScroll", this.onMouseWhell, false);
|
|
}
|
|
this.DemonstrationDiv.appendChild(this.Canvas);
|
|
this.IsPlayMode = true;
|
|
if (false === is_play_mode) {
|
|
this.IsPlayMode = false;
|
|
}
|
|
this.SlideIndexes[0] = -1;
|
|
this.SlideIndexes[1] = -1;
|
|
this.StartSlide(true, true);
|
|
};
|
|
this.StartSlide = function (is_transition_use, is_first_play) {
|
|
oThis.StopTransition();
|
|
if (oThis.SlideNum == oThis.SlidesCount) {
|
|
if (null == oThis.DivEndPresentation) {
|
|
oThis.DivEndPresentation = document.createElement("div");
|
|
oThis.DivEndPresentation.setAttribute("style", "position:absolute;margin:0px;padding:0px;left:0px;top:0px;width:100%;height:100%;z-index:4;background-color:#000000;text-align:center;font-family:monospace;font-size:12pt;color:#FFFFFF;");
|
|
oThis.DivEndPresentation.innerHTML = oThis.EndShowMessage;
|
|
oThis.DivEndPresentation.onmouseup = oThis.onMouseUp;
|
|
oThis.DivEndPresentation.onmousewheel = oThis.onMouseWhell;
|
|
if (oThis.DivEndPresentation.addEventListener) {
|
|
oThis.DivEndPresentation.addEventListener("DOMMouseScroll", oThis.onMouseWhell, false);
|
|
}
|
|
oThis.DemonstrationDiv.appendChild(oThis.DivEndPresentation);
|
|
}
|
|
return;
|
|
} else {
|
|
if (null != oThis.DivEndPresentation) {
|
|
this.DemonstrationDiv.removeChild(this.DivEndPresentation);
|
|
this.DivEndPresentation = null;
|
|
}
|
|
}
|
|
var _slides = oThis.HtmlPage.m_oLogicDocument.Slides;
|
|
var _timing = null;
|
|
if (is_transition_use) {
|
|
_timing = _slides[oThis.SlideNum].timing;
|
|
if (_timing.TransitionType != c_oAscSlideTransitionTypes.None && _timing.TransitionDuration > 0) {
|
|
oThis.StartTransition(_timing, is_first_play, false);
|
|
return;
|
|
}
|
|
}
|
|
oThis.OnPaintSlide(false);
|
|
};
|
|
this.StartSlideBackward = function () {
|
|
var _is_transition = oThis.Transition.IsPlaying();
|
|
oThis.StopTransition();
|
|
if (oThis.SlideNum == oThis.SlidesCount) {
|
|
oThis.SlideNum--;
|
|
oThis.OnPaintSlide(false);
|
|
if (null != oThis.DivEndPresentation) {
|
|
oThis.DemonstrationDiv.removeChild(oThis.DivEndPresentation);
|
|
oThis.DivEndPresentation = null;
|
|
}
|
|
return;
|
|
}
|
|
if (0 >= this.SlideNum) {
|
|
this.SlideNum = 0;
|
|
return;
|
|
}
|
|
var _slides = oThis.HtmlPage.m_oLogicDocument.Slides;
|
|
var _timing = _slides[oThis.SlideNum].timing;
|
|
if (!_is_transition && (_timing.TransitionType != c_oAscSlideTransitionTypes.None && _timing.TransitionDuration > 0)) {
|
|
oThis.StartTransition(_timing, false, true);
|
|
return;
|
|
}
|
|
if (!_is_transition) {
|
|
oThis.SlideNum--;
|
|
}
|
|
oThis.OnPaintSlide(false);
|
|
};
|
|
this.StopTransition = function () {
|
|
if (oThis.Transition.TimerId) {
|
|
oThis.Transition.End(true);
|
|
}
|
|
if (-1 != this.CheckSlideDuration) {
|
|
clearTimeout(this.CheckSlideDuration);
|
|
}
|
|
this.CheckSlideDuration = -1;
|
|
};
|
|
this.StartTransition = function (_timing, is_first, is_backward) {
|
|
if (null == oThis.Overlay) {
|
|
oThis.Overlay = document.createElement("canvas");
|
|
oThis.Overlay.setAttribute("style", "position:absolute;margin:0;padding:0;left:0px;top:0px;width:100%;height:100%;zIndex:3;");
|
|
oThis.Overlay.width = oThis.Canvas.width;
|
|
oThis.Overlay.height = oThis.Canvas.height;
|
|
oThis.Overlay.onmouseup = oThis.onMouseUp;
|
|
oThis.Overlay.onmousewheel = oThis.onMouseWhell;
|
|
if (oThis.Overlay.addEventListener) {
|
|
oThis.Overlay.addEventListener("DOMMouseScroll", oThis.onMouseWhell, false);
|
|
}
|
|
this.DemonstrationDiv.appendChild(oThis.Overlay);
|
|
}
|
|
oThis.Transition.Type = _timing.TransitionType;
|
|
oThis.Transition.Param = _timing.TransitionOption;
|
|
oThis.Transition.Duration = _timing.TransitionDuration;
|
|
oThis.PrepareTransition(is_first, is_backward);
|
|
oThis.Transition.Start(false);
|
|
};
|
|
this.OnEndTransition = function (bIsAttack) {
|
|
if (oThis.Transition.IsBackward) {
|
|
oThis.SlideNum--;
|
|
oThis.HtmlPage.m_oApi.sync_DemonstrationSlideChanged(oThis.SlideNum);
|
|
}
|
|
this.OnPaintSlide(true);
|
|
};
|
|
this.OnPaintSlide = function (is_clear_overlay) {
|
|
if (is_clear_overlay && oThis.Overlay) {
|
|
var _ctx2 = oThis.Overlay.getContext("2d");
|
|
_ctx2.clearRect(oThis.Transition.Rect.x, oThis.Transition.Rect.y, oThis.Transition.Rect.w, oThis.Transition.Rect.h);
|
|
}
|
|
oThis.Transition.CalculateRectDemonstration();
|
|
oThis.PrepareSlide();
|
|
var _ctx1 = oThis.Canvas.getContext("2d");
|
|
var _image = null;
|
|
if (0 == oThis.SlideImage) {
|
|
_image = oThis.SlideImages[0].Image.image;
|
|
} else {
|
|
if (1 == oThis.SlideImage) {
|
|
_image = oThis.SlideImages[1].Image.image;
|
|
}
|
|
}
|
|
if (null != _image) {
|
|
_ctx1.drawImage(_image, oThis.Transition.Rect.x, oThis.Transition.Rect.y, oThis.Transition.Rect.w, oThis.Transition.Rect.h);
|
|
}
|
|
var _slides = oThis.HtmlPage.m_oLogicDocument.Slides;
|
|
var _timing = _slides[oThis.SlideNum].timing;
|
|
if (_timing.SlideAdvanceAfter === true) {
|
|
oThis.CheckSlideDuration = setTimeout(function () {
|
|
if (oThis.IsPlayMode) {
|
|
oThis.SlideNum++;
|
|
oThis.HtmlPage.m_oApi.sync_DemonstrationSlideChanged(oThis.SlideNum);
|
|
oThis.StartSlide(true, false);
|
|
}
|
|
},
|
|
_timing.SlideAdvanceDuration);
|
|
}
|
|
};
|
|
this.End = function () {
|
|
if (!this.Mode) {
|
|
return;
|
|
}
|
|
this.StopTransition();
|
|
if (null != this.DivEndPresentation) {
|
|
this.DemonstrationDiv.removeChild(this.DivEndPresentation);
|
|
this.DivEndPresentation = null;
|
|
}
|
|
if (null != this.Overlay) {
|
|
this.DemonstrationDiv.removeChild(this.Overlay);
|
|
this.Overlay = null;
|
|
}
|
|
this.DemonstrationDiv.removeChild(this.Canvas);
|
|
this.Canvas = null;
|
|
this.SlideNum = -1;
|
|
this.DemonstrationDiv = null;
|
|
this.Mode = false;
|
|
this.HtmlPage.m_oApi.sync_endDemonstration();
|
|
};
|
|
this.NextSlide = function () {
|
|
if (!this.Mode) {
|
|
return;
|
|
}
|
|
var _is_transition = this.Transition.IsPlaying();
|
|
if (!_is_transition) {
|
|
this.SlideNum++;
|
|
}
|
|
if (this.SlideNum > this.SlidesCount) {
|
|
this.End();
|
|
} else {
|
|
this.HtmlPage.m_oApi.sync_DemonstrationSlideChanged(this.SlideNum);
|
|
this.StartSlide(!_is_transition, false);
|
|
}
|
|
};
|
|
this.PrevSlide = function () {
|
|
if (!this.Mode) {
|
|
return;
|
|
}
|
|
if (0 != this.SlideNum) {
|
|
this.StartSlideBackward();
|
|
this.HtmlPage.m_oApi.sync_DemonstrationSlideChanged(this.SlideNum);
|
|
}
|
|
};
|
|
this.GoToSlide = function (slideNum) {
|
|
if (!this.Mode) {
|
|
return;
|
|
}
|
|
if ((slideNum == this.SlideNum) || (slideNum < 0) || (slideNum >= this.SlidesCount)) {
|
|
return;
|
|
}
|
|
this.SlideNum = slideNum;
|
|
this.HtmlPage.m_oApi.sync_DemonstrationSlideChanged(this.SlideNum);
|
|
this.StartSlide(true, false);
|
|
};
|
|
this.Play = function () {
|
|
this.IsPlayMode = true;
|
|
};
|
|
this.Pause = function () {
|
|
this.IsPlayMode = false;
|
|
};
|
|
this.onKeyDown = function (e) {
|
|
check_KeyboardEvent(e);
|
|
switch (global_keyboardEvent.KeyCode) {
|
|
case 13:
|
|
case 32:
|
|
case 34:
|
|
case 39:
|
|
case 40:
|
|
oThis.NextSlide();
|
|
break;
|
|
case 33:
|
|
case 37:
|
|
case 38:
|
|
oThis.PrevSlide();
|
|
break;
|
|
case 36:
|
|
oThis.GoToSlide(0);
|
|
break;
|
|
case 35:
|
|
oThis.GoToSlide(this.SlidesCount - 1);
|
|
break;
|
|
case 27:
|
|
oThis.End();
|
|
break;
|
|
default:
|
|
break;
|
|
}
|
|
oThis.HtmlPage.IsKeyDownButNoPress = true;
|
|
return false;
|
|
};
|
|
this.onMouseDown = function (e) {
|
|
e.preventDefault();
|
|
return false;
|
|
};
|
|
this.onMouseMove = function (e) {
|
|
e.preventDefault();
|
|
return false;
|
|
};
|
|
this.onMouseUp = function (e) {
|
|
var _is_transition = oThis.Transition.IsPlaying();
|
|
if (_is_transition) {
|
|
oThis.NextSlide();
|
|
} else {
|
|
if (oThis.SlideNum < 0 || oThis.SlideNum >= oThis.SlidesCount) {
|
|
oThis.NextSlide();
|
|
} else {
|
|
var _slides = oThis.HtmlPage.m_oLogicDocument.Slides;
|
|
var _timing = _slides[oThis.SlideNum].timing;
|
|
if (_timing.SlideAdvanceOnMouseClick === true) {
|
|
oThis.NextSlide();
|
|
}
|
|
}
|
|
}
|
|
e.preventDefault();
|
|
return false;
|
|
};
|
|
this.onMouseWhell = function (e) {
|
|
var delta = 0;
|
|
if (undefined != e.wheelDelta) {
|
|
delta = (e.wheelDelta > 0) ? -1 : 1;
|
|
} else {
|
|
delta = (e.detail > 0) ? 1 : -1;
|
|
}
|
|
if (delta > 0) {
|
|
oThis.NextSlide();
|
|
} else {
|
|
oThis.PrevSlide();
|
|
}
|
|
e.preventDefault();
|
|
return false;
|
|
};
|
|
this.Resize = function () {
|
|
if (!this.Mode) {
|
|
return;
|
|
}
|
|
var _width = this.DemonstrationDiv.clientWidth;
|
|
var _height = this.DemonstrationDiv.clientHeight;
|
|
if (_width == this.DivWidth && _height == this.DivHeight) {
|
|
return;
|
|
}
|
|
this.DivWidth = _width;
|
|
this.DivHeight = _height;
|
|
this.Canvas.width = _width;
|
|
this.Canvas.height = _height;
|
|
this.Transition.CalculateRectDemonstration();
|
|
this.SlideIndexes[0] = -1;
|
|
this.SlideIndexes[1] = -1;
|
|
if (this.Overlay) {
|
|
this.Overlay.width = this.Canvas.width;
|
|
this.Overlay.height = this.Canvas.height;
|
|
}
|
|
if (this.SlideNum < this.SlidesCount) {
|
|
this.StartSlide(false, false);
|
|
}
|
|
};
|
|
} |