Kullanıcılarım, yükledikleri bir görüntünün belirli bir çokgen (6-8 noktalı köşe noktaları arasında) alanını seçmelerine izin vermek istiyorum. Bunu HTML5 & JS kullanarak nasıl yapıyorum? Bulduğum tek kütüphane, tamamen dikdörtgen seçimine izin veriyor:JavaScript/jQuery'yi kullanarak görüntünün çokgen bir alanı nasıl seçilir?
9
A
cevap
10
Zaten ihtiyacınız olan şeylerin bir bölümünü içeren bir kütüphane var: polyclip.js, by Zoltan Dulac Kullanıcının noktaları seçmesine izin veren bir UI oluşturabilir, ardından verileri kütüphaneye ve bitti.
DÜZENLEME: İşte bir jsFiddle demonstration. Orijinal görüntüdeki noktaları seçmek için tıklayın ve kırpılmış bir versiyon oluşturmak için Oluştur düğmesine basın.
HTML:
<div id="mainContent">
<div id="canvasDiv">
<br/>
<button id="generate" type="button">Generate
</button>
</div>
<h1>Result:</h1>
<div class="clipParent" style="float:left;">
</div>
</div>
JS:
var canvasDiv = document.getElementById('canvasDiv');
canvas = document.createElement('canvas');
canvas.setAttribute('width', 500);
canvas.setAttribute('height', 500);
canvas.setAttribute('id', 'canvas');
$(canvasDiv).prepend(canvas);
if(typeof G_vmlCanvasManager != 'undefined') {
canvas = G_vmlCanvasManager.initElement(canvas);
}
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function() {
$(canvas).attr({width : this.width, height: this.height});
context.drawImage(imageObj,0,0);
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var paint;
function addClick(x, y, dragging)
{
clickX.push(x);
clickY.push(y);
clickDrag.push(dragging);
}
function redraw(){
canvas.width = canvas.width; // Clears the canvas
context.drawImage(imageObj,0,0);
context.strokeStyle = "#df4b26";
context.lineJoin = "round";
context.lineWidth = 5;
for(var i=0; i < clickX.length; i++)
{
context.beginPath();
context.arc(clickX[i], clickY[i], 3, 0, 2 * Math.PI, false);
context.fillStyle = '#ffffff';
context.fill();
context.lineWidth = 5;
context.stroke();
}
}
$('#canvas').click(function(e){
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
redraw();
});
$('#generate').click(function(){
$(".clipParent").empty();
$(".clipParent").prepend('<img src="http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg" id="genimg" />');
var arr = [];
for(var i=0; i < clickX.length; i++){
arr.push(clickX[i]);
arr.push(clickY[i]);
}
$("#genimg")[0].setAttribute("data-polyclip",arr.join(", "));
clickX=[];
clickY=[];
redraw();
polyClip.init();
});
+0
harika çok teşekkürler! – user1198133
0
Bir tuval etiketi üzerinde resim yüklemek olabilir ve o zaman tüm bu tuval üzerine mi çizim yapabilirsiniz.
Muhtemelen, kullanıcının tıkladığı noktalar arasında çizgiler çizerek yazmanız gerekir. Bu çok zor değil ama probleminize özel bir düzine çizgi. Poligonunuzla ne yapmak istediğinize bağlı olabilir. –