之前仿照‘海報工廠’寫了一個大概的架子Android海報制作(初始版)缩歪,乘著今天晚上有點空正好做了些升級和進一步的思考。
既然是模仿,當然少不了體驗,然而當我在仔細研究‘海報工廠’的時候發(fā)現(xiàn)自己之前的邏輯漏洞百出诵冒,所以對整體的思路進行了修改并對整個開發(fā)思路有了些新的認識。下面逐一講講我想的這些問題
主要修改的地方有:
1.修改了確定圖層定位的方式
2.邊框的繪制
3.新增了圖片旋轉和平移
大概的效果如圖:
poster
1.圖層的定位
在之前使用的圖層定位的方式是使用的固定矩形的左上和右下坐標點谊惭,也就是說在定位坐標點的時候汽馋,不應該旋轉,當定完坐標點后再旋轉(作者這里指的美工定位坐標點的操作)圈盔。豹芯。
然而我這蛋疼的思路好像沒有考慮美工的感受哈!
美工不服
又或者是其他的圖形而不是矩陣的話該如何給標記药磺??煤伟?癌佩?木缝?
有點懵逼
在一番思考之后,我毅然決定使用path作為圖層的定位方式(又叫公司的美工大大幫忙重新標記了坐標點)围辙,這樣圖層多樣化的同時我們既能有效的遮蓋圖片我碟,也能有效的繪制出遮蓋層--可以看第二點‘邊框的繪制’。
所以在添加數(shù)據(jù)的時候不再是:
public Layer(Bitmap layer, RectF layerRectF, int degree) { }
而是姚建,直接添加點坐標矫俺,或者添加路徑(矩形就意味著要Mark四個點坐標哦!)
public Layer(Bitmap layer, int degree) {
this.layer = layer;
this.degree = degree;
}
/**
* 標記坐標點
*
* @param x
* @param y
* @return
*/
public Layer markPoint(float x, float y) {
if (null == layerPath) {
layerPath = new Path();
layerPath.moveTo(x, y);
} else {
layerPath.lineTo(x, y);
}
return this;
}
public Layer build() {
layerPath.close();//閉合矩形
return this;
}
public Layer build(Path path) {//直接丟入path路徑
layerPath = path;
return this;
}
這樣的邏輯掸冤,可以任意設置多邊形(逐一加標記點)厘托,或者直接添加path路徑。使之多元化稿湿。
在縮放邊框的時候不再需要再對layerRectF進行縮放了铅匹,直接使用Matrix對path路徑進行縮放操作,再使用Path類的computeBounds方法計算實際路徑的邊緣矩形饺藤。代碼如下:
/**
* 計算出 真實起點坐標包斑,和結束坐標,可以確定出顯示矩形框
*
* @param coverScale 遮蓋層圖片的縮放比例
* @return
*/
public void caculateDrawLayer(float coverScale) {
// if (layerPath==null)
Matrix scaleMatrix = new Matrix();
scaleMatrix.postScale(coverScale, coverScale);
layerPath.transform(scaleMatrix);
layerRectF = new RectF();
layerPath.computeBounds(layerRectF, false);
scale = LayerUtils.calculateFitScale(width, height, (int) layerRectF.width(), (int) layerRectF.height());
drawLayer = BitmapUtils.scaleBitmap(layer, scale);
// 更新Layer的坐標
setLayerX(layerRectF.left - ((drawLayer.getWidth() - layerRectF.width()) / 2));
setLayerY(layerRectF.top - ((drawLayer.getHeight() - layerRectF.height()) / 2));
}
繪制出效果(藍色代表計算出來的矩形涕俗,紅色代表path路徑的矩形):
public void draw(Canvas canvas) {
Paint paint1 = new Paint();
paint1.setColor(Color.BLUE);
canvas.drawRect(layerRectF, paint1);
layerPaint.setColor(Color.RED);
canvas.drawPath(layerPath, layerPaint);
}
繪制出來的效果如圖:
path.png
2.邊框的繪制和圖層的平移旋轉
當繪制完圖層之后罗丰,發(fā)現(xiàn)了一個小小的問題:繪制出來的效果比實際上要偏大!如圖:
邊緣
實際上通過比例換算出來的layerRectF 的確會因為旋轉導致矩形比實際矩形的寬高要偏大再姑,其實這個問題在我之前寫Matrix 二的時候就已經(jīng)提過了類似的問題萌抵,不過這里要解決也挺簡單的,只需要提前判斷好是否是矩形询刹,然后計算出實際的寬高谜嫉,再換算比例,這樣在最初的繪制效果就是就好的效果了凹联。下回再加進來吧沐兰,今天還沒洗澡的,哎蔽挠。
邊框的繪制到也挺簡單的住闯,直接繪制layerPath即可。
我在圖片的平移上面與上回也做了不同的修改澳淑,與之前不同的再drawBitmap 的時候進行移動比原,直接canvas移動會要更合理,下面貼出draw方法:
public void draw(Canvas canvas) {
int a = canvas.save(Canvas.ALL_SAVE_FLAG);
if (isInTouch) {
layerPaint.setAlpha(125);//如果是點擊狀態(tài) 50%的透明度
} else {
canvas.clipPath(layerPath);
layerPaint.setAlpha(255);
}
canvas.rotate(degree, layerRectF.centerX(), layerRectF.centerY());
canvas.translate(x, y);
canvas.drawBitmap(drawLayer, 0, 0, layerPaint);
canvas.setDrawFilter(drawFilter);
canvas.restoreToCount(a);
if (isInTouch) {
canvas.drawPath(layerPath, framePaint);
}
}
圖層的平移和旋轉也挺簡單的杠巡,判斷好狀態(tài)即可量窘,下面就不做解釋了,圖層的縮放我會放在下章再寫氢拥。
下章會添加的功能我的預想是:
1.圖層的縮放
2.圖片切換(不同圖層之間切換)
3.圖片更換蚌铜,圖片濾鏡效果
4.海報的保存
項目地址
如果喜歡我的文章的話锨侯,不妨點個贊!
帥.gif