svg color inside fabricjs canvas not changing - javascript

i'm trying to change svg path's fill which is inside fabricjs canvas.
using this function
function changeColor(material) {
console.log(svgGroup[0].fill)
console.log(material);
if (material == 'base') {
svgGroup[0].fill = '#000000';
console.log(svgGroup[0].fill)
}
texture.needsUpdate = true;
object.children[0].material = textureMaterial;
canvas.renderAll();
}
but it doesn't updated automatically
anyone have any idea why? any thought would be helpful

i found the solution, the problem iwas i didn't set the color correctly. instead of doing this
svgGroup[0].fill = '#000000';
it should've use this
svgGroup._objects.forEach(obj => {
if (obj.id == material) {
obj.set('fill', color);
}
});
that way it is rendered when renderAll() is called

Related

Get width of selected layer with Sketch API

Writing my first Sketch plugin and I'm trying to get the width of a selected layer.
export default function(context) {
const selectedLayers = context.selection;
const selectedCount = selectedLayers.length;
if (selectedCount === 0) {
context.document.showMessage('Please select a circle shape layer');
} else {
selectedLayers.forEach(function (layer) {
log(layer.frame.width);
})
}
}
The log shows:
<MOUndefined: 0x6040000048f0>
The documentation states that the frame of the layer is a Rectangle and that a Rectangle has x, y, width and height properties. So I don't understand why I'm getting undefined.
I tried log(layer.frame) and I do get:
<MOMethod: 0x60400263b420 : target=0x7f9dbf5b8ee0<MSShapeGroup: 0x7f9dbf5b8ee0> Oval (691540C6-7B18-4752-9BA6-A3A298754C9A), selector=frame>
So I'm targetting it right.
try with
layer.frame().width()

Canvas fabric.js renderAll makes white screen

I have made photo editing web page and have this issue, serious.
I have made undo/redo code as follows.
state = Stack.pop();
canvas.fabric.loadFromJSON(state, function() {
canvas.fabric.renderAll();
});
And clearing the full screen with white color process is shown and that will push away lots of people.
I can remove this making another canvas but if then have to change whole structure of the webpage.
Is there any function in fabric.js to make it easily?
ex) display-previous-while-rendering?
In the latest version fabricjs makes possible to do not make the canvas flash.
If you cannot use latest ( 2.0.0beta5 ) do the following:
fabric.StaticCanvas.prototype.clear = function () {
this._objects.length = 0;
this.backgroundImage = null;
this.overlayImage = null;
this.backgroundColor = '';
this.overlayColor = '';
if (this._hasITextHandlers) {
this.off('mouse:up', this._mouseUpITextHandler);
this._iTextInstances = null;
this._hasITextHandlers = false;
}
this.clearContext(this.contextContainer);
this.fire('canvas:cleared');
this.renderOnAddRemove && this.requestRenderAll();
return this;
};
Having the renderAll under this.renderOnAddRemove bool condition, will not make the canvas flash since the loadFromJson process set that boolean to false.

Hover on images in a canvas

I am trying to make a simple point and click game with canvas and i'd like to change the cursor to pointer when i hover on a drawn image and change it back to default when i hover off. So i was trying to make an onhover function for each object on my canvas. Is there any easy way to check if i hover over an image ?
My code looks something like this so far :
//heres an object for my canvas
var cupboard = {
x:200,
y:320,
h:300,
w:180,
imgUrl:"data\\cbc.png",
type:2,
status:'c',
onhover: function(e,canvas)
{
if((e.x >= this.x && e.x <= this.x+this.w) &&(e.y >= this.y && e.y <=
this.y+this.h)){
canvas.style.cursor = "pointer";
}
else
{
canvas.style.cursor = "default";
}
}
//i use an array for these objects
room1[cupboard,silverkey];
//heres the event listener
document.getElementById("mainCanvas").addEventListener("mousemove",
function(evt){
var mousepos = getMousePos(document.getElementById("mainCanvas"),evt);
for(i in room1)
{
(function(m){
room1[m].onhover(mousepos,document.getElementById("mainCanvas"));
})(i);
}
});
I had a look online for a solution and cam across this page :
Add onclick and onmouseover to canvas element
markE's answer is very long but could be useful for you, especially the part about '.isPointInside'.
Hope this helps!

Can I change javascript draw function to an image?

I found a gamecode on github [https://github.com/maryrosecook/retro-games] today. I want to edit it and use png images instead of the draw function, is there anyway I can do it?
Thank you.
BodyBlock.prototype = {
draw: function(screen) {
drawRect(screen, this, "black");
}
drawRect() was custom, from scratch function.
var drawRect = function(screen, body, color) {
screen.fillStyle = color;
screen.fillRect();
};
What you are looking for is standard javascript canvas Method.
http://www.w3schools.com/tags/canvas_fillrect.asp
Tutorial : http://www.html5canvastutorials.com/tutorials/html5-canvas-lines/

Javascript Extensibility

I've a script, which manipulates with canvas. I call it like this:
namespace.module.do(canvas, paramString);
I'd like to move the call to the canvas itself, so it'll somewhat similar to:
<canvas namespace.module.dobehavior=paramString />
Can I do it with JS and if not how close can I get to it?
The canvas is a DOM object, so you could attach functions to it. In your example:
document.getElementsByTagName("canvas")[0].namespace.module.dobehavior = function(paramString) { ... code ... };
(obviously, document.getElementsByTagName("canvas")[0].namespace and document.getElementsByTagName("canvas")[0].namespace.module would need to be an object, so you might need to do
document.getElementsByTagName("canvas")[0].namespace = { module : { dobehavior : function(paramString) { ... } } };
And then if you had the canvas element somewhere (possibly also through var canvas = document.getElementsByTagName("canvas")[0];) you could do
canvas.namespace.module.dobehavior("someString");
Is that what you mean?
In JQuery
$(function() {
$("canvas[ns.mod.colorBehavior]") {
var color = $(this).attr("ns.mod.colorBehavior");
if (color == "red") {
var context = this.getContext('2d');
context.fillStyle = "#ff0000";
context.fillRect(0,0,width,height);
}
}
}
Where width and heigh are the width and height of your canvas element (or a higher value like 10000).

Categories

Resources