Android仿海報工廠(一)

之前仿照‘海報工廠’寫了一個大概的架子Android海報制作(初始版)缩歪,乘著今天晚上有點空正好做了些升級和進一步的思考。
既然是模仿,當然少不了體驗,然而當我在仔細研究‘海報工廠’的時候發(fā)現(xiàn)自己之前的邏輯漏洞百出诵冒,所以對整體的思路進行了修改并對整個開發(fā)思路有了些新的認識。下面逐一講講我想的這些問題

主要修改的地方有:

1.修改了確定圖層定位的方式
2.邊框的繪制
3.新增了圖片旋轉和平移
大概的效果如圖:


poster

1.圖層的定位

在之前使用的圖層定位的方式是使用的固定矩形的左上右下坐標點谊惭,也就是說在定位坐標點的時候汽馋,不應該旋轉,當定完坐標點后再旋轉(作者這里指的美工定位坐標點的操作)圈盔。豹芯。

然而我這蛋疼的思路好像沒有考慮美工的感受哈!

美工不服
按理應該再做出效果圖之后再進行標點 0.0
又或者是其他的圖形而不是矩陣的話該如何給標記药磺??煤伟?癌佩?木缝?
有點懵逼

在一番思考之后,我毅然決定使用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
最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末冬殃,一起剝皮案震驚了整個濱河市囚痴,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌审葬,老刑警劉巖深滚,帶你破解...
    沈念sama閱讀 218,682評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異涣觉,居然都是意外死亡痴荐,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,277評論 3 395
  • 文/潘曉璐 我一進店門旨枯,熙熙樓的掌柜王于貴愁眉苦臉地迎上來蹬昌,“玉大人,你說我怎么就攤上這事攀隔≡矸罚” “怎么了?”我有些...
    開封第一講書人閱讀 165,083評論 0 355
  • 文/不壞的土叔 我叫張陵昆汹,是天一觀的道長明刷。 經(jīng)常有香客問我,道長满粗,這世上最難降的妖魔是什么辈末? 我笑而不...
    開封第一講書人閱讀 58,763評論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮映皆,結果婚禮上挤聘,老公的妹妹穿的比我還像新娘。我一直安慰自己捅彻,他們只是感情好组去,可當我...
    茶點故事閱讀 67,785評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著步淹,像睡著了一般从隆。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上缭裆,一...
    開封第一講書人閱讀 51,624評論 1 305
  • 那天键闺,我揣著相機與錄音,去河邊找鬼澈驼。 笑死辛燥,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播挎塌,決...
    沈念sama閱讀 40,358評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼畅铭,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了勃蜘?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 39,261評論 0 276
  • 序言:老撾萬榮一對情侶失蹤假残,失蹤者是張志新(化名)和其女友劉穎缭贡,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體辉懒,經(jīng)...
    沈念sama閱讀 45,722評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡阳惹,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,900評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了眶俩。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片莹汤。...
    茶點故事閱讀 40,030評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖颠印,靈堂內(nèi)的尸體忽然破棺而出纲岭,到底是詐尸還是另有隱情,我是刑警寧澤线罕,帶...
    沈念sama閱讀 35,737評論 5 346
  • 正文 年R本政府宣布止潮,位于F島的核電站,受9級特大地震影響钞楼,放射性物質發(fā)生泄漏喇闸。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,360評論 3 330
  • 文/蒙蒙 一询件、第九天 我趴在偏房一處隱蔽的房頂上張望燃乍。 院中可真熱鬧,春花似錦宛琅、人聲如沸刻蟹。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,941評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽座咆。三九已至,卻和暖如春仓洼,著一層夾襖步出監(jiān)牢的瞬間介陶,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,057評論 1 270
  • 我被黑心中介騙來泰國打工色建, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留哺呜,地道東北人。 一個月前我還...
    沈念sama閱讀 48,237評論 3 371
  • 正文 我出身青樓箕戳,卻偏偏與公主長得像某残,于是被迫代替她去往敵國和親国撵。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,976評論 2 355

推薦閱讀更多精彩內(nèi)容