CODEWITHSUNDEEP
javascripthtmlsvgsvg.js
Bejuco
Bejuco

Reputation: 145

Clear and re-draw using svg.js

I want to draw some elements using svg.js then clear the canvas and draw new elements. I'm using draw.clear() but when I re-draw the elements, they aren't visible. Is this approach correct or am I missing something? I also tried remove().

var width = 500;
var height = 500;

var pos_x = 0;
var pos_y = 0;

var texto = [];
var grupo = [];
var rect = [];
var clip = [];
var random_rotation = [];

var latino = 'ABCDEFGHIJKLMNOPQRSTUVXYZ'.split('');
var cirilico = 'АБВГДЕЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЬЮЯ'.split('');
var hebreo = 'אבגדהוזיךכל   םמןנסעףפפצקחט   '.split('');
var griego = 'ΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨ'.split('');
var arabe = 'ابتثجحخدذرزسشصضطظعغفقكلمنهويةءأإ'.split('');
var coreano = 'ㅏㅑㅓㅕㅗㅛㅜㅠㅡㅣㅐㅒㅔㅖㅘㅙㅚㅝㅞㅟㅢㄱㄴㄷㄹㅁㅂㅅㅇㅈㅊㅋㅌㅍㅎㄲㄸㅃㅆㅉㄳㄵㄶㄺㄻㄿㄽㄾㄿㅀㅄ'.split('');
var glagolitico = 'ⰀⰁⰂⰃⰄⰅⰆⰇⰈⰉⰊⰋⰌⰍⰎⰏⰐⰑⰒⰓⰔⰕⰖⰗⰘⰙⰚⰛⰜⰝⰞⰟⰠⰡⰢⰣⰤⰥⰦⰧⰨⰩⰪⰫⰬⰭⰮ'.split('');
var hiragana = 'あかさたなはまやらわがざだばぱいきしちにひみり(ゐ)ぎじぢびぴうくすつぬふむゆるぐずづぶぷえけせてねへめれ(ゑ)げぜでべぺおこそとのほもよろをごぞどぼぽ'.split('');
var katakana = 'アカサタナハマヤラワガザダバパヴァイキシチニヒミリ(ヰ)ギジヂビピヴィウクスツヌフムユルグズヅブプヴエケセテネヘメレ(ヱ)ゲゼデベペヴェオコソトノホモヨロヲゴゾドボポヴォ'.split('');

var sistemas = [latino, cirilico, hebreo, griego, arabe, coreano, glagolitico, hiragana, katakana];

var alfabeto = [];
var letra = [];

var draw = SVG().addTo('.container').size(width, height).attr({id: 'svg'}); 

function getRndInteger(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function getRndFloat(min, max) {
  return (Math.random() * (max - min)) + min;
}

// Create symbols
function grafema(){
    for (var i = 0; i <= 3; i++){

        alfabeto[i] = getRndInteger(0, sistemas.length - 1);

        letra[i] = sistemas[alfabeto[i]][getRndInteger(0, sistemas[alfabeto[i]].length - 1)];

        random_rotation[i] = getRndInteger(0, 360);

        texto[i] = draw.text(letra[i])
                    .font({
                        family: 'Arial Unicode MS',
                        size: 500,
                        anchor: 'middle'
                    })
                    .transform({
                        translateX: width/2,
                        translateY: (height/2) * -1,
                        rotate: random_rotation[i],
                        scale: getRndFloat(0.5, 0.6)
                    });

        grupo[i] = draw.group()
                    .attr({
                        id: 'letra ' + i
                    });

        grupo[i].add(texto[i]);

        rect[i] = draw.rect(200, 200)
                    .attr({
                        x: pos_x,
                        y: pos_y,
                    })
                    .transform({
                        rotate : random_rotation[i],
                    });

        pos_x = pos_x + 200;

        if (pos_x > 200) {
            pos_x = 0;
            pos_y = pos_y + 200;
        }

        clip[i] = draw.clip().add(rect[i]);
        grupo[i].clipWith(clip[i]);
    }
}

grafema();
draw.clear();
grafema();

This is a simplified version of a program I'm trying to create. In the future I would like to clear and re-draw whenever the user makes a click.

Upvotes: 1

Views: 499

Answers (1)

saulotoledo
saulotoledo

Reputation: 1982

The problem in your code is not the clear() method. You are using global variables pos_x and pos_y and you are incrementing them. In your second drawing, the images are outside the visible area. To solve your issue, initialise those variables in the beginning of your grafema function:

// ...
function grafema() {
    pos_x = 0;
    pos_y = 0;
    for (var i = 0; i <= 3; i++) {
        // ...

Example of execution with infinite drawings:

https://jsbin.com/mehuholiwo/edit?js,output

Upvotes: 2

Related Questions