Question

我想在正面图像上显示鼠标移动时的背景图像。我已经尝试使用fabricjs，但似乎模式图像偏移在鼠标上更新。

我也尝试过在鼠标移动时使像素透明，但在慢速设备上存在性能问题。你能提出更好的解决方案吗？

HTML

<canvas id="container"></canvas>

JS

var canvasWidth = window.innerWidth;
var canvasHeight = window.innerHeight;

var backgroundUrl = "http://www.keenthemes.com/preview/metronic/theme/assets/global/plugins/jcrop/demos/demo_files/image2.jpg";
var frontUrl = "http://tofurious.wpengine.netdna-cdn.com/images/textures/texture-8.jpg";

var canvas = new fabric.Canvas('container', {
    width:canvasWidth,
    height:canvasHeight,
    isDrawingMode: true 
});

fnDrawImage(backgroundUrl); 
drawPattern()

function fnDrawImage(_url){
    var Image = fabric.Image.fromURL(_url, function(oImg) { 
        oImg.width = canvasWidth;
        oImg.height = canvasHeight;
        oImg.selectable = false;
        canvas.add(oImg);   
    });     
}

function drawPattern(){
    var img = new Image();
    img.src = frontUrl;
    img.onload = function(){
        img.width = canvasWidth;
        img.height = canvasHeight;
        fnTexturePattern(img);
        //fnStartFreeDrawing(img);
    }
}

function fnTexturePattern(_img){
    var texturePatternBrush = new fabric.PatternBrush(canvas);  
    texturePatternBrush.source = _img;      
    canvas.freeDrawingBrush = texturePatternBrush;
    canvas.freeDrawingBrush.width = 30;
}

JSFiddle - http://jsfiddle.net/3qp5y9jb/

显示鼠标移动背景图像在前面的图像

0 个答案: