FabricJS:在对象

时间:2015-12-19 19:48:32

标签: javascript jquery html5-canvas fabricjs

我正在研究面料设计js app&我需要一个像我的设计应用程序一样的贴纸模切效果,如链接
http://www.stickeryou.com/2/stickermaker/selectart
转到此链接首先添加一些文字&图像&改变图像模切的方法
enter image description here

我的代码是

canvas = new fabric.Canvas('design-canvas');

jQuery('#add-text-btn').click(function() {
  var message = $('textarea#add-text-value').val();
           
            var new_text = new fabric.Text(message, { left: 100, top: 100, fontSize: 20 });
            canvas.add(new_text);
            canvas.setActiveObject(canvas.item(canvas.getObjects().length-1));      
        });
        
        // image manage
    var imageLoader = document.getElementById('imageLoader');
    imageLoader.addEventListener('change', handleImage, false);
    function handleImage(e) {
        var reader = new FileReader();
        reader.onload = function(event) {
            var img = new Image();
            img.onload = function() {
                var imgInstance = new fabric.Image(img, {
                    scaleX: 0.2,
                    scaleY: 0.2
                })
                canvas.add(imgInstance);
            }
            img.src = event.target.result;
        }
        reader.readAsDataURL(e.target.files[0]);
    }
    // image manage
<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea rows="7" class="form-control" id="add-text-value">Your Text Here</textarea>
<button id="add-text-btn">ADD TEXT </button>
<input class="btn btn-default" type="file" id="imageLoader" name="imageLoader" />
<div style="background:#eee"><canvas id="design-canvas" width="500" height="400"></canvas></div>

我想要那样的东西 在此先感谢您的帮助 enter image description here

0 个答案:

没有答案