Skip to content

Commit

Permalink
feat: add view.transform support
Browse files Browse the repository at this point in the history
  • Loading branch information
@06wj
06wj committed Aug 8, 2018
1 parent 304dac2 commit 43e35d5
Show file tree
Hide file tree
Showing 4 changed files with 102 additions and 61 deletions.
19 changes: 15 additions & 4 deletions src/core/Hilo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -311,12 +311,23 @@ var Hilo = {
if (this.cacheStateIfChanged(obj, ['depth'], stateCache)) {
style.zIndex = obj.depth + 1;
}
if (flag = this.cacheStateIfChanged(obj, ['pivotX', 'pivotY'], stateCache)) {
style[prefix + 'TransformOrigin'] = obj.pivotX + px + ' ' + obj.pivotY + px;
if (obj.transform){
var transform = obj.transform;
if (flag = this.cacheStateIfChanged(obj, ['pivotX', 'pivotY'], stateCache)) {
style[prefix + 'TransformOrigin'] = '0 0';
}
style[prefix + 'Transform'] = 'matrix3d(' + transform.a + ', '+ transform.b + ', 0, 0, '+ transform.c + ', '+ transform.d + ', 0, 0, 0, 0, 1, 0, '+ transform.tx + ', '+ transform.ty + ', 0, 1)';
}
if (this.cacheStateIfChanged(obj, ['x', 'y', 'rotation', 'scaleX', 'scaleY'], stateCache) || flag) {
style[prefix + 'Transform'] = this.getTransformCSS(obj);
else{
if (flag = this.cacheStateIfChanged(obj, ['pivotX', 'pivotY'], stateCache)) {
style[prefix + 'TransformOrigin'] = obj.pivotX + px + ' ' + obj.pivotY + px;
}

if (this.cacheStateIfChanged(obj, ['x', 'y', 'rotation', 'scaleX', 'scaleY'], stateCache) || flag) {
style[prefix + 'Transform'] = this.getTransformCSS(obj);
}
}

if (this.cacheStateIfChanged(obj, ['background'], stateCache)) {
style.backgroundColor = obj.background;
}
Expand Down
85 changes: 49 additions & 36 deletions src/renderer/CanvasRenderer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,26 +26,26 @@
* @requires hilo/renderer/Renderer
* @property {CanvasRenderingContext2D} context canvas画布的上下文。只读属性。
*/
var CanvasRenderer = Class.create(/** @lends CanvasRenderer.prototype */{
var CanvasRenderer = Class.create( /** @lends CanvasRenderer.prototype */ {
Extends: Renderer,
constructor: function(properties){
constructor: function(properties) {
CanvasRenderer.superclass.constructor.call(this, properties);

this.context = this.canvas.getContext("2d");
},
renderType:'canvas',
renderType: 'canvas',
context: null,

/**
* @private
* @see Renderer#startDraw
*/
startDraw: function(target){
if(target.visible && target.alpha > 0){
if(target === this.stage){
startDraw: function(target) {
if (target.visible && target.alpha > 0) {
if (target === this.stage) {
this.context.clearRect(0, 0, target.width, target.height);
}
if(target.blendMode !== this.blendMode){
if (target.blendMode !== this.blendMode) {
this.context.globalCompositeOperation = this.blendMode = target.blendMode;
}
this.context.save();
Expand All @@ -58,31 +58,38 @@ var CanvasRenderer = Class.create(/** @lends CanvasRenderer.prototype */{
* @private
* @see Renderer#draw
*/
draw: function(target){
var ctx = this.context, w = target.width, h = target.height;
draw: function(target) {
var ctx = this.context,
w = target.width,
h = target.height;

//draw background
var bg = target.background;
if(bg){
if (bg) {
ctx.fillStyle = bg;
ctx.fillRect(0, 0, w, h);
}

//draw image
var drawable = target.drawable, image = drawable && drawable.image;
if(image){
var rect = drawable.rect, sw = rect[2], sh = rect[3], offsetX = rect[4], offsetY = rect[5];
var drawable = target.drawable,
image = drawable && drawable.image;
if (image) {
var rect = drawable.rect,
sw = rect[2],
sh = rect[3],
offsetX = rect[4],
offsetY = rect[5];
//ie9+浏览器宽高为0时会报错 fixed ie9 bug.
if(!sw || !sh){
if (!sw || !sh) {
return;
}
if(!w && !h){
if (!w && !h) {
//fix width/height TODO: how to get rid of this?
w = target.width = sw;
h = target.height = sh;
}
//the pivot is the center of frame if has offset, otherwise is (0, 0)
if(offsetX || offsetY) ctx.translate(offsetX - sw * 0.5, offsetY - sh * 0.5);
if (offsetX || offsetY) ctx.translate(offsetX - sw * 0.5, offsetY - sh * 0.5);
ctx.drawImage(image, rect[0], rect[1], sw, sh, 0, 0, w, h);
}
},
Expand All @@ -91,17 +98,17 @@ var CanvasRenderer = Class.create(/** @lends CanvasRenderer.prototype */{
* @private
* @see Renderer#endDraw
*/
endDraw: function(target){
endDraw: function(target) {
this.context.restore();
},

/**
* @private
* @see Renderer#transform
*/
transform: function(target){
transform: function(target) {
var drawable = target.drawable;
if(drawable && drawable.domElement){
if (drawable && drawable.domElement) {
Hilo.setElementStyleByView(target);
return;
}
Expand All @@ -110,66 +117,72 @@ var CanvasRenderer = Class.create(/** @lends CanvasRenderer.prototype */{
scaleX = target.scaleX,
scaleY = target.scaleY;

if(target === this.stage){
if (target === this.stage) {
var style = this.canvas.style,
oldScaleX = target._scaleX,
oldScaleY = target._scaleY,
isStyleChange = false;

if((!oldScaleX && scaleX != 1) || (oldScaleX && oldScaleX != scaleX)){
if ((!oldScaleX && scaleX != 1) || (oldScaleX && oldScaleX != scaleX)) {
target._scaleX = scaleX;
style.width = scaleX * target.width + "px";
isStyleChange = true;
}
if((!oldScaleY && scaleY != 1) || (oldScaleY && oldScaleY != scaleY)){
if ((!oldScaleY && scaleY != 1) || (oldScaleY && oldScaleY != scaleY)) {
target._scaleY = scaleY;
style.height = scaleY * target.height + "px";
isStyleChange = true;
}
if(isStyleChange){
if (isStyleChange) {
target.updateViewport();
}
}else{
} else {
var x = target.x,
y = target.y,
pivotX = target.pivotX,
pivotY = target.pivotY,
rotation = target.rotation % 360,
transform = target.transform,
mask = target.mask;

if(mask){
if (mask) {
mask._render(this);
ctx.clip();
}

//alignment
var align = target.align;
if(align){
if (align) {
var pos = target.getAlignPosition();
x = pos.x;
y = pos.y;
}

if (transform) {
ctx.transform(transform.a, transform.b, transform.c, transform.d, transform.tx, transform.ty);
} else {
if (x != 0 || y != 0) ctx.translate(x, y);
if (rotation != 0) ctx.rotate(rotation * Math.PI / 180);
if (scaleX != 1 || scaleY != 1) ctx.scale(scaleX, scaleY);
if (pivotX != 0 || pivotY != 0) ctx.translate(-pivotX, -pivotY);
}

if(x != 0 || y != 0) ctx.translate(x, y);
if(rotation != 0) ctx.rotate(rotation * Math.PI / 180);
if(scaleX != 1 || scaleY != 1) ctx.scale(scaleX, scaleY);
if(pivotX != 0 || pivotY != 0) ctx.translate(-pivotX, -pivotY);
}

if(target.alpha > 0) ctx.globalAlpha *= target.alpha;
if (target.alpha > 0) ctx.globalAlpha *= target.alpha;
},

/**
* @private
* @see Renderer#remove
*/
remove: function(target){
remove: function(target) {
var drawable = target.drawable;
var elem = drawable && drawable.domElement;

if(elem){
if (elem) {
var parentElem = elem.parentNode;
if(parentElem){
if (parentElem) {
parentElem.removeChild(elem);
}
}
Expand All @@ -179,15 +192,15 @@ var CanvasRenderer = Class.create(/** @lends CanvasRenderer.prototype */{
* @private
* @see Renderer#clear
*/
clear: function(x, y, width, height){
clear: function(x, y, width, height) {
this.context.clearRect(x, y, width, height);
},

/**
* @private
* @see Renderer#resize
*/
resize: function(width, height){
resize: function(width, height) {
var canvas = this.canvas;
var stage = this.stage;
var style = canvas.style;
Expand Down
31 changes: 19 additions & 12 deletions src/renderer/WebGLRenderer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -447,21 +447,28 @@ var WebGLRenderer = Class.create(/** @lends WebGLRenderer.prototype */{
var cos = 1, sin = 0,
rotation = view.rotation % 360,
pivotX = view.pivotX, pivotY = view.pivotY,
scaleX = view.scaleX, scaleY = view.scaleY;
scaleX = view.scaleX, scaleY = view.scaleY,
transform = view.transform;

if(rotation){
var r = rotation * DEG2RAD;
cos = Math.cos(r);
sin = Math.sin(r);
if (transform) {
mtx.copy(transform);
}
else {
if(rotation){
var r = rotation * DEG2RAD;
cos = Math.cos(r);
sin = Math.sin(r);
}

var pos = view.getAlignPosition();

var pos = view.getAlignPosition();
mtx.a = cos*scaleX;
mtx.b = sin*scaleX;
mtx.c = -sin*scaleY;
mtx.d = cos*scaleY;
mtx.tx = pos.x - mtx.a * pivotX - mtx.c * pivotY;
mtx.ty = pos.y - mtx.b * pivotX - mtx.d * pivotY;
mtx.a = cos*scaleX;
mtx.b = sin*scaleX;
mtx.c = -sin*scaleY;
mtx.d = cos*scaleY;
mtx.tx = pos.x - mtx.a * pivotX - mtx.c * pivotY;
mtx.ty = pos.y - mtx.b * pivotX - mtx.d * pivotY;
}

mtx.concat(ancestor.__webglWorldMatrix);
},
Expand Down
28 changes: 19 additions & 9 deletions src/view/View.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@
* @property {Number} pivotY Position of the center point on the y axis of the view, default value is 0.
* @property {Number} scaleX The x axis scale factor of the view, default value is 1.
* @property {Number} scaleY The y axis scale factor of the view, default value is 1.
* @property {Matrix} transform The transform of the view.If set the transform, x, y, scaleX, scaleY, rotation, pivotX, pivotY will be ignored.default is null.
* @property {Boolean} pointerEnabled Is the view can receive DOM events, default value is true.
* @property {Object} background The background style to fill the view, can be css color, gradient or pattern of canvas
* @property {Graphics} mask Sets a mask for the view. A mask is an object that limits the visibility of an object to the shape of the mask applied to it. A regular mask must be a Hilo.Graphics object. This allows for much faster masking in canvas as it utilises shape clipping. To remove a mask, set this property to null.
Expand Down Expand Up @@ -66,6 +67,7 @@
* @property {Number} pivotY 可视对象的中心点的y轴坐标。默认值为0。
* @property {Number} scaleX 可视对象在x轴上的缩放比例。默认为不缩放，即1。
* @property {Number} scaleY 可视对象在y轴上的缩放比例。默认为不缩放，即1。
* @property {Matrix} transform 可视对象的transform属性，如果设置将忽略x, y, scaleX, scaleY, rotation. pivotX, pivotY 属性。默认null。
* @property {Boolean} pointerEnabled 可视对象是否接受交互事件。默认为接受交互事件，即true。
* @property {Object} background 可视对象的背景样式。可以是CSS颜色值、canvas的gradient或pattern填充。
* @property {Graphics} mask 可视对象的遮罩图形。
Expand Down Expand Up @@ -107,6 +109,7 @@ return Class.create(/** @lends View.prototype */{
boundsArea: null,
parent: null,
depth: -1,
transform: null,
blendMode:'source-over',

/**
Expand Down Expand Up @@ -263,19 +266,26 @@ return Class.create(/** @lends View.prototype */{
var cos = 1, sin = 0,
rotation = o.rotation % 360,
pivotX = o.pivotX, pivotY = o.pivotY,
scaleX = o.scaleX, scaleY = o.scaleY;
scaleX = o.scaleX, scaleY = o.scaleY,
transform = o.transform;

if(rotation){
var r = rotation * Math.PI / 180;
cos = Math.cos(r);
sin = Math.sin(r);
if(transform) {
mtx.concat(transform);
}
else{
if(rotation){
var r = rotation * Math.PI / 180;
cos = Math.cos(r);
sin = Math.sin(r);
}

if(pivotX != 0) mtx.tx -= pivotX;
if(pivotY != 0) mtx.ty -= pivotY;
if(pivotX != 0) mtx.tx -= pivotX;
if(pivotY != 0) mtx.ty -= pivotY;

var pos = o.getAlignPosition();
mtx.concat(cos*scaleX, sin*scaleX, -sin*scaleY, cos*scaleY, pos.x, pos.y);
var pos = o.getAlignPosition();
mtx.concat(cos*scaleX, sin*scaleX, -sin*scaleY, cos*scaleY, pos.x, pos.y);
}

}
return mtx;
},
Expand Down

0 comments on commit 43e35d5

Please sign in to comment.