Canvas HTML5, hình ảnh trên/trong đa giác có thể?

Question

Có cách nào bằng cách sử dụng canvas javascript html5, để có đa giác và sau đó hiển thị một hình ảnh trong đó thay vì một màu?

Answer 1

Sau khi một số nghiên cứu, tôi tin rằng nó có thể làm điều đó bằng cách đầu tiên tạo ra một mô hình sử dụng hình ảnh của bạn, sau đó thiết lập mô hình đó để fillStyle:

var ctx = canvas.getContext("2d"); 
var pattern = ctx.createPattern(imageObj, "repeat"); 
ctx.fillStyle = pattern; 

Sau đó, nó chỉ là vấn đề của việc tạo ra đa giác của bạn (sử dụng moveTo và lineTo) và sau đó điền thông thường.

Nguồn: this plugin mã nguồn. Disclaimer: đã không cố gắng nó bản thân mình để xác nhận rằng các công trình.

Cập nhật: Tôi vẫn đang điều tra xem bạn có thể thao tác hình ảnh để phù hợp với đa giác tùy ý hay không. Về nguyên tắc, bạn có thể sử dụng setTransform để làm điều đó:

ctx.save(); 
ctx.setTransform(m11, m12, m21, m22, dx, dy); 
ctx.drawImage(imageObj); 
ctx.restore(); 

Xác định các giá trị của setTransform thông số (nếu nó có thể làm điều đó ở tất cả) là phần phức tạp. Nó được looong kể từ khi tôi đã làm bất kỳ toán, nhưng nếu tôi nhớ chính xác đây là những gì cần phải được thực hiện:

(0,0) --- (w,0)  (x1,y1) --- (x2,y2) 
    |   |   |   | 
    | Image |  =>  | Morphed | 
    |   |   |   | 
(0,h) --- (w,h)  (x3,y3) --- (x4,y4) 

Đối với mỗi điểm, bạn muốn làm các hoạt động ma trận sau:

|m11 m21 dx| |xI| |xM| 
|m12 m22 dy| X |yI| = |yM| 
| 0 0 1| | 1| | 1| 

Tám phương trình, sáu biến (nhớ rằng các phần tử ma trận là các biến, phần còn lại là hằng số - đầu vào của chúng ta). Có thể không thể giải quyết được. Bây giờ nó chỉ là một vấn đề suy luận (hoặc googling, hoặc yêu cầu trong Math.SE ...) và thực hiện các công thức cho mỗi tham số ...

Cập nhật 2: Mặc dù tôi không có bằng chứng cứng về điều đó , Tôi tin rằng không thể làm những gì bạn muốn với setTransform. Nhìn vào cách GIMP thực hiện với công cụ "phối cảnh" của nó, cần phải thay đổi hàng thứ ba của ma trận biến đổi để chuyển đổi hình ảnh của bạn thành một đa giác tùy ý. Và API Canvas dường như không cung cấp phương tiện cho điều đó (thường chỉ hỗ trợ chuyển đổi affine: dịch, xoay, chia tỷ lệ, cắt hoặc kết hợp ở trên).

Trích dẫn this post trên 2D biến:

CSS3 2D-Transforms chỉ có thể chuyển đổi các khối thành hình bình hành. Ví dụ, không thể chuyển đổi một khối thành hình dạng này: [Hình dạng không đều] Để thực hiện việc này, người ta phải sử dụng CSS3 3D Transforms. Đây là lý do tại sao Bộ Xây dựng Ma trận chỉ có ba điểm điều khiển để kéo xung quanh, không phải bốn điểm.

Có kế hoạch cho CSS 3D Transforms, nhưng không phải duy nhất tôi không biết làm thế nào rộng rãi được hỗ trợ có nghĩa là, I dunno nếu các yếu tố canvas (với bối cảnh 2d, đó là - WebGL là một câu chuyện khác) bao giờ sẽ hỗ trợ nó. Tóm lại, bạn không thể làm những gì bạn muốn thông qua bất kỳ phương tiện nào tôi biết.

Answer 2

Bạn có thể điền một đa giác với một hình ảnh sử dụng context.clip():

//create an image 
    var img = new Image(); 
    img.src = 'imgPath/image.png' 

    //draw the image when loaded 
    img.onload = function(){ 
     var ctx = canvas.getContext("2d"); 
     ctx.save(); 

     //define the polygon 
     ctx.beginPath(); 
     ctx.moveTo(x1,y1); 
     ctx.lineTo(x2,y2); 
     ctx.lineTo(x3,y3); 
     ctx.closePath(); 

     //draw the image 
     ctx.clip(); 
     ctx.drawImage(img, leftMostXCoor, highestYCoor, polyWidth, polyHeight); 

     //fill and stroke are still available for overlays and borders 
     ctx.fill(); 
     ctx.stroke(); 

     ctx.restore(); 
    }