裁剪到Fabric JS中的图像形状

Question

I was trying to implement like similar website. 我试图实现类似的网站。

http://printio.ru/full_print_tees/new http://printio.ru/full_print_tees/new

Even i tried answer of following post but it is not working.Does any one have the solution or fiddle. 即使我尝试了以下帖子的答案，但它也不起作用。任何人都有解决方案或小提琴。 Fabric.js Clip Canvas (or object group) To Polygon Fabric.js将画布（或对象组）剪辑为多边形

I have create following example but it is not working similar. 我已经创建了以下示例，但它的工作方式并不相似。 Please let me know what is problem 请让我知道是什么问题

<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="fabric.min.js"></script>

<style>
    body{ background-color: ivory; }
    canvas{border: 1px solid red; }
</style>

<script>
    $(function(){

        var canvas = new fabric.Canvas('canvas');
        var group = [];

        fabric.loadSVGFromURL("http://fabricjs.com/assets/2.svg",function(objects,options) {

            var loadedObjects = new fabric.Group(group);

            loadedObjects.set({
                    left: 100,
                    top: 100

            });

            canvas.add(loadedObjects);
            shape = canvas.item(0);
            canvas.remove(shape);
            canvas.clipTo = function(ctx) {
              shape.render(ctx);
            };
            canvas.renderAll();

        },function(item, object) {
                object.set('id',item.getAttribute('id'));
                group.push(object);
        });



          }); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width="300" height="300"></canvas> 
</body>
</html>

Answer 1

Hello are you looking something like this on my example? 您好，您在我的示例中看起来像这样吗？

load one image (t-shirt) 加载一张图像（T恤）
add i-text object 添加文本对象
manipulate text object (edit,move up/down/left/right) on the t-shirt 在T恤上操纵文本对象（编辑，上/下/左/右移动）

small snippet: 小片段：

fabric.Image.fromURL(myImg, function(myImg) {
    var img1 = myImg.scale(scaleFactor).set({ left: 0, top: 0 });

    var text = new fabric.Text('the_text_sample\nand more', {
                fontFamily: 'Arial',
                fontSize:20,
            });

    text.set("top",myImg.height*scaleFactor-myImg.height*scaleFactor+150);
    text.set("left",myImg.width*scaleFactor/2-text.width/2);

    var group = new fabric.Group([ img1,text ], { left: 10, top: 10 });
    canvas.add(group);
console.log(canvas._objects[0]._objects[1].text);
});

live example : https://jsfiddle.net/tornado1979/zrazuhcq/ 实时示例： https : //jsfiddle.net/tornado1979/zrazuhcq/

Hope helps,good luck. 希望有帮助，祝你好运。

裁剪到Fabric JS中的图像形状

问题描述

1 个解决方案

解决方案1
2 2016-02-29 11:36:16

裁剪到Fabric JS中的图像形状

问题描述

1 个解决方案

解决方案1 2 2016-02-29 11:36:16

解决方案1
2 2016-02-29 11:36:16