We Keep Coding

What is the property of object in fabricjs similar to css's overflow : hidden

I am trying to make fixed size text object using fabric js.
So I tried to set the text object's left, top, width and height but that width and height is changed after entering text.
I want to hide all the overflow part.
var canvas = new fabric.Canvas('c');
canvas.setHeight(300);
canvas.setWidth(500);
canvas.add(new fabric.Text('Tap and Type', {
left: 50,
top: 100,
width: 300,
height: 200,
fontFamily: 'arial black',
fill: '#333',
fontSize: 50
}));
Is there anyone who have built text object similar to html textarea using fabric js?
I tried to find on google but not found.
Can it be done easily using fabric text object attribute?
Jsfiddle : https://jsfiddle.net/Lvfpq57h/117/

I think your problem is not solved as simple attribute of text object. Please see reference issue. https://github.com/kangax/fabric.js/issues/187
And here's something helpful. http://jsfiddle.net/3j352toh/19/
Here redefined fabric.Textbox.prototype._wrapLine to format the text as you want.
CODE:
fabric.Textbox.prototype._wrapLine = function(ctx, text, lineIndex) {
var lineWidth = 0,
lines = [],
line = '',
words = text.split(' '),
word = '',
letter = '',
offset = 0,
infix = ' ',
wordWidth = 0,
infixWidth = 0,
letterWidth = 0,
largestWordWidth = 0;
for (var i = 0; i < words.length; i++) {
word = words[i];
wordWidth = this._measureText(ctx, word, lineIndex, offset);
lineWidth += infixWidth;
// Break Words if wordWidth is greater than textbox width
if (this.breakWords && wordWidth > this.width) {
line += infix;
var wordLetters = word.split('');
while (wordLetters.length) {
letterWidth = this._getWidthOfChar(ctx, wordLetters[0], lineIndex, offset);
if (lineWidth + letterWidth > this.width) {
lines.push(line);
line = '';
lineWidth = 0;
}
line += wordLetters.shift();
offset++;
lineWidth += letterWidth;
}
word = '';
} else {
lineWidth += wordWidth;
}
if (lineWidth >= this.width && line !== '') {
lines.push(line);
line = '';
lineWidth = wordWidth;
}
if (line !== '' || i === 1) {
line += infix;
}
line += word;
offset += word.length;
infixWidth = this._measureText(ctx, infix, lineIndex, offset);
offset++;
// keep track of largest word
if (wordWidth > largestWordWidth && !this.breakWords) {
largestWordWidth = wordWidth;
}
}
i && lines.push(line);
if (largestWordWidth > this.dynamicMinWidth) {
this.dynamicMinWidth = largestWordWidth;
}
return lines.slice(0,this.cHeight/this.lineHeight/this.fontSize);
};
var _fabric = new fabric.Canvas('breaker');
_fabric.setBackgroundColor('#eee', _fabric.renderAll.bind(_fabric));
var curWidth = document.getElementById('breaker').width;
var curHeight = document.getElementById('breaker').height;
var longText="ABCDEFEFABCDEFEFABCDEFEFABCDEFEFABCDEFEFABCDEFEFABCDEFEFABCDEFEFABCDEFEFABCDEFEFABCDEFEF";
var breakingTextbox = new fabric.Textbox(longText,
{
width: curWidth / 2,
cHeight: curHeight/2,
left: curWidth / 2,
top: 180,
fill: '#333',
cursorWidth: 0.5,
originX: 'center',
originY: 'top',
textAlign: 'center',
breakWords: true
});
_fabric.add(breakingTextbox).setActiveObject(breakingTextbox);
breakingTextbox.enterEditing();

