iOS - 用CGContext和變換繪製圖像

我想繪製另一個圖像的圖像。我有圖像的大小，變換和起源。我的下面的代碼顯示正確的大小和轉換角度，但不在正確的位置。iOS - 用CGContext和變換繪製圖像

代碼：

UIGraphicsBeginImageContextWithOptions(backgroundImage.size, NO, [[UIScreen mainScreen] scale]); 
    CGContextRef context = UIGraphicsGetCurrentContext(); 

    CGRect baseRect = CGRectMake(0, 0, backgroundImage.size.width, backgroundImage.size.height); 

    [backgroundImage drawInRect:baseRect]; 

    CGRect newRect = CGRectMake(x, y, width, height); 

    CGContextTranslateCTM(context, x, y); 
    CGContextConcatCTM(context, watermarkImageView.transform); 
    CGContextTranslateCTM(context, -x, -y); 

    [watermarkImageView.image drawInRect:newRect]; 

    UIImage* result = UIGraphicsGetImageFromCurrentImageContext(); 
    UIGraphicsEndImageContext(); 

    return result;

水印圖像應該放在這樣的：

enter image description here

但目前它看起來像這樣：

enter image description here

我是怎麼小姐？

在此先感謝

編輯

的X，Y是

enter image description here

來源

2015-07-19 tnylee

「不是在正確的點」，什麼可能是正確的，什麼不發生目前？在圖像上進行操作是**完美**的機會，可以發佈當前問題的截圖。 – luk2302

水印圖像的來源不是它應該在的地方。我將更新問題截圖 – tnylee

@ luk2302我更新了我的問題 – tnylee

您的代碼並不顯示邊框的邊緣是什麼watermarkImageView.transform是，這是因爲當你連接轉換時，以前轉換的效果也會影響下面所有的轉換。

E.g.將對象沿x軸移動10個像素的平移會將對象向右移動10個像素。但是，如果首先進行旋轉，將對象旋轉45度，然後添加沿x軸移動10個像素的平移，則對象不會向右移動10個像素，則會沿着一條線移動10個像素是45度旋轉，這意味着它將向上移動7個像素，向右移動7個像素。這是因爲旋轉不會真正旋轉對象本身，它實際上會旋轉整個座標系，導致對象被繪製旋轉。

看到這個圖片： Example showing translation after rotation

最初翻譯座標系統（紅線）「真正的座標」的系統相匹配。但是，在旋轉45度之後，平移座標系已旋轉，現在沿着紅線平移會使對象沿對角線移動。

想想一張紙和一張郵票。郵票總是具有相同的位置和方向，您不能移動或旋轉郵票。但是您可以移動並旋轉郵票下面的紙張！這就是你的轉變所做的。他們在將印章壓在印張上之前轉換印張。

對於大多數人來說，很難想象變換整個空間的效果，他們考慮轉換對象更容易。訣竅是：您必須按照與編寫它們相反的順序閱讀您的轉換。我想你想要做的其實是：

CGContextTranslateCTM(context, x, y); 
CGContextConcatCTM(context, watermarkImageView.transform); 
CGContextTranslateCTM(context, 
    -watermarkImageView.size.with * 0.5, 
    -watermarkImageView.size.height * 0.5 
);

現在按相反順序（從下到上）讀取它們。首先通過將水印向上移動一半高度並留下一半寬度將水印居中（0,0）。現在水印的中心恰好在（0,0）處。然後根據需要旋轉它。最後你將它移動到所需的位置。當然，你以相反的方式寫出了所有的變換，但那只是因爲你正在變換座標空間而不是對象。

在旋轉之前居中放置水印非常重要，因爲旋轉始終圍繞（0,0）座標旋轉。如果你只是旋轉，旋轉看起來是這樣的：

enter image description here

這不是你想要的，因爲它不會只是旋轉對象，還會改變它的位置。如果您居中圖像周圍（0,0）首先，旋轉看起來像這個：

enter image description here

來源

2015-07-19 14:28:11 Mecki

謝謝你的回答。「watermarkImageView.transform」取決於用戶旋轉水印，但他們想要的。用戶按住並拖動水印的右上角按鈕（第1張圖像）。旋轉發生在我的一段代碼之前。我的一段代碼發生在用戶完成旋轉並按下保存時。 – tnylee

這個解釋是否足夠？我只想將水印正好放在'x，y'點的位置。 – tnylee

@tnylee我猜你實際想要做的只是旋轉圖像，然後翻譯圖像，最後繪製它。這將是兩個轉換，但你的代碼有三個（這對我來說似乎是錯誤的）。還要確保先翻譯後再旋轉。 – Mecki

回答我的問題是

我不得不翻譯成的我想在中心繪製上下文。

CGContextTranslateCTM(context, imageView.center.x, imageView.center.y);

然後旋轉上下文。

CGFloat angle = [(NSNumber *)[imageView valueForKeyPath:@"layer.transform.rotation.z"] floatValue]; 
CGContextRotateCTM(context, angle);

然後畫

[imageView.image drawInRect:CGRectMake(-width * 0.5f, -height * 0.5f, width, height)];

來源

2015-07-24 11:09:53 tnylee

upvote !!你救了我的命。如果你不介意，請你幫我。 –

iOS - 用CGContext和變換繪製圖像

回答

相關問題