Related
In the below Image I have three boxes in the canvas and there are three buttons at the bottom of the image. Whenever I click a button, the corresponding object in the canvas gets selected(i,e, when I click the green button, green rectangle in the canvas, gets selected).
My requirement is to highlight only the selected portion and other portion of the canvas should be grayed out. (Ex: If I click the green button green rectangle should be selected and other portion should be overlayed with a gray background).
Js Fiddle Link: https://jsfiddle.net/rnvs2hdk/1/
var canvas = new fabric.Canvas('c');
canvas.backgroundColor = 'yellow';
var li= []
canvas.renderAll();
fabric.Image.fromURL('http://fabricjs.com/assets/pug_small.jpg', function(myImg) {
var img1 = myImg.set({ left: 0, top: 0 ,width:400,height:500});
canvas.add(img1);
var green = new fabric.Rect({
left: 50,
top: 50,
width: 50,
height: 50,
fill: 'rgba(255,255,255,1)',
stroke: 'rgba(34,177,76,1)',
strokeWidth: 5,
name:"green"
});
var yellow = new fabric.Rect({
left: 150,
top: 50,
width: 50,
height: 50,
fill: 'rgba(255,255,255,1)',
stroke: 'rgba(255,255,0,1)',
strokeWidth: 5,
name:"yellow"
});
var red = new fabric.Rect({
left: 250,
top: 50,
width: 50,
height: 50,
fill: 'rgba(255,255,255,1)',
stroke: 'rgba(255,0,0,1)',
strokeWidth: 5,
name:"red"
});
canvas.add(green, yellow,red);
li.push(green);
li.push(yellow);
li.push(red);
li.some(v=>{
var btn = document.createElement("BUTTON"); // Create a <button> elem
btn.innerHTML = v.name;
btn.addEventListener('click',function(e){
var name = e.target
if(name.innerText == "green"){
canvas.setActiveObject(li[0]);
}
if(name.innerText == "yellow"){
canvas.setActiveObject(li[1]);
}
if(name.innerText == "red"){
canvas.setActiveObject(li[2]);
}
});// Insert text
document.body.appendChild(btn);
});
console.log(li);
});
Expected Result:(example)
Here's my solution. Using the after:render event, you can perform canvas draw actions over each frame after it is rendered. This approach has the benefit of avoiding having to create and destroy fabric objects as needed which is an expensive operation.
Be sure to call the .setCoords() method during actions like scaling and moving so that objects will update their position information while performing these actions.
var canvas = new fabric.Canvas('c');
canvas.backgroundColor = 'yellow';
var li = [];
canvas.renderAll();
fabric.Image.fromURL('http://fabricjs.com/assets/pug_small.jpg', function(myImg) {
var img1 = myImg.set({
left: 0,
top: 0,
width: 400,
height: 500
});
canvas.add(img1);
var green = new fabric.Rect({
left: 50,
top: 50,
width: 50,
height: 50,
fill: 'rgba(255,255,255,1)',
stroke: 'rgba(34,177,76,1)',
strokeWidth: 5,
name: "green",
hasRotatingPoint: false
});
var yellow = new fabric.Rect({
left: 150,
top: 50,
width: 50,
height: 50,
fill: 'rgba(255,255,255,1)',
stroke: 'rgba(255,255,0,1)',
strokeWidth: 5,
name: "yellow",
hasRotatingPoint: false
});
var red = new fabric.Rect({
left: 250,
top: 50,
width: 50,
height: 50,
fill: 'rgba(255,255,255,1)',
stroke: 'rgba(255,0,0,1)',
strokeWidth: 5,
name: "red",
hasRotatingPoint: false
});
canvas.add(green, yellow, red);
li.push(green);
li.push(yellow);
li.push(red);
li.some(v => {
var btn = document.createElement("BUTTON"); // Create a <button> elem
btn.innerHTML = v.name;
btn.addEventListener('click', function(e) {
var name = e.target
if (name.innerText == "green") {
canvas.setActiveObject(li[0]);
}
if (name.innerText == "yellow") {
canvas.setActiveObject(li[1]);
}
if (name.innerText == "red") {
canvas.setActiveObject(li[2]);
}
}); // Insert text
document.body.appendChild(btn);
});
console.log(li);
});
canvas.on({
'object:moving': function(e) {
//makes objects update their coordinates while being moved
e.target.setCoords();
},
'object:scaling': function(e) {
//makes objects update their coordinates while being scaled
e.target.setCoords();
}
});
//the after:render event allows you to perform a draw function on each frame after it is rendered
canvas.on('after:render', function() {
var ctx = canvas.contextContainer,
obj = canvas.getActiveObject();
if (obj) {
//set the fill color of the overlay
ctx.fillStyle = "rgba(0, 0, 0, 0.3)";
var bound = obj.getBoundingRect();
ctx.beginPath();
//draw rectangle to the left of the selection
ctx.rect(0, 0, bound.left, canvas.height);
//draw rectangle to the right of the selection
ctx.rect(bound.left + bound.width, 0, canvas.width - bound.left - bound.width, canvas.height);
//draw rectangle above the selection
ctx.rect(bound.left, 0, bound.width, bound.top);
//draw rectangle below the selection
ctx.rect(bound.left, bound.top + bound.height, bound.width, canvas.height - bound.top - bound.height)
ctx.fill();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<canvas id="c" width="400" height="400"></canvas>
<div id="bt"></div>
I have Accomplished this creating 4 more rectangles around the actual rectangle. I have grayed out the outer rectangles so it gives the overlay effect. Also, I will delete all the rectangles before creating a new one.
let blankColor = "rgba(0,0,0,0)";
let grayOut = "rgba(0,0,0,0.4)";
let rect = createRect(x, y, width, height, 1, blankColor);
let rect1 = createRect(0, 0, getViewPortDimensions()[0], y, 0, grayOut);
let rect2 = createRect(0, y + height, getViewPortDimensions()[0], getViewPortDimensions()[1] - (y + height), 0, grayOut);
let rect3 = createRect(0, y, x, height, 0, grayOut);
let rect4 = createRect(x + width, y, getViewPortDimensions()[0] - (x + width), height, 0, grayOut);
state.canvas.add(rect, rect1, rect2, rect3, rect4);
Deleting the already drawn rectangle:
state.canvas.forEachObject((o, index) => {
if (index != 0) {
state.canvas.remove(o);
}
})
I would like to know if there's a way to draw an image into a canvas using a CSS3 Matrix3D transformation. The used context is a 2D one used to render stacked layers and an image layer transformed with a matrix3D above it (because I didn't manage to have it drawn in the canvas).
So basically what I want to achieve is to convert transform: matrix3d(0.87, 0, 0.5, -0.00025, 0, 1, 0, 0, -0.5, 0, 0.87, 0, 0, 550, 0, 1) into a drawing canvas method in a 2D context.
Is it possible ? For now, I'm quite fine with the CSS3 layer above the canvas but the application I'm developing will have to export the canvas to an actual image file (meant to be sent to the user).
Here's a snippet illustrating my current way of displaying the transformed layer. So the goal here is to actually render the "placeholder" transformed image into the canvas
#canvas {
background: tomato;
height: 100vh;
width: 100vw;
position: relative;
}
.viewport .transformed-layer {
height: 72%;
position: absolute;
left: 35%;
top: calc(21% - 550px);
-webkit-transform: rotate(-1.5deg) matrix3d(0.87, 0, 0.5, -0.00025, 0, 1, 0, 0, -0.5, 0, 0.87, 0, 0, 550, 0, 1);
transform: rotate(-1.5deg) matrix3d(0.87, 0, 0.5, -0.00025, 0, 1, 0, 0, -0.5, 0, 0.87, 0, 0, 550, 0, 1);
opacity: .9;
}
<div class='viewport'>
<div id='canvas'>This is a div simulating the canvas element with some drawed image</div>
<img class='transformed-layer' src='http://via.placeholder.com/300x300' />
</div>
There is one heck of hack that may not fit any future-readers requirements, but which may do for you:
The canvas can draw SVG images, and SVG images can be transformed via CSS.
So you could convert your current canvas to a dataURL, set this dataURL as the href of an SVGImage element, on which you would apply the CSSTransform, before exporting all this as an svg image that you'll draw back on a canvas.
Here is a rough proof of concept:
function getTransformedCanvas(canvas, CSSTransform){
return new Promise(function(res, rej){
var dim = getTransformedDimensions(canvas, CSSTransform);
var xlinkNS = "http://www.w3.org/1999/xlink",
svgNS = 'http://www.w3.org/2000/svg';
var svg = document.createElementNS(svgNS, 'svg'),
defs = document.createElementNS(svgNS, 'defs'),
style = document.createElementNS(svgNS, 'style'),
image = document.createElementNS(svgNS, 'image');
image.setAttributeNS(xlinkNS, 'href', canvas.toDataURL());
image.setAttribute('width', canvas.width);
image.setAttribute('height', canvas.height);
style.innerHTML = 'image{transform:'+CSSTransform+';}';
svg.appendChild(defs);
defs.appendChild(style);
var rect = document.createElement('rect');
svg.appendChild(image);
svg.setAttribute('width', dim.width);
svg.setAttribute('height', dim.height);
var svgStr = new XMLSerializer().serializeToString(svg);
var img = new Image();
img.onload = function(){res(img)};
img.onerror = rej;
img.src = URL.createObjectURL(new Blob([svgStr], {type:'image/svg+xml'}));
});
}
function getTransformedDimensions(canvas, CSSTransform){
var orphan = !canvas.parentNode;
if(orphan) document.body.appendChild(canvas);
var oldTrans = getComputedStyle(canvas).transform;
canvas.style.transform = CSSTransform;
var rect = canvas.getBoundingClientRect();
canvas.style.transform = oldTrans;
if(orphan) document.body.removeChild(canvas);
return rect;
}
// create a simple checkerboard
var canvas = document.createElement('canvas');
canvas.width = canvas.height = 30;
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'orange';
ctx.fillRect(0,0,15, 15);
ctx.fillRect(15,15,15, 15);
var pattern = ctx.createPattern(canvas, 'repeat');
canvas.width = canvas.height = 300;
ctx.fillStyle = pattern;
ctx.fillRect(0,0,300,300);
getTransformedCanvas(canvas,
'translateY(-540px) rotate(-1.5deg) matrix3d(0.87, 0, 0.5, -0.00025, 0, 1, 0, 0, -0.5, 0, 0.87, 0, 0, 550, 0, 1)'
)
.then(function(img){
inScreen.width = img.width;
inScreen.height = img.height;
inScreen.getContext('2d').drawImage(img, 0,0);
})
.catch(console.error);
canvas {
border:1px solid;
}
<canvas id="inScreen"></canvas>
But note that old versions of IE did taint the canvas whenever an svg iamge was drawn on it...
>>> Jsfiddle
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(55,95,30,0,2*Math.PI);
ctx.stroke();
var canvas = document.getElementById('myCanvas'),
context = canvas.getContext('2d');
make_base();
function make_base()
{
base_image = new Image();
base_image.src='https://www.gravatar.com/avatar/4af2cdbaf02d97ba88d5d6daff94fbae/?default=&s=80';
base_image.onload = function(){
context.drawImage(base_image, 20, 20);
}
}
<canvas id="myCanvas"
width="236"
height="413"
style="border:1px solid #000000;
position:absolute;
top:66px;
left:22px;"></canvas>
I have try to put the image in to canvas instead my circle position.
but i don't know how to resize square image to circle with same size of my draw circle and put in to the same position.
What should i do?
You have to use clip for this.
Here is Codepen for this http://codepen.io/sam83045/pen/eBKRPr?editors=0010
And your edited javascript code is as follows :
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(55, 95, 30, 0, 2 * Math.PI);
ctx.clip();
ctx.stroke();
var canvas = document.getElementById('myCanvas'),
context = canvas.getContext('2d');
make_base();
function make_base() {
base_image = new Image();
base_image.src = 'https://www.gravatar.com/avatar/4af2cdbaf02d97ba88d5d6daff94fbae/?default=&s=80';
base_image.onload = function() {
context.drawImage(base_image, 16, 55);
}
}
window.onload=function(){
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
c.addEventListener("click",function(){
ctx.clearRect(0, 0, c.width, c.height);
var object = images.shift();
images.push(object);
create(ctx);
},false)
var loaded=0;
var error=0;
var images=new Array
(
{
image:null,
url:"https://www.gravatar.com/avatar/4af2cdbaf02d97ba88d5d6daff94fbae/?s=80",
expandW:0,
expandH:0,
clip:false,
visible:true,
shape:
{
x:0,
y:0,
rect:
{
w:30,
h:50
},
boundary:
function(){return {w:this.rect.w,h:this.rect.h,centerX:this.rect.w/2,centerY:this.rect.h/2};}
}
},
{
image:null,
url:"http://iconbug.com/data/7c/512/6e1cd685219a18b951b191ad04407324.png",
expandW:0,
expandH:0,
clip:true,
visible:true,
shape:
{
x:30,
y:30,
circle:
{
r:30
},
boundary:
function(){return {w:this.circle.r*2,h:this.circle.r*2,centerX:0,centerY:0};}
}
}
);
function loadImages(ctx)
{
for (var i=0;i<images.length;i++)
{
images[i].image= new Image();
images[i].image.src = images[i].url;
images[i].image.onerror=function(){
loaded++;
error++;
loadedText(images.length,loaded,error);
if(loaded===images.length)
{
create(ctx);
}
};
images[i].image.onload=function(){
loaded++;
loadedText(images.length,loaded,error);
if(loaded===images.length)
{
create(ctx);
}
};
}
}
function loadedText(sum,count,error)
{
if(error)
console.log((count-error)+" images loaded from "+count+"."+error+" images not loaded.");
else
console.log(count+" images loaded from "+count+".");
}
function create(ctx)
{
for (var i=0;i<images.length;i++)
{
ctx.save();
if(images[i].image !==null && images[i].visible)
{
var object=images[i];
var boundary=object.shape.boundary();
var image=object.image;
var shape=object.shape;
if(shape.circle)
{
drawCircle(
shape.x,
shape.y,
shape.circle.r,
ctx,
object.clip
);
}
if(shape.rect)
{
drawRect(
shape.x,
shape.y,
shape.rect.w,
shape.rect.h,
ctx,
object.clip
);
}
if(!object.clip)
{
image.width=image.width*(boundary.w/image.width);
image.height=image.height*(boundary.h/image.height);
}
image.width=image.width+object.expandW;
image.height=image.height+object.expandH;
var x=(shape.x+boundary.centerX)-image.width/2;
var y=(shape.y+boundary.centerY)-image.height/2;
ctx.drawImage(image, x, y,image.width,image.height);
}
ctx.restore();
}
}
function drawCircle(x,y,r,ctx,clip){
ctx.beginPath();
ctx.arc(x, y, r, 0, 2 * Math.PI);
if(clip)
{
ctx.clip();
}
ctx.stroke();
}
function drawRect(x,y,w,h,ctx,clip){
ctx.beginPath();
ctx.rect(x, y, w, h);
if(clip)
{
ctx.clip();
}
ctx.stroke();
}
loadImages(ctx);
};
Add multiple images.
If you do not have many pictures, it is easier to load them at once.
On console (F12) you can see load progress.
Every image has is own options.
image- it will populated latter
url- address
expandW, expandH- you can manipulate Picture after clipping.
clip- do we make picture size of image or we clip shape from image.
visible- do we show image.
shape-clipping shape
shape options
x,y-position of shape
rect or circle type of shape.
boundary- we get shape centre position and shape with and height. (circle with and height is actually double of radius).
with mouse click on canvas you can cycle through all loaded pictures.
I were looking for a drawImage() alternative for fabric.js lib, so I've made a function:
function drawImage(img,sx,sy,swidth,sheight,x,y,width,height) {
return new fabric.Image(img, {
left: x,
top: y,
width: width,
height: height,
id: "rhino",
clipTo: function (ctx) {
ctx.rect(sx,sy,swidth,sheight);
}
});
}
var imgElement = new Image();
imgElement.onload = function() {
var imgInstance = drawImage(imgElement, 33, 71, 104, 124, 21, 20, 87, 104);
canvas.add(imgInstance);
};
imgElement.src = "https://mdn.mozillademos.org/files/5397/rhino.jpg";
The result needs to be:
But I don't get nothing with my custom function. Where is the problem?
Codepen: http://codepen.io/anon/pen/RaxRqZ
I do not really know what you want to achieve, but using clipTo is not my advice, both for performance and complexity reasons.
Draw on a temp canvas the portion of image you need, then use this temp canvas a source for your fabricJS image.
var canvas = new fabric.Canvas('c');
function drawImage(img,sx,sy,swidth,sheight,x,y,width,height) {
var tmpc = document.createElement('canvas');
tmpc.width = swidth;
tmpc.height = sheight;
ctx = tmpc.getContext("2d");
ctx.drawImage(img,-sx,-sy);
return new fabric.Image(tmpc, {
left: x,
top: y,
width: width,
height: height,
id: "rhino"
});
}
var imgElement = new Image();
imgElement.onload = function() {
var imgInstance = drawImage(imgElement, 33, 71, 104, 124, 21, 20, 87, 104);
canvas.add(imgInstance);
};
imgElement.src = "https://mdn.mozillademos.org/files/5397/rhino.jpg";
<script src="http://www.deltalink.it/andreab/fabric/fabric.js"></script>
<canvas id="c" width="500", height="500"></canvas>
Here you can find solution,
var canvas = ctx = '';
canvas = new fabric.Canvas('canvas');
canvas.selection = false;
ctx = canvas.getContext('2d');
function drawImage(imgPath, x, y, width, height)
{
fabric.Image.fromURL(imgPath, function(img) {
img.set({
left: x,
top: y,
width: width,
height: height,
id: "rhino",
clipTo: function (ctx) {
ctx.rect(5,5,50,50);
}
});
canvas.add(img).renderAll().setActiveObject(img);
});
}
var imgElement = new Image();
imgElement.src = "https://mdn.mozillademos.org/files/5397/rhino.jpg";
imgElement.onload = function() {
drawImage(imgElement.src, 50, 50, 100, 100);
}
https://codepen.io/mullainathan/pen/wGpzvY
How can I place a blue box between red and green one using this function?
I need to achieve this effect.
Here's a Codepen.
HTML
<canvas id="canvas">
</canvas>
JS
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
window.onload = draw;
green = new Image;
green.src = 'http://www.thebouncingbox.com/images/thumbnail/produkte/large/California-Sunbounce-meterware-green-box.jpg';
red = new Image;
red.src = 'http://www.front-porch-ideas-and-more.com/image-files/color-red.jpg';
blue = new Image;
blue.src = 'http://s3.amazonaws.com/colorcombos-images/colors/000066.png';
function draw() {
ctx.drawImage(green, 0, 0, 200, 200);
ctx.drawImage(red, 80, 50, 120, 100);
ctx.drawImage(blue, 60, 30, 100, 100);
}
You need to listen onload event of the image before drawing it. To have images over image, series operation will help!
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
window.onload = draw1;
function draw1() {
var green = new Image();
green.onload = function() {
ctx.drawImage(green, 0, 0, 200, 200);
draw2();
};
green.src = 'http://www.thebouncingbox.com/images/thumbnail/produkte/large/California-Sunbounce-meterware-green-box.jpg';
}
function draw2() {
var blue = new Image;
blue.onload = function() {
ctx.drawImage(blue, 50, 50, 100, 100);
draw3();
};
blue.src = 'http://s3.amazonaws.com/colorcombos-images/colors/000066.png';
}
function draw3() {
var red = new Image();
red.onload = function() {
ctx.drawImage(red, 100, 100, 100, 100);
};
red.src = 'http://www.front-porch-ideas-and-more.com/image-files/color-red.jpg';
}
<canvas id="canvas" width="200" height="200"></canvas>
Why not change the order you draw them?
function draw() {
ctx.drawImage(green, 0, 0, 200, 200);
ctx.drawImage(blue, 60, 30, 100, 100);
ctx.drawImage(red, 80, 50, 120, 100);
}