加载页面时使用JavaScript/jQuery的图像的默认多边形区域
我有一张图片,我希望加载的图片的多角形区域如下: 我在网上得到了一份参考表格: 但它只发生在我多次点击图像时,但我的要求是,如果我加载页面,默认情况下,页面上的节点很少,我可以通过代码增加或减少,或者更改轴 小提琴中的js代码:加载页面时使用JavaScript/jQuery的图像的默认多边形区域,javascript,jquery,canvas,polygon,Javascript,Jquery,Canvas,Polygon,我有一张图片,我希望加载的图片的多角形区域如下: 我在网上得到了一份参考表格: 但它只发生在我多次点击图像时,但我的要求是,如果我加载页面,默认情况下,页面上的节点很少,我可以通过代码增加或减少,或者更改轴 小提琴中的js代码: var canvasDiv = document.getElementById('canvasDiv'); canvas = document.createElement('canvas'); canvas.setAttribute('width', 500);
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 : 500, height: 500});
context.drawImage(imageObj,0,0);
};
imageObj.src = 'img/1370800.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 = 500; // 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 width=" 500" height="500" src="img/1370800.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();
});
这需要在画布内操纵对象。。。我建议使用createjs 给你。。。应用程序的更新版本:
var canvasDiv = document.getElementById('canvasDiv');
canvas = document.createElement('canvas');
canvas.setAttribute('width', 500);
canvas.setAttribute('height', 500);
canvas.setAttribute('id', 'canvas');
$(canvasDiv).prepend(canvas);
$(canvas).click(onClick);
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
});
stage = new createjs.Stage("canvas");
var img = new createjs.Bitmap(imageObj);
stage.addChild(img);
points = new createjs.Container();
stage.mouseEnabled = true;
stage.addChild(points);
stage.update();
};
imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
var clickX = new Array();
var clickY = new Array();
var paint, stage, points;
function drag(evt) {
evt.target.x = evt.stageX;
evt.target.y = evt.stageY;
stage.update();
}
function onClick(e) {
var mouseX = e.clientX;
var mouseY = e.clientY;
clickX.push(mouseX);
clickY.push(mouseY);
redraw();
}
function redraw() {
points.removeAllChildren();
for (var i = 0; i < clickX.length; i++) {
var point = new createjs.Shape();
point.graphics.beginFill('#df4b26').drawCircle(0, 0, 6);
point.x = clickX[i];
point.y = clickY[i];
points.addChild(point);
point.on("pressmove", drag);
}
stage.update();
}
$('#generate').click(function () {
$(".clipParent").empty();
var resImg = $(imageObj).clone();
$(".clipParent").prepend(resImg);
var arr = [];
for (var i = 0; i < clickX.length; i++) {
arr.push(clickX[i]);
arr.push(clickY[i]);
}
resImg.attr("data-polyclip", arr.join(", "));
clickX = [];
clickY = [];
redraw();
polyClip.init();
});