Just use the Textbox class instead of the Text.
It is editable by default and will wrap the text when not fitting the width. (it will not hide it as overflow:hidden but will work as a textarea where the text wraps)
canvas.add(new fabric.Text('Tap and Type', {
https://jsfiddle.net/gaby/Lvfpq57h/118/

kinetic js textPath: draggable didn't work

var stages = new Array() ;
var limites = new Array() ;
numStage=0;
r = {
'x':65,
'y':120,
'xwidth':335,
'yheight':210
};
limites.push(r);
stages[numStage] = new Kinetic.Stage({
container: 'cmg_canvas_'+numStage,
width: 450,
height: 450
});
//creation image
obj = new Image();
obj.src = 'http://i.imgur.com/zFZgKuS.jpg';
image = new Kinetic.Image({
image: obj,
width: 450,
height: 450
});
// add image to calque
layer = new Kinetic.Layer();
layer.add(image);
stages[numStage].add(layer); //add image to canvas
layer = new Kinetic.Layer();
//set limit x y h l
/*var rect = new Kinetic.Rect({
name: 'limite',
x: limites[numStage].x,
y: limites[numStage].y,
width: limites[numStage].xwidth,
height: limites[numStage].yheight,
stroke: 'black',
strokeWidth: 0.5
});*/
//layer.add(rect);// add to canvas
stages[numStage].add(layer);
$('.cmg_text').live('blur', function(){
idText = 'cmg_line0';
numStage = 0;
drawTextPath(numStage, idText,$(this).val(),50,22,numStage);
//text = getText(this).text;
});
function getSVG(x,y,w,verif) {
halfw = parseFloat((w/2).toFixed(2));
x1 = parseFloat((halfw/2).toFixed(2));
x2 = parseFloat(halfw + x1);
if(parseInt(verif))
{
y1 = parseFloat(y) * 2 +18;
y2 = parseFloat(y) * 2 +18;
}
else
{
y1 = -18;
y2 = -18;
}
str = 'M '+x+','+y+' C '+x1+','+y1+' '+x2+','+y2+' '+w+','+y;
return str;
}
function drawTextPath(numStage, textId,text,valueSlider, newFontSize,numStage){
//'M 0,115 C42,-18 126,-18 165,115';
//'M 0,115 C45,230 180,230 180,115';
var arcOnly = 0;
if(textId == 'cmg_line0')
{
console.log('limites[numStage].yheight/2'+limites[numStage].yheight/2);
console.log('limites[numStage].xwidth'+limites[numStage].xwidth);
svg = getSVG(0,valueSlider,valueSlider*6.3,0);
arcOnly = 0;
}
//alert(svg);
console.log(parseFloat(limites[numStage].y));
console.log(parseFloat(arcOnly));
console.log(parseFloat(limites[numStage].y - arcOnly));
var layer = new Kinetic.Layer({name:'textPathLayer',draggable:true});
var textpath = new Kinetic.TextPath({
name:'TextPath',
id: textId,
//x: 0,
//x: limites[numStage].x + limites[numStage].xwidth/2,
//y: 0,
//y: limites[numStage].y + limites[numStage].yheight/2,
x: limites[numStage].x ,
y: limites[numStage].y + limites[numStage].yheight/2,
fill: '#000',
fontSize: newFontSize,
fontFamily: 'Arial',
text: text,
//offsetX:0,
//offsetY:0,
draggable: true,
dragBoundFunc: function(pos){
p = textParams(this, pos);
return {x: p.newX, y: p.newY};
},
data: svg
});
//
layer.add(textpath);
stages[numStage].add(layer);
//layer.moveToTop();
//layer.draw();
//stages[0].draw();
}
<script src="http://cdnjs.cloudflare.com/ajax/libs/kineticjs/4.6.0/kinetic.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="cmg_canvas_0"></div>
<input type='text' class='cmg_text' />
I have to draw a draggable textpath with kineticjs, with text given by an input text, the action is triggered in blur.
I have a stage that contain 3 layers;
Layer for the background, and one layer for the textpath.
My problem that the draggable in the textpath is not working,
i tried to set the text layer in the top, but i didn't get it draggable.
This is my jsfiddle
I have a doubt of inner layer problem.
Thanks in advance.

How to add click event to each surface with specific effects, unable to add modifier

How to add click event to each surface with specific effects, I am not able to add modifier.
I tried below code but its not working. I am unable to add StateModifier to each surface.
Please help me to solve this problem as soon as possible.
var Engine = require("famous/core/Engine");
var Surface = require("famous/core/Surface");
var View = require("famous/core/View");
var Scrollview = require("famous/views/Scrollview");
var ContainerSurface = require("famous/surfaces/ContainerSurface");
var Transform = require('famous/core/Transform');
var StateModifier = require('famous/modifiers/StateModifier');
var context = Engine.createContext();
var myModifier = new StateModifier({
Transform: Transform.translate(0, 100, 1)
});
var surfaces1 = [];
var scrollers = [];
var scroll_h1_cont = new ContainerSurface({
size: [window.innerWidth, 100],
properties: {
overflow: 'hidden'
}
});
var scroll_h1 = new Scrollview({
direction: 0
});
scroll_h1.sequenceFrom(surfaces1);
scroll_h1_cont.add(scroll_h1);
scrollers.push(scroll_h1_cont);
for (var i = 0; i < 9; i++) {
var surface1 = new Surface({
content: "Surface: " + (i + 1),
size: [window.innerWidth / 3, 100],
properties: {
backgroundColor: "hsl(" + (i * 360 / 8) + ", 100%, 50%)",
lineHeight: "100px",
textAlign: "center"
}
});
surface1.pipe(scroll_h1);
surfaces1.push(surface1);
surface1.pipe(myModifier);
};
context.add(scroll_h1_cont);
Any suggestions?

This should at least get your scrollview working.
/* globals define */
define(function(require, exports, module) {
'use strict';
var Engine = require('famous/core/Engine');
var Surface = require('famous/core/Surface');
var Scrollview = require('famous/views/Scrollview');
var context = Engine.createContext();
var surfaces = [];
// create ScrollView
var scrollview = new Scrollview({
direction: 0
});
// create 100 surfaces and add them into array
for (var i = 0; i < 9; i++) {
var temp = new Surface({
content: 'Surface: ' + (i + 1),
size: [undefined, 100],
properties: {
backgroundColor: 'hsl(' + (i * 360 / 40) + ', 100%, 50%)',
lineHeight: '100px',
textAlign: 'center'
}
});
temp.pipe(scrollview);
surfaces.push(temp);
}
// add array of surfaces into ScrollView
scrollview.sequenceFrom(surfaces);
// add ScrollView into context
context.add(scrollview);
});

how to fix the position of mask in snapsvg.js?

Here is js code:
var cv = Snap('#cv').attr({height: '100%', width: '100%'});
var mskHide = cv.rect().attr({height: '100%', width: '100%', left:0, top:0, fill: '#666'});
var mskShow = cv.circle(200, 200, 150).attr({fill: '#fff'});
var mskG = cv.group(mskHide, mskShow);
var bg = cv.circle(200, 200, 150).attr({fill: '#aaa'});
var customImg = cv.image('http://placehold.it/500/990000').attr({mask: mskG});
//when I drag the customImg， I want mskG fixed position
customImg.drag();
You can preview here: http://codepen.io/rlog/pen/eKBlc
The question is: When I drag the customImg, how can I fix the position of mskG.
The mskG is no need move whit costomImg
this example is what I want: http://codepen.io/rlog/pen/bAImu
Thanks!

You could basically do what you have in the 2nd codepen.
var cv = Snap('#cv').attr({height: '100%', width: '100%'});
var mskHide = cv.rect().attr({height: '100%', width: '100%', left:0, top:0, fill: '#666'});
var mskShow = cv.circle(200, 200, 150).attr({fill: '#fff'});
var mskG = cv.group(mskHide, mskShow);
var bg = cv.circle(200, 200, 150).attr({fill: '#aaa'});
var customImg = cv.image('http://placehold.it/500/990000').attr({mask: mskG });
customImg.drag( myDrag );
function myDrag(dx,dy,x,y) {
customImg.attr({ x: dx, y: dy })
}
codepen
If you want a different drag from the example shown to include stored start drag location, you would amend it something like the following...
customImg.attr({ x: 0, y: 0})
var move = function(dx,dy) {
this.attr({
x: +this.data('ox') + +dx,
y: +this.data('oy') + +dy
})
}
var start = function(x,y) {
this.data('ox', this.attr('x'));
this.data('oy', this.attr('y'));
}
var end = function(x,y) {}
customImg.drag( move, start, end )
codepen

using canvas kinetic in html5 to draw many text and edit them

When I click the text on a card, I want to be able to edit the text like this website:
http://www.vistaprint.com/vp/ns/studio3.aspx?pf_id=064&combo_id=120585&free_studio_gallery=true&referer=http%3a%2f%2fwww.vistaprint.com%2fvp%2fns%2fdefault.aspx%3fdr%3d1%26rd%3d1%26GNF%3d0%26GP%3d5%252f19%252f2012%2b12%253a36%253a37%2bAM%26GPS%3d2448654652%26GNF%3d1%26GPLSID%3d&rd=1
Here is my code:
$(document).ready(function () {
var Total_layers = 0;
var Text = {};
/*set up stage for drawing image*/
var stage = new Kinetic.Stage({
container: "container",
width: 600,
height: 400
});
// var Layer = {};
/*create a layer object for placing text image over it and place it over the stage*/
var layer = new Kinetic.Layer();
//Layer[Total_layers]
/*Text Property*/
var New_Text = "Company Name";
var Text_Font = "Arial";
var Text_Color = "Black";
var Text_Size = "30";
var Text_Pos_X = 200;
var Text_Pos_y = 100;
var Selected_Text = new Kinetic.Text({});
var current_layer = 0;
// var text_selected = 1;
/*Add event for them*/
//var formElement = document.getElementById("New Text");
// formElement.addEventListener('change', Text_Changed, false);
var formElement = document.getElementById("selectFontSize");
formElement.addEventListener('change', Text_Size_Changed, false);
/*This Function will be Executed when the Size of the Text in consideration is changed*/
function Text_Size_Changed(e) {
var target = e.target;
Text_Size = target.value;
Text_Pos_X = 200; //Text[Total_layers].x;
Text_Pos_Y = 100; //Text[Total_layers].y;
//DeleteLayer(Total_layers);
layer.remove(Selected_Text);
Draw_text(Total_layers);
}
/*Function to swap the Kinetic Text object and get the selected Text object to The Top*/
function swap_layers(Selected_text) {
var temp = new Kinetic.Text({});
for (var i = 1; i <= Total_layers; i++) {
if (Text[i] == Selected_text) {
temp = Text[i];
Text[i] = Text[Total_layers];
Text[Total_layers] = temp;
break;
}
}
}
/*Add different Events to the Text objects once They are instantiated*/
function add_events(dest_Text) {
dest_Text.on("mouseover", function () {
document.body.style.cursor = "pointer";
});
dest_Text.on("mouseout", function () {
document.body.style.cursor = "default";
});
dest_Text.on("click", function () {
$("#selectFontSize").change(function () {
dest_Text.setFontSize($("#selectFontSize").val());
layer.draw(); // vì gọi layer.draw nên tất cả text trong layer đó đều dc vẽ lại
});
$("#selectFontFamily").change(function () {
swap_layers(dest_Text);
//dest_Text.setFontFamily($("#selectFontFamily").val());
//layer.draw();
});
});
}
/*Draw the Text over the layer depening upon the Text_object_Number*/
function Draw_text(Text_object_Number) {
/*Set the Properties of the Topmost object that is been modified and which will be added to the layer*/
Text[Text_object_Number] = new Kinetic.Text({
x: Text_Pos_X,
y: Text_Pos_Y,
text: New_Text,
fontSize: Text_Size,
fontFamily: Text_Font,
textFill: Text_Color,
align: "center",
verticalAlign: "middle",
draggable: "true"
});
/*Adds all the Text objects onto the layer and adds the events to every Text object */
//for (var i = 1; i <= Text_object_Number; i++) {
layer.add(Text[Text_object_Number]);
add_events(Text[Text_object_Number]);
//}
stage.add(layer);
}
$("#add_text").click(function () {
Total_layers++;
Text[Total_layers] = new Kinetic.Text({
x: Text_Pos_X,
y: Text_Pos_y,
text: New_Text,
fontSize: 30,
fontFamily: Text_Font,
textFill: Text_Color,
align: "center",
verticalAlign: "middle",
draggable: "true"
});
add_events(Text[Total_layers]);
layer.add(Text[Total_layers]);
stage.add(layer);
});
/*Adding an image to the present Context*/
var imageObj = new Image();
//alert("abc");
imageObj.onload = function () {
var T_shirt = new Kinetic.Image({
x: 60,
y: 0,
image: imageObj,
width: 550,
height: 400,
name: "image"
});
layer.add(T_shirt);
stage.add(layer);
}
imageObj.src = "../../Content/Image/imagepreview1.jpg";
});
I have tried many ways, but I still can't resolve this problem.
How can I do this by using canvas kineticjs in html5?

The very best solution imho is to use a simple JavaScript prompt:
myText.on('click', function(evt) {
this.setText(prompt('New Text:'));
layer.draw(); //redraw the layer containing the textfield
});
See my answer in this thread: editable Text option in kinetic js

You can't edit the text directly on the canvas, but what you can do is change it with events. So what you need is an input form that is created next to the canvas, and you can read from the form using javascript.
<input type=text id=changeText/>
this way when you click on some text a new input tag will appear and you can type in it and the text inside of the canvas will change as you type.
mytext.on('click', function(){ ... create new input element at the side ... });
//add some jQuery
$('#changeText').onchange( mytext.setText($('$changeText').val()));