i have one image i want ploygonal area of image on load like this :
i got one reference form internet : http://jsfiddle.net/MFELx/
but its happening only when i click on the image multiple time but my requirement is if i load the page few node by default come on the page and that i can increse or decrease by code or change the axis..
js code in fiddle :
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();
});
This requires object manipulation inside canvas... I would suggest to use createjs.
Here you go... An updated version of your app ( fiddle ) :
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();
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